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

@include c(notice) {
    position: fixed;
    z-index: $--modal-z-index;
    line-height: 1;
    transition: all $--animation-time;
    border-radius: $--border-radius-default;
    overflow: hidden;
    background-color: #ffffff;
    padding: $--notice-padding;
    box-shadow: $--box-shadow-default;

    @include m(topLeft) {
        margin-left: 24px;
    }
    @include m(bottomLeft) {
        margin-left: 24px;
    }
    @include m(topRight) {
        margin-right: 24px;
    }
    @include m(bottomRight) {
        margin-right: 24px;
    }

    @include e(title) {
        font-size: $--font-size-title;
        color: $--color-text-title;
        padding-right: 10px;
        margin-bottom: 10px;
    }

    @include e(content) {

    }

    @include e(close) {
        position: absolute;
        right: 16px;
        top: 16px;
        cursor: pointer;
        color: $--color-text-default;
        &:hover {
            color: $--color-text-title;
        }
    }


    @include m(only-title) {
        @include e(title, false) {
            margin-bottom: 0;
        }
    }

    @include e(icon) {
        position: absolute;
        top: 50%;
        transform: translate(-50%, -50%);
    }

    @include m(type) {
        padding-left: $--notice-padding-with-content-icon-horizontal;

        @include e(icon, false) {
            left: #{$--notice-padding-with-content-icon-horizontal / 2};
            i {
                font-size: 36px;
            }
        }

        @include m(only-title, false, true) {
            padding-left: $--notice-padding-with-icon-horizontal;

            @include e(icon, false) {
                left: #{$--notice-padding-with-icon-horizontal / 2};

                i {
                    font-size: 20px;
                }
            }
        }
    }

    @include m(info) {

        @include m(background, false, true) {
            background-color: mix($--color-info, $--color-white, 10%);
        }

        @include e(icon, false) {
            color: $--color-info;
        }
    }

    @include m(success) {
        @include m(background, false, true) {
            background-color: mix($--color-success, $--color-white, 10%);
        }

        @include e(icon, false) {
            color: $--color-success;
        }
    }

    @include m(error) {
        @include m(background, false, true) {
            background-color: mix($--color-danger, $--color-white, 10%);
        }

        @include e(icon, false) {
            color: $--color-danger;
        }
    }

    @include m(warning) {
        @include m(background, false, true) {
            background-color: mix($--color-warning, $--color-white, 10%);
        }

        @include e(icon, false) {
            color: $--color-warning;
        }
    }
}
