// @import "../../style/animation";

.#{$message-prefix-cls} {
    font-size: $fontSize;
    position: fixed;
    z-index: $zindex-message;
    width: 100%;
    top: 16px;
    left: 0;
    pointer-events: none;

    &-notice {
        padding: 8px;
        text-align: center;
        transition: height $animation-time $ease-in-out, padding $animation-time $ease-in-out;

        &:first-child {
            margin-top: -8px;
        }

        &-close {
            position: absolute;
            right: 4px;
            top: 10px;
            color: #999;
            outline: none;

            // i.${icon-prefix-cls} {
            //     .close-base(-3px);
            // }
        }
    }

    &-notice-content {
        display: inline-block;
        pointer-events: all;
        padding: 8px 16px;
        //border: 1px solid $borderColorSplit;
        border-radius: $borderRadius;
        box-shadow: $shadow-base;
        background: #fff;
        position: relative;

        &-text {
            display: inline-block;
        }
    }

    // &-notice-closable {
    //     .${message-prefix-cls}-notice-content-text {
    //         padding-right: 32px;
    //     }
    // }

    &-success {
        .#{$prefix-name}icon {
            color: $successColor;
        }
    }

    &-error {
        .#{$prefix-name}icon {
            color: $errorColor;
        }
    }

    &-warning {
        .#{$prefix-name}icon {
            color: $warningColor;
        }
    }

    &-info,
    &-loading {

        .#{$prefix-name}icon,
        .#{$prefix-name}icon {
            color: $primaryColor;
        }
    }




    .#{icon-prefix-cls} {
        margin-right: 4px;
        font-size: $fontSize;
        vertical-align: middle;
    }

    &-custom-content {
        span {
            vertical-align: middle;
        }
    }

    &-notice-with-background {


        .#{$message-prefix-cls}-notice-content-info {
            background: lighten($primaryColor, 40%);
            color: $primaryColor;
            border: 1px solid lighten($primaryColor, 35%);
        }

        .#{$message-prefix-cls}-notice-content-success {
            background: lighten($successColor, 40%);
            color: $successColor;
            border: 1px solid lighten($successColor, 35%);
        }

        .#{$message-prefix-cls}-notice-content-warning {
            background: lighten($warningColor, 40%);
            color: $warningColor;
            border: 1px solid lighten($warningColor, 35%);
        }

        .#{$message-prefix-cls}-notice-content-error {
            background: lighten($errorColor, 40%);
            color: $errorColor;
            border: 1px solid lighten($errorColor, 35%);
        }

        .#{message-prefix-cls}-notice-content {
            &-background {
                box-shadow: none;
            }


        }

    }


}