@message-prefix-cls: ~"@{css-prefix}message";
@icon-prefix-cls: ~"@{css-prefix}icon";

.@{message-prefix-cls} {
    font-size: @font-size-base;
    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;
            outline: none;

            i.@{icon-prefix-cls}{
                .close-base(0px, 14px);
            }
        }
    }

    &-notice-content {
        display: inline-block;
        pointer-events: all;
        padding: 10px 20px 10px 20px;
        //border: 1px solid @border-color-split;
        border-radius: @border-radius-base;
        box-shadow: @message-light-shadow;
        background: @color-complementary-10;
        
        // color: #FFF;
        position: relative;
        &-text{
            display: inline-block;
            line-height:20px;
        }
        &-dark{
            background: @message-dark-bg-color;
            color: @color-functional-white;
            box-shadow: @message-dark-shadow;

            &.@{message-prefix-cls}-notice-content-success .@{icon-prefix-cls} {
                color: @message-success-dark-color;
            }
        
            &.@{message-prefix-cls}-notice-content-error .@{icon-prefix-cls} {
                color: @message-error-dark-color;
            }
        
            &.@{message-prefix-cls}-notice-content-warning .@{icon-prefix-cls} {
                color: @message-warning-dark-color;
            }
            &.@{message-prefix-cls}-notice-content-help .@{icon-prefix-cls} {
                color: @message-help-dark-color;
            }
            &.@{message-prefix-cls}-notice-content-info .@{icon-prefix-cls},
            &.@{message-prefix-cls}-notice-content-loading .@{icon-prefix-cls} {
                color: @message-info-dark-color;
            }

            .@{message-prefix-cls}-custom-content span {
                color: @color-functional-white;
            }
            .@{message-prefix-cls}-notice-close .@{icon-prefix-cls} {
                color: @color-functional-white;
            }
        }
    }

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

    &-success .@{icon-prefix-cls} {
        color: @message-success-color;
    }

    &-error .@{icon-prefix-cls} {
        color: @message-error-color;
    }

    &-warning .@{icon-prefix-cls} {
        color: @message-warning-color;
    }

    &-info .@{icon-prefix-cls},
    &-loading .@{icon-prefix-cls} {
        color: @message-info-color;
    }   
    &-help .@{icon-prefix-cls}{
        color: @message-help-light-color;
    }

    .@{icon-prefix-cls} {
        margin-right: 8px;
        font-size: @font-size-large;
        vertical-align: middle;
    }
    &-custom-content{
        display: flex;
        align-items: center;
        span{
            color: @message-text-color;
        }
    }

    // &-notice-with-background{
    //     .@{message-prefix-cls}-notice-content{
    //         padding-top: 9.5px;
    //         padding-bottom: 9.5px;
    //         &-background{
    //             box-shadow: none;
    //         }
    //         &-info{
    //             // background: ~`colorPalette("@{primary-color}", 1)`;
    //             // color: ~`colorPalette("@{primary-color}", 6)`;
    //             // border: 1px solid ~`colorPalette("@{primary-color}", 2)`;
    //             // background: @color-bg-select;
    //             border: 1px solid @message-info-color;
    //             .@{message-prefix-cls}-custom-content span {
    //                 color: @message-info-color;
    //             }
    //         }
    //         &-success{
    //             // background: ~`colorPalette("@{success-color}", 1)`;
    //             // color: ~`colorPalette("@{success-color}", 6)`;
    //             // border: 1px solid ~`colorPalette("@{success-color}", 2)`;
    //             // background: #E7F7EA;
    //             border: 1px solid @message-success-color;
    //             .@{message-prefix-cls}-custom-content span {
    //                 color: @message-success-color;
    //             }
    //         }
    //         &-warning{
    //             // background: ~`colorPalette("@{warning-color}", 1)`;
    //             // color: ~`colorPalette("@{warning-color}", 6)`;
    //             // border: 1px solid ~`colorPalette("@{warning-color}", 2)`;
    //             // background: #FEF1E7;
    //             border: 1px solid @message-warning-color;
    //             .@{message-prefix-cls}-custom-content span {
    //                 color: @message-warning-color;
    //             }
    //         }
    //         &-error{
    //             // background: ~`colorPalette("@{error-color}", 1)`;
    //             // color: ~`colorPalette("@{error-color}", 6)`;
    //             // border: 1px solid ~`colorPalette("@{error-color}", 2)`;
    //             // background: #FCEBEA;
    //             border: 1px solid @message-error-color;
    //             .@{message-prefix-cls}-custom-content span {
    //                 color: @message-error-color;
    //             }
    //         }
    //     }
    // }
}