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

@include c(loading) {
    @include e(icon) {
        position: relative;
        display: inline-block;
        background-color: $--color-primary;
        border-radius: $--border-radius-circle;
        animation: loading-animation 1s 0s ease-in-out infinite;
    }
    @include e(text) {
        color: $--color-primary;
    }
    @include e(icon-font) {
        color: $--color-primary;
    }

    @include m(fix) {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: hsla(0, 0%, 100%, .9);
        text-align: center;
        z-index: $--loading-z-index;
        @include e(content, false) {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
        }
    }

    @include m(fullscreen) {
        position: fixed;
        z-index: $--loading-z-index;
    }

    @include m(mini) {
        @include e((icon, icon-svg), false) {
            width: $--loading-size-mini;
            height: $--loading-size-mini;
        }
        @include e(icon-font, false) {
            font-size: $--loading-size-mini;
        }
    }

    @include m(small) {
        @include e((icon, icon-svg), false) {
            width: $--loading-size-small;
            height: $--loading-size-small;
        }
        @include e(icon-font, false) {
            font-size: $--loading-size-small;
        }
    }

    @include m(default) {
        @include e((icon, icon-svg), false) {
            width: $--loading-size-default;
            height: $--loading-size-default;
        }
        @include e(icon-font, false) {
            font-size: $--loading-size-default;
        }
    }

    @include m(large) {
        @include e((icon, icon-svg), false) {
            width: $--loading-size-large;
            height: $--loading-size-large;
        }
        @include e(icon-font, false) {
            font-size: $--loading-size-large;
        }
    }
}

@keyframes loading-animation {
    0% {
        transform: scale(0);
    }

    100% {
        transform: scale(1);
        opacity: 0;
    }
}
