@import '../../style/themes/index';
@import '../../style/mixins/index';

@alert-prefix-cls: ~'@{acud-prefix}-alert';

.@{alert-prefix-cls} {
    .reset-component();

    position: relative;
    display: flex;
    align-items: flex-start;
    padding: @P 4 * @P;
    word-wrap: break-word;
    border-radius: @alert-border-radius;

    &-content {
        flex: 1;
        min-width: 0;
    }

    &-icon {
        margin: 4px @alert-margin 0 0;
        font-size: @alert-icon-size;
        height: @alert-icon-size;
        line-height: @alert-icon-size;
    }

    &-description {
        display: none;
        font-size: @T2;
        line-height: @T2 + 8px;
        color: @alert-message-color;
    }

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

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

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

    &-error {
        background-color: @alert-error-bg-color;
        border: none;

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

        .@{alert-prefix-cls}-description > pre {
            margin: 0;
            padding: 0;
            background: transparent;
            overflow: scroll;
        }
    }

    &-action {
        margin-left: @alert-margin;
    }

    &-close-icon {
        margin-left: @alert-margin;
        margin-top: @P;
        padding: 0;
        overflow: hidden;
        font-size: @T4;
        line-height: @T2;
        background-color: transparent;
        border: none;
        outline: none;
        cursor: pointer;

        > .@{iconfont-css-prefix} {
            color: @alert-close-color;
            transition: color .3s;

            &:hover {
                color: @alert-close-hover-color;
            }

            &:active {
                color: @alert-close-click-color;
            }
        }
    }

    &-close-text {
        font-size: @T2;
        color: @alert-close-text-color;
        transition: color .3s;

        &:hover {
            color: @alert-close-text-hover-color;
        }
    }

    &-with-description {
        align-items: flex-start;
        padding: @alert-padding;
    }

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

    &-message {
        color: @alert-message-color;
        font-size: @T2;
        line-height: 6 * @P;
    }

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

    &&-motion-leave {
        overflow: hidden;
        opacity: 1;
        transition: max-height .3s @ease-in-out-circ, opacity .3s @ease-in-out-circ,
        padding-top .3s @ease-in-out-circ, padding-bottom .3s @ease-in-out-circ,
        margin-bottom .3s @ease-in-out-circ;
    }

    &&-motion-leave-active {
        max-height: 0;
        margin-bottom: 0 !important;
        padding-top: 0;
        padding-bottom: 0;
        opacity: 0;
    }

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

@import './rtl';