@import "instance";
@import "effects/effects";

@include floatImg;

.awaypage {
    .loader {
        @include bc($c3, $c1);
    }
}

.loader {
    @include center-flex-column;
    @include position(fixed);
    @include whs(100%);
    @include gap(10px);
    @include bc(var(--c3), $c1);
    overflow: hidden;
    z-index: 1000;

    &.close {
        @include transition(height $t4 ease-out $t2);
        height: 0;

        .loader_ball_adidas {
            @include transition(opacity $t2);
            opacity: 0;
        }

        .text_loader {
            @include animation(fadeZoomOut $t2 ease-out $t4 both);
        }
    }

    .loader_ball_adidas {
        @include animation(floatImg $t9 linear infinite);
        @include transition(opacity $t2);
        @include whs(nth($l12, 1));
        @include position(relative, -10px);
        opacity: 1;
        fill: $c4;

        .ball_adidas {
            transform-box: fill-box;
            transform-origin: 50% 50%;
        }
    }

    .text_loader {
        @include animation(fadeZoomIn $t2 ease-out forwards);
        @include font(szrem(18), $f1, 400);
        @include text(center, uppercase);
        opacity: 0;
        color: $c4;
    }
}