@use '../../variables' as *;

@keyframes loader {
    0% {
        transform: scale(0);
    }

    50% {
        transform: scale(1);
    }

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

$b: '.loader';

#{$b} {
    align-items: center;
    background-color: $loader-bg;
    display: flex;
    flex-direction: column;
    height: 100%;
    justify-content: center;
    left: 0;
    opacity: 0;
    position: fixed;
    top: 0;
    transform: translateX(-100%);
    transition-duration: var(--duration-leave-s);
    transition-property: opacity;
    transition-timing-function: var(--easing-acceleration);
    width: 100%;
    z-index: 1000;

    &_active {
        opacity: 1;
        transform: translateX(0);
        transition-duration: var(--duration-enter-s);
        transition-timing-function: var(--easing-deceleration);
    }

    &__dots {
        align-items: center;
        display: flex;
    }

    &__dot {
        animation-duration: 1000ms;
        animation-fill-mode: both;
        animation-iteration-count: infinite;
        animation-name: loader;
        animation-timing-function: var(--easing-standard);
        background-color: $loader-color;
        border-radius: 50%;
        height: 4px * 6;
        width: 4px * 6;

        @media (--tablet-landscape-up) {
            height: 4px * 8;
            width: 4px * 8;
        }

        &_1 {
        }

        &_2 {
            animation-delay: 100ms;
            margin: 0 4px * 2;

            @media (--tablet-landscape-up) {
                margin: 0 4px * 3;
            }
        }

        &_3 {
            animation-delay: 200ms;
        }
    }

    &__message {
        color: $loader-label-color;
        margin-left: 4px * 4;
        margin-right: 4px * 4;
        margin-top: 4px * 4;
        text-align: center;

        @include font($loader-label-mobile-font);

        @media (--tablet-landscape-up) {
            margin-left: 4px * 8;
            margin-right: 4px * 8;
            margin-top: 4px * 6;

            @include font($loader-label-desktop-font);
        }
    }
}