@layer components {
    .spinner {
        display: none;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        align-items: center;
        justify-content: center;
        z-index: 1001;
        pointer-events: none;

        /* Zobrazenie spinnera ak je v kontajneri s [busy] */

        [busy] & {
            display: flex;
        }


        & .spinner__icon {
            width: var(--space-l);
            height: var(--space-l);
            color: var(--color-border);
            fill: var(--color-primary);
            animation: spinner-spin 1s linear infinite;
        }
    }
}

@keyframes spinner-spin {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}