/* Dotted spinner shown on a button while its action is in progress. */
button.is-busy,
input.is-busy,
a.is-busy,
[role="button"].is-busy {
    position: relative !important;
    cursor: wait !important;
    overflow: visible !important;
}

button.is-busy,
a.is-busy,
.dark button.is-busy,
.dark a.is-busy,
.dark .bg-primary-container.is-busy,
.dark .bg-primary-container.is-busy span,
button.is-busy span,
a.is-busy span {
    color: transparent !important;
}

button.is-busy > :not(.btn-dots),
a.is-busy > :not(.btn-dots),
[role="button"].is-busy > :not(.btn-dots) {
    visibility: hidden !important;
}

input.is-busy {
    color: transparent !important;
    text-shadow: none !important;
}

.btn-dots {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 1.05rem;
    height: 1.05rem;
    margin: 0;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    border: 2px dotted #cfb14e;
    animation: zebs-dot-spin 0.75s linear infinite;
    pointer-events: none;
    visibility: visible !important;
    color: #cfb14e !important;
    z-index: 2;
}

.btn-dots.on-fill {
    border-color: #3f2e00;
    color: #3f2e00 !important;
}

.dark .btn-dots {
    border-color: #f5f5f7;
    color: #f5f5f7 !important;
}

.dark .btn-dots.on-fill {
    border-color: #3f2e00;
    color: #3f2e00 !important;
}

@keyframes zebs-dot-spin {
    to { transform: translate(-50%, -50%) rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
    .btn-dots { animation: none; }
}