.spinner {
    --palette-background-bold: currentColor;
    --size-icon: 1em;

    @apply align-middle border-2 border-solid h-[var(--size-icon)] inline-block
    rounded-full select-none w-[var(--size-icon)];

    border-color: currentColor transparent;
    color: var(--palette-background-bold);

    animation: spin 1s linear infinite;

    transition: color 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);

    &[data-palette] {
        color: rgb(var(--palette-background-bold));
    }

    &[data-variation="dual"] {
        @apply border-double;

        &:is([data-size="medium"], [data-size="large"], [data-size="huge"]) {
            border-width: 0.375em;
        }

        border-width: 0.25em;
    }
}