$color-spinner: var(--text);
$spinner-opacity: 0.75;
$spinner-speed: 0.75s;
$spacing-unit: 8px;

[aria-busy="true"] {
    cursor: progress;
}

[aria-busy="true"]:not(input, select, textarea, html)::before {
    display: inline-block;
    width: .8em;
    height: .8em;
    border: 0.1875em solid currentColor;
    border-radius: 1em;
    border-right-color: transparent;
    content: "";
    vertical-align: text-bottom;
    vertical-align: -0.125em;
    animation: spinner $spinner-speed linear infinite;
    opacity: $spinner-opacity;
    order: 2;
}

[aria-busy="true"]:not(input, select, textarea, html):not(:empty)::before {
    margin-right: $spacing-unit * 0.5;
    margin-left: 0;
    margin-inline-start: 0;
    margin-inline-end: $spacing-unit * 0.5;
}

[aria-busy="true"]:not(input, select, textarea, html):empty {
    text-align: center;
}

a[aria-busy="true"],
button[aria-busy="true"],
input[type="button"][aria-busy="true"],
input[type="reset"][aria-busy="true"],
input[type="submit"][aria-busy="true"] {
    pointer-events: none;
}

@keyframes spinner {
    to {
        transform: rotate(360deg);
    }
}


@media (prefers-reduced-motion:reduce) {

    :not([aria-busy=true]),
    :not([aria-busy=true])::after,
    :not([aria-busy=true])::before {
        background-attachment: initial !important;
        animation-duration: 1ms !important;
        animation-delay: -1ms !important;
        animation-iteration-count: 1 !important;
        scroll-behavior: auto !important;
        transition-delay: 0s !important;
        transition-duration: 0s !important
    }
}