@import "../_base.scss"

$background-height: 128px;
$background-width: 384px;
$logo-height: calc(32px * 2);
$logo-width: calc(64px * 2);
$logo-aspect-ratio: calc($logo-width / $logo-height);

.spinner {
    height: 100%;
    width: 100%;

    svg {
        $fps: 4;
        $duration_sec: 3;
        $steps: calc($duration_sec * $fps);

        height: 100%;
        width: 100%;

        fill: $color-primary-100;
        stroke: $greyscale-90;

        animation: 3s multicolor linear infinite;
        animation-timing-function: steps($steps, end);

        @keyframes multicolor {
            0% {
                fill: $color-primary-100;
            }
            33% {
                fill: $color-secondary-100;
            }
            66% {
                fill: $color-ternary-100;
            }
        }

        &.paused {
            animation-play-state: paused;
        }

    }
}