@charset "UTF-8";
@use "sass:string";
@use "../../core/jkl";

$_loader-animation-properties: 2500ms linear infinite;
$_loader-left-animation-name: jkl-loader-left-spin-#{string.unique-id()};
$_loader-middle-animation-name: jkl-loader-middle-spin-#{string.unique-id()};
$_loader-right-animation-name: jkl-loader-right-spin-#{string.unique-id()};

@layer jokul.components {
    .jkl-loader {
        --jkl-loader-dot-size: var(--jkl-unit-10);
        --jkl-loader-spacing: var(--jkl-unit-20);

        display: flex;

        &--inline {
            display: inline-flex;
        }

        &__dot {
            display: block;
            transform-origin: center;
            background-color: currentColor;
            height: var(--jkl-loader-dot-size);
            width: var(--jkl-loader-dot-size);
            animation: $_loader-animation-properties;

            &--left {
                animation-name: $_loader-left-animation-name;
                margin-right: calc(var(--jkl-loader-spacing) * 0.9); // for visual balance
            }

            &--middle {
                animation-name: $_loader-middle-animation-name;
                margin-right: var(--jkl-loader-spacing);
            }

            &--right {
                animation-name: $_loader-right-animation-name;
            }

            @include jkl.forced-colors-mode {
                background-color: CanvasText;
            }
        }
    }

    @keyframes #{$_loader-left-animation-name} {
        0% {
            transform: rotate(0) scale(0);
        }

        30% {
            transform: rotate(90deg) scale(1);
        }

        70% {
            transform: rotate(180deg) scale(0);
        }

        100% {
            transform: rotate(180deg) scale(0);
        }
    }

    @keyframes #{$_loader-middle-animation-name} {
        0% {
            transform: rotate(20deg) scale(0);
        }

        10% {
            transform: rotate(20deg) scale(0);
        }

        40% {
            transform: rotate(110deg) scale(1.4);
        }

        85% {
            transform: rotate(200deg) scale(0);
        }

        100% {
            transform: rotate(200deg) scale(0);
        }
    }

    @keyframes #{$_loader-right-animation-name} {
        0% {
            transform: rotate(40deg) scale(0);
        }

        20% {
            transform: rotate(40deg) scale(0);
        }

        50% {
            transform: rotate(130deg) scale(1);
        }

        100% {
            transform: rotate(220deg) scale(0);
        }
    }
}