@layer components {
button[data-button-loading] {
    position: relative;
    color: transparent;
    cursor: wait;
}

button[data-button-loading] > * {
    visibility: hidden;
}

button[data-button-loading]::after {
    position: absolute;
    top: 50%;
    left: 50%;
    box-sizing: border-box;
    width: 18px;
    height: 18px;
    margin: -9px 0 0 -9px;
    border: 2px solid transparent;
    border-top-color: var(--button-loading-color, var(--color-accent-contrast));
    border-right-color: var(--button-loading-color, var(--color-accent-contrast));
    border-radius: 50%;
    content: "";
    animation: button-loading-spin 0.7s linear infinite;
}

@keyframes button-loading-spin {
    to {
        transform: rotate(360deg);
    }
}

@media (prefers-reduced-motion: reduce) {
    button[data-button-loading]::after {
        animation: none;
    }
}

}