@import "./base/var";
@import "./mixins/index.scss";

@include c(alter) {
    position: relative;
    box-sizing: border-box;
    border-width: 1px;
    border-style: solid;
    margin-bottom: 10px;
    line-height: normal;
    overflow: hidden;
    padding: $--alter-padding-vertical $--alter-padding-horizontal;
    border-radius: $--border-radius-default;
    font-size: $--font-size-default;
    transform-origin: top;

    @include e(close) {
        position: absolute;
        right: $--alter-padding-horizontal;
        top: 50%;
        transform: translateY(-50%);
        color: mix($--color-white, $--color-text-default, 30%);
        cursor: pointer;
        &:hover,
        &:focus,
        &:active {
            color: $--color-text-default;
        }
    }

    @include m(with-des) {
        line-height: $--line-height-default;
        padding: $--alter-padding-horizontal;
        @include e(close) {
            top: $--alter-padding-vertical;
            transform: translateY(0);
        }
        @include e(message, false) {
            font-size: $--font-size-title;
            color: $--color-text-title;
        }
    }

    @include m(with-icon) {
        padding-left: $--alter-padding-with-icon-horizontal;
        @include e(icon, false) {
            position: absolute;
            top: 50%;
            left: #{$--alter-padding-with-icon-horizontal / 2};
            transform: translate(-50%, -50%);
            font-size: 16px;
        }

        @include m(with-des, false, true) {
            padding-left: $--alter-padding-with-icon-description-horizontal;
            @include e(icon, false) {
                left: #{$--alter-padding-with-icon-description-horizontal / 2};
                font-size: 26px;
            }
        }
    }


    @include m(info) {
        background-color: mix($--color-info, $--color-white, 10%);
        border-color: mix($--color-white, $--color-info, 30%);
        @include e(icon, false) {
            color: $--color-info;
        }
        @include m(dark, false, true) {
            background-color: $--color-info;
            border-color: $--color-info;
        }
    }
    @include m(success) {
        background-color: mix($--color-success, $--color-white, 10%);
        border-color: mix($--color-white, $--color-success, 30%);
        @include e(icon, false) {
            color: $--color-success;
        }
        @include m(dark, false, true) {
            background-color: $--color-success;
            border-color: $--color-success;
        }
    }
    @include m(error) {
        background-color: mix($--color-danger, $--color-white, 10%);
        border-color: mix($--color-white, $--color-danger, 30%);
        @include e(icon, false) {
            color: $--color-danger;
        }
        @include m(dark, false, true) {
            background-color: $--color-danger;
            border-color: $--color-danger;
        }
    }
    @include m(warning) {
        background-color: mix($--color-warning, $--color-white, 10%);
        border-color: mix($--color-white, $--color-warning, 30%);
        @include e(icon, false) {
            color: $--color-warning;
        }
        @include m(dark, false, true) {
            background-color: $--color-warning;
            border-color: $--color-warning;
        }
    }

    @include m(dark) {
        color: $--color-white;

        @include e((icon, message, description, close), false) {
            color: $--color-white;
        }
    }
}
