@use "../../core/size";
@use "../z-index";
@use "variables" as *;

@keyframes bouncedelay {
    0%,
    80%,
    100% {
        transform: scale(0);
    }

    40% {
        transform: scale(1);
    }
}

@keyframes spinner-delay {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

.loader {
    div[tabindex] {
        outline: none;
    }

    &__wrapper {
        height: var(--f-loader-size);
        margin: var(--f-loader-margin);
        position: relative;
        width: var(--f-loader-size);
    }
    &--delay {
        animation: spinner-delay var(--f-animation-duration-short) forwards;
        animation-delay: 1s;
        opacity: 0;
    }

    &__spinner {
        height: 100%;
        position: absolute;
        width: 100%;
    }

    &__circle {
        animation: bouncedelay 1.2s infinite ease-in-out; // prevent first frame from flickering when animation starts
        animation-fill-mode: both;
        background-color: $loader-circle-color-background;
        border-radius: 100%;
        height: size.$padding-100;
        position: absolute;
        width: size.$padding-100;

        @media (forced-colors: active) {
            background-color: CanvasText;
        }
    }

    &__wait-text {
        align-items: center;
        display: flex;
        justify-content: center;
        white-space: pre-wrap;
    }

    &--overlay {
        .loader__backdrop {
            align-items: center;
            background: var(--f-background-overlay);
            display: flex;
            flex-direction: column;
            height: 100%;
            justify-content: center;
            left: 0;
            position: fixed;
            top: 0;
            width: 100%;
            z-index: z-index.$LOADER_OVERLAY_ZINDEX;
        }

        .loader__wait-text {
            color: $loader-inverted-color-text;
        }

        .loader__circle {
            background-color: $loader-circle-inverted-color-background;

            @media (forced-colors: active) {
                background-color: CanvasText;
            }
        }
    }

    .loader__spinner-1 {
        &-circle2 {
            animation-delay: -0.9s;
        }

        &-circle3 {
            animation-delay: -0.6s;
        }

        &-circle4 {
            animation-delay: -0.3s;
        }
    }

    .loader__spinner-2 {
        height: 100%;
        position: absolute;
        width: 100%;
        transform: rotateZ(45deg);

        &-circle1 {
            animation-delay: -1.1s;
        }

        &-circle2 {
            animation-delay: -0.8s;
        }

        &-circle3 {
            animation-delay: -0.5s;
        }

        &-circle4 {
            animation-delay: -0.2s;
        }
    }

    .loader__spinner-3 {
        height: 100%;
        position: absolute;
        width: 100%;
        transform: rotateZ(90deg);

        &-circle1 {
            animation-delay: -1s;
        }

        &-circle2 {
            animation-delay: -0.7s;
        }

        &-circle3 {
            animation-delay: -0.4s;
        }

        &-circle4 {
            animation-delay: -0.1s;
        }
    }

    &__circle--1 {
        left: 0;
        top: 0;
    }

    &__circle--2 {
        right: 0;
        top: 0;
    }

    &__circle--3 {
        bottom: 0;
        right: 0;
    }

    &__circle--4 {
        bottom: 0;
        left: 0;
    }

    &__delay {
        &__spinner {
            animation: spinner-delay var(--f-animation-duration-short) forwards;
            animation-delay: 1s;
            opacity: 0;
        }
    }
}