@import '../default/var';
// @import './icon';
.#{$prefix} {
    &-toast {
        position: fixed;
        left: 50%;
        transform: translateX(-50%);
        padding: 9.5px 30px;
        border-radius: 4px;
        color: $toast-color-fore;
        transition: opacity 0.4s;
        max-width: 400px;
        &--top {
            top: 20px;
        }
        &--bottom {
            bottom: 20px;
        }
        &--center {
            top: 50%;
            left: 50%;
            transform: translate3d(-50%, -50%);
        }
        &--dark {
            background-color: $toast-color-dark-back;
        }
        &__icon {
            width: 16px;
            height: 16px;
            margin-right: 10px;
            position: absolute;
            left: 16px;
            top: 12px;
            @each $type in success,
            error,
            info,
            warning {
                $colors: map-get($alert-colors, $type);
                &.#{$prefix}-icon-#{$type} {
                    color: map-get($colors, 'icon');
                }
            }
        }
        &.has-icon {
            padding-left: 48px;
        }
    }
}