@import "../../core/styles/themes/default";
@import "../../core/styles/mixins/index";

@message-prefix-cls: ~"@{ant-prefix}-message";

.@{message-prefix-cls} {
    .reset-component;
    position: fixed;
    z-index: @zindex-message;
    width: 100%;
    top: 16px;
    left: 0;
    pointer-events: none;

    &-notice {
        padding: 8px;
        text-align: center;
        &:first-child {
            margin-top: -8px;
        }
    }

    &-notice-content {
        padding: @message-notice-content-padding;
        border-radius: @border-radius-base;
        box-shadow: @shadow-2;
        background: @component-background;
        display: inline-block;
        pointer-events: all;
    }

    &-success .@{iconfont-css-prefix} {
        color: @success-color;
    }

    &-error .@{iconfont-css-prefix} {
        color: @error-color;
    }

    &-warning .@{iconfont-css-prefix} {
        color: @warning-color;
    }

    &-info .@{iconfont-css-prefix},
    &-loading .@{iconfont-css-prefix} {
        color: @info-color;
    }

    .@{iconfont-css-prefix} {
        margin-right: 8px;
        font-size: @font-size-lg;
        top: 1px;
        position: relative;
    }

    &-notice.move-up-leave.move-up-leave-active {
        animation-name: MessageMoveOut;
        overflow: hidden;
        animation-duration: .3s;
    }
}

@keyframes MessageMoveOut {
    0% {
        opacity: 1;
        max-height: 150px;
        padding: 8px;
    }
    100% {
        opacity: 0;
        max-height: 0;
        padding: 0;
    }
}
