@use '../../scss/config.scss' as *;

.spinner {
    --color: var(--w-spinner-color, var(--w-color-primary));
    --width: var(--w-spinner-width, 2px);
    --speed: var(--w-spinner-speed, 2s);
    --size: var(--w-spinner-size, 30px);
    --dash: var(--w-spinner-dash, 8);

    @include spacing(auto-none);

    width: var(--size);
    height: var(--size);
    animation: rotate var(--speed) linear infinite;

    &.dashed .path {
        stroke-dasharray: var(--dash);
        animation: none;
    }

    .path {
        stroke: var(--color);
        stroke-width: var(--width);
        animation: dash 1.5s ease-in-out infinite;
        stroke-linecap: round;
    }
}

@keyframes rotate {
    100% {
        transform: rotate(360deg);
    }
}

@keyframes dash {
    0% {
        stroke-dasharray: 1, 200;
        stroke-dashoffset: 0;
    }
    50% {
        stroke-dasharray: 89, 200;
        stroke-dashoffset: -35;
    }
    100% {
        stroke-dasharray: 89, 200;
        stroke-dashoffset: -124;
    }
}