@import "mixins/mixins";
@import "common/var";

@include b(message) {
    min-width: $--message-min-width;
    max-width: 90vw;
    box-sizing: border-box;
    border-radius: $--border-radius-base;
    border-width: $--border-width-base;
    border-style: $--border-style-base;
    border-color: $--border-color-lighter;
    position: fixed;
    left: 50%;
    top: 20px;
    transform: translateX(-50%);
    background-color: $--message-background-color;
    transition: opacity .3s, transform .4s;
    overflow: hidden;
    padding: $--message-padding;
    display: flex;
    align-items: center;

    @include when(center) {
        justify-content: center;
    }

    @include when(closable) {
        .el-message__content {
            padding-right: 16px;
        }
    }

    p {
        margin: 0;
    }

    @include m(info) {
        background-color: $color-info-light;
        border-color: $color-info;

        .el-message__content {
            color: $--message-info-color;
        }
    }

    @include m(success) {
        background-color: $color-success-light;
        border-color: $color-success;

        .el-message__content {
            color: $--message-success-color;
        }
    }

    @include m(warning) {
        background-color: $color-warning-light;
        border-color: $color-warning;

        .el-message__content {
            color: $--message-warning-color;
        }
    }

    @include m(error) {
        background-color: $color-danger-light;
        border-color: $color-danger;

        .el-message__content {
            color: $--message-danger-color;
        }
    }

    @include e(icon) {
        margin-right: 10px;
    }

    @include e(content) {
        padding: 0;
        font-size: 14px;
        line-height: 1;
        &:focus {
            outline-width: 0;
        }
    }

    @include e(closeBtn) {
        position: absolute;
        top: 50%;
        right: 15px;
        transform: translateY(-50%);
        cursor: pointer;
        color: $--message-close-color;
        font-size: $--message-close-size;

        &:focus {
            outline-width: 0;
        }
        &:hover {
            color: $--message-close-hover-color;
        }
    }

    & .fa-times {
        vertical-align: middle;
    }

    & .fa-check-circle {
        color: $--message-success-color;
    }

    & .fa-times-circle {
        color: $--message-danger-color;
    }

    & .fa-info-circle {
        color: $--message-info-color;
    }

    & .fa-exclamation-circle {
        color: $--message-warning-color;
    }
}

.el-message-fade-enter,
.el-message-fade-leave-active {
    opacity: 0;
    transform: translate(-50%, -100%);
}


@media (max-width: $--message-min-width + 100) {
    .el-message {
        min-width: 90vw;
    }
}