@import '../default/var';
// @import './icon';
.#{$prefix} {
    &-alert {
        padding: 8.5px 38px;
        line-height: 1.5;
        margin: 0;
        // box-sizing: border-box;
        border-radius: 2px;
        position: relative;
        background-color: $alert-color-back;
        overflow: hidden;
        opacity: 1;
        font-size: $alert-font-size;
        text-align: left;
        transition: all 0.2s;
        color: $alert-color-fore;
        &__popup {
            position: fixed;
            transition: opacity 0.3s, transform 0.4s, top 0.4s;
            min-width: 300px;
            max-width: 400px;
            &--message {
                transform: translate3d(-50%, 0, 0);
                left: 50%;
            }
            &--notice {
                right: 20px;
                transform: translateX(0);
            }
        }
        &__icon {
            display: block;
            position: absolute;
            margin-top: -1px;
        }
        @each $type in success,
        error,
        info,
        warning {
            $colors: map-get($alert-colors, $type);
            &--#{$type} {
                border: solid 1px map-get($colors, 'border');
                background-color: map-get($colors, 'back');
            }
            &__icon {
                &.jdd-icon-#{$type},
                &.jdd-icon-#{$type}-o {
                    color: map-get($colors, 'icon');
                }
            }
        }
        &--small {
            .#{$prefix}-alert__icon {
                left: 16px;
                top: 12px;
            }
        }
        &__content {
            width: 100%;
        }
        &__title {
            font-size: $alert-font-size-title;
            font-weight: bold;
            margin-bottom: 4px;
        }
        &__message {
            word-break: break-all;
        }
        &__action {
            white-space: nowrap;
            float: right;
            padding-left: 20px;
            a {
                text-decoration: none;
            }
        }
        &--large {
            padding: 20px 40px 20px 82px;
            min-height: 72px;
            .#{$prefix}-alert__icon {
                top: 16px;
                left: 24px;
                &:before {
                    font-size: 40px;
                }
            }
        }
        &--medium {
            padding: 16px 32px 16px 64px;
            min-height: 72px;
            .#{$prefix}-alert__icon {
                top: 16px;
                left: 24px;
                &:before {
                    font-size: 24px;
                }
            }
        }
        .#{$prefix}-icon-close {
            position: absolute;
            width: 8px;
            height: 8px;
            top: 16px;
            right: 16px;
            cursor: pointer;
            &:before,
            &:after {
                position: absolute;
                content: '';
                width: 1px;
                height: 10px;
                background: $alert-color-close;
                display: block;
                top: -2px;
                left: 5px;
            }
            &:before {
                transform: rotate(-45deg);
            }
            &:after {
                transform: rotate(45deg);
            }
        }
    }
}