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

.el-alert {
    width: 100%;
    padding: $--alert-padding;
    margin: 0;
    box-sizing: border-box;
    border-radius: $--alert-border-radius;
    position: relative;
    background-color: $--color-white;
    overflow: hidden;
    opacity: 1;
    transition: opacity .2s;
    line-height: normal;
    border-width: 1px;
    border-style: solid;
    display: flex;
}

.el-alert--success {
    background-color: $color-success-light;
    color: $color-success-dark;
    border-color: $color-success;

    .el-alert__description, .el-alert__closebtn {
        color: $color-success-dark;
    }
}

.el-alert--info {
    background-color: $color-info-light;
    color: $color-info-dark;
    border-color: $color-info;

    .el-alert__description, .el-alert__closebtn {
        color: $color-info-dark;
    }
}

.el-alert--warning {
    background-color: $color-warning-light;
    color: $color-warning-dark;
    border-color: $color-warning;

    .el-alert__description, .el-alert__closebtn {
        color: $color-warning-dark;
    }
}

.el-alert--error {
    background-color: $color-danger-light;
    color: $color-danger-dark;
    border-color: $color-danger;

    .el-alert__description, .el-alert__closebtn {
        color: $color-danger-dark;
    }
}

.el-alert__content {
    width: 100%;
}

.el-alert__description {
    font-size: $--alert-description-font-size;
    margin: .5em 0 0 0;
}

.el-alert__icon {
    font-size: $--alert-icon-size;
    width: $--alert-icon-size;

    + .el-alert__content {
        padding-left: 1em;
    }
}

.el-alert__title {
    font-size: $--alert-title-font-size;
    line-height: 1em;
}

.el-alert__title--bold {
    font-weight: 500;
}

.el-alert__closebtn {
    font-size: .8em;
    padding: 1em;
    margin-right: -.9em;
    cursor: pointer;
    opacity: .5;
    transition: opacity 120ms ease-in;

    &:hover {
        opacity: .8;
    }
}
.el-alert-fade-enter,
.el-alert-fade-leave-active {
    opacity: 0;
}