@include wrap-class() {
    .wcc-admin-notice {
        display: flex;
        justify-content: space-between;
        position: relative;
        margin: 0 0 calc($wcc-gutter-md / 2);
        -webkit-box-shadow: 0 5px 15px 0 rgba(0, 0, 0, 0.02);
        box-shadow: 0 5px 15px 0 rgba(0, 0, 0, 0.02);
        border: 1px solid transparent;
        border-radius: 4px;
        background: color(mono, white);
        .wcc-admin-notice-content {
            width: 100%;
            display: flex;
            align-items: center;
            margin: 0;
            padding: #{calc($wcc-gutter / 3)} #{calc($wcc-gutter / 2)};
            p {
                margin: 0 0 #{calc($wcc-gutter-md / 2)};
                padding: 0;
                border: 0;
                font-size: 13px;
                &:last-child {
                    margin-bottom: 0;
                }
            }
            .wcc-admin-notice-header {
                display: flex;
                align-items: center;
                margin: 0 0 5px;
                padding: 0;
                border: 0;
                color: color(primary, font);
            }
            .wcc-admin-notice-message {
                flex: 1;
                position: relative;
                padding: 5px 0px 3px;

                .wcc-admin-notice-icon {
                    position: absolute;
                    top: 8px;
                    left: -7px;

                    &.wcc-sm {
                        top: 9px;
                    }

                    &.wcc-md {
                        top: 7px;
                    }

                    &.wcc-lg {
                        top: 5px;
                    }
                }

                + .wcc-admin-notice-actions {
                    flex: 0 0 auto;
                    margin-right: -#{calc($wcc-gutter-md / 2) - 1px};
                    margin-left: #{calc($wcc-gutter-md / 2)};
                }
            }
        }
        &.wcc-admin-notice-has-icon {
            .wcc-admin-notice-content {
                &::before {
                    content: "";
                    width: 15px;
                    height: 15px;
                    margin-right: 10px;
                    margin-top: 2px;
                    display: flex;
                    background-image: url("~@/assets/success.svg");
                    display: inline-block;
                    background-repeat: no-repeat;
                    background-size: 100%;
                }
            }
        }
        &.wcc-admin-notice-dismissable {
            .wcc-admin-notice-message {
                flex: 1;
                position: relative;
                padding: 5px 20px 3px 0px;
            }
        }
        &.wcc-admin-notice-default {
            .wcc-admin-notice-content {
                p {
                    font-size: 14px;
                }
            }
        }
        &.wcc-admin-notice-info {
            border-color: #d7e1f2;
            background-color: color(info, light);
            &.wcc-admin-notice-has-icon {
                .wcc-admin-notice-content {
                    &::before {
                        background-image: url("~@/assets/warning.svg");
                    }
                }
            }
        }
        &.wcc-admin-notice-error {
            background-color: color(error, lighter);
            &.wcc-admin-notice-has-icon {
                .wcc-admin-notice-content {
                    &::before {
                        background-image: url("~@/assets/error.svg");
                    }
                }
            }
        }
        &.wcc-admin-notice-warning {
            background-color: color(warning, lighter);
            color: color(warning, dark);
            & p {
                color: color(warning, dark);
            }
            &.wcc-admin-notice-has-icon {
                .wcc-admin-notice-content {
                    &::before {
                        background-image: url("~@/assets/warning.svg");
                    }
                }
            }
        }
        .wcc-admin-notice-close {
            display: flex;
            align-items: center;
            margin-right: 15px;
            position: absolute;
            right: 0;
            top: 10px;
        }
        .wcc-close {
            font-size: 20px;
            font-weight: 300;
            padding: 0;
            background: transparent;
            border: none;
            display: inline-block;
            color: #7e7e7e;
            cursor: pointer;
        }
    }
    .wcc-notice-fade-enter-active {
        transition: opacity 0.5s;
    }
    .wcc-notice-fade-enter, .wcc-notice-fade-leave-to /* .fade-leave-active in <2.1.8 */ {
        opacity: 0;
    }
}