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

@alert-prefix-cls: ~"@{ant-prefix}-alert";
@alert-message-color: @heading-color;
@alert-text-color: @text-color;
@alert-close-color: @text-color-secondary;

.@{alert-prefix-cls} {
    .reset-component;
    position: relative;
    padding: 8px 15px 8px 37px;
    border-radius: @border-radius-base;

    &&-no-icon {
        padding: 8px 15px;
    }

    &&-closable {
        padding-right: 30px;
    }

    &-icon {
        top: 8px + @font-size-base * @line-height-base / 2 - @font-size-base / 2;
        left: 16px;
        position: absolute;
    }

    &-description {
        font-size: @font-size-base;
        line-height: 22px;
        display: none;
    }

    &-success {
        border: @border-width-base @border-style-base @alert-success-border-color;
        background-color: @alert-success-bg-color;
        .@{alert-prefix-cls}-icon {
            color: @alert-success-icon-color;
        }
    }

    &-info {
        border: @border-width-base @border-style-base @alert-info-border-color;
        background-color: @alert-info-bg-color;
        .@{alert-prefix-cls}-icon {
            color: @alert-info-icon-color;
        }
    }

    &-warning {
        border: @border-width-base @border-style-base @alert-warning-border-color;
        background-color: @alert-warning-bg-color;
        .@{alert-prefix-cls}-icon {
            color: @alert-warning-icon-color;
        }
    }

    &-error {
        border: @border-width-base @border-style-base @alert-error-border-color;
        background-color: @alert-error-bg-color;
        .@{alert-prefix-cls}-icon {
            color: @alert-error-icon-color;
        }
    }

    &-close-icon {
        font-size: @font-size-sm;
        position: absolute;
        right: 16px;
        top: 8px;
        line-height: 22px;
        overflow: hidden;
        cursor: pointer;

        .@{iconfont-css-prefix}-close {
            color: @alert-close-color;
            transition: color .3s;
            &:hover {
                color: #404040;
            }
        }
    }

    &-close-text {
        position: absolute;
        right: 16px;
    }

    &-with-description {
        padding: 15px 15px 15px 64px;
        position: relative;
        border-radius: @border-radius-base;
        color: @alert-text-color;
        line-height: @line-height-base;
    }

    &-with-description&-no-icon {
        padding: 15px;
    }

    &-with-description &-icon {
        position: absolute;
        top: 16px;
        left: 24px;
        font-size: 24px;
    }

    &-with-description &-close-icon {
        position: absolute;
        top: 16px;
        right: 16px;
        cursor: pointer;
        font-size: @font-size-base;
    }

    &-with-description &-message {
        font-size: @font-size-lg;
        color: @alert-message-color;
        display: block;
        margin-bottom: 4px;
    }

    &-with-description &-description {
        display: block;
    }

    &&-close {
        height: 0 !important;
        margin: 0;
        padding-top: 0;
        padding-bottom: 0;
        transition: all .3s @ease-in-out-circ;
        transform-origin: 50% 0;
    }

    &-slide-up-leave {
        animation: antAlertSlideUpOut .3s @ease-in-out-circ;
        animation-fill-mode: both;
    }

    &-banner {
        border-radius: 0;
        border: 0;
        margin-bottom: 0;
    }
}

// @keyframes antAlertSlideUpIn {
//     0% {
//         opacity: 0;
//         transform-origin: 0% 0%;
//         transform: scaleY(0);
//     }
//     100% {
//         opacity: 1;
//         transform-origin: 0% 0%;
//         transform: scaleY(1);
//     }
// }

@keyframes antAlertSlideUpOut {
    0% {
        opacity: 1;
        transform-origin: 0% 0%;
        transform: scaleY(1);
    }
    100% {
        opacity: 0;
        transform-origin: 0% 0%;
        transform: scaleY(0);
    }
}
