@keyframes spin {
    0% {
        transform: rotate(0deg);
        animation-timing-function: cubic-bezier(0.55, 0.2, 0.68, 0.53);
    }
    100% {
        transform: rotate(360deg);
        animation-timing-function: cubic-bezier(0.55, 0.2, 0.68, 0.53);
    }
}

.spinner {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    animation: spin 1.5s infinite;
    border-style: solid;
    border-color: transparent;
    border-top-color: currentColor;
}

.xs {
    width: var(--static-space-16);
    height: var(--static-space-16);
    padding: 2px;

    .spinner {
        border-width: 2px;
    }
}

.s {
    width: var(--static-space-20);
    height: var(--static-space-20);
    padding: 2px;

    .spinner {
        border-width: 2px;
    }
}

.m {
    width: var(--static-space-24);
    height: var(--static-space-24);
    padding: 3px;

    .spinner {
        border-width: 2px;
    }
}

.l {
    width: var(--static-space-32);
    height: var(--static-space-32);
    padding: 4px;

    .spinner {
        border-width: 3px;
    }
}

.xl {
    width: var(--static-space-40);
    height: var(--static-space-40);
    padding: 8px;

    .spinner {
        border-width: 3px;
    }
}