@use '../variables';

nw-loader {
    $base-dot-size: 8px;

    @mixin get-dots-animations($animTime) {
        $maxDots: 9;

        @keyframes moveUpAndDown {
            0% {
                transform: translateY(0px);
            }
            100% {
                transform: translateY(2em);
            }
        }

        @for $i from 1 through $maxDots {
            // Add a negative 1 second offset delay so that the
            // animation appears to already be running when instantiated
            $animDelay: -1s + ($i * 0.2s);

            &.dot-#{$i} {
                animation: moveUpAndDown $animTime $animDelay ease-in-out alternate infinite;
            }
        }
    }

    .loader {
        font-size: $base-dot-size;

        &.loader-inline {
            display: inline-block;
        }
        &:not(.loader-inline) {
            display: flex;
            justify-content: center;
            align-items: center;
            position: absolute;
            top: 0;
            right: 0;
            bottom: 0;
            left: 0;
        }
        .dots-icon-wrapper {
            display: flex;
        }
        .dots {
            display: flex;
            transform: translateY(-2em);
        }
        .dot {
            background-color: variables.get-color('gray', 3x-light);
            width: 1em;
            height: 1em;
            border-radius: 0.5em;
            margin-right: 1em;

            @include get-dots-animations(0.5s);
        }
        &.loader-color {
            .dot {
                background-color: variables.get-color('primary');
            }
        }
        &.loader-sm {
            font-size: $base-dot-size * 0.5;
        }
        &.loader-lg {
            font-size: $base-dot-size * 2;
        }
    }

    .delay-and-fade-in {
        opacity: 0;
        animation: delay-and-fade-in var(--fade-in-duration, 0) var(--fade-in-delay, 0) linear;
    }

    @keyframes delay-and-fade-in {
        from {
            opacity: 0;
        }
        to {
            opacity: 1;
        }
    }
}