.htmx-indicator {
    opacity: 0;
    transition: opacity 500 ease-in;
}
.htmx-request .htmx-indicator, .htmx-request.htmx-indicator {
    opacity: 1;
}

.spin {
    animation: spin 2s infinite;
    transform-origin: center;
}

/* Rotate the spinner */
@keyframes spin {
    0%   { transform: rotate(  0deg); }
    50%  { transform: rotate(180deg); }
    60%  { transform: rotate(190deg); }
    100% { transform: rotate(360deg); }
}

.fs-7  { font-size: 0.875rem !important; }
.fs-8  { font-size: 0.750rem !important; }
.fs-9  { font-size: 0.625rem !important; }
.fs-10 { font-size: 0.500rem !important; }

.bg-darker { background-color: rgba(0, 0, 0, 0.15) }

.btn-ghost-primary:hover {
    color: var(--bs-primary);
    background-color: rgba(var(--bs-primary-rgb), 0.1);
}
.btn-ghost-light:hover {
    color: var(--bs-light);
    background-color: rgba(var(--bs-light-rgb), 0.1);
}

[class*="btn-ghost"].disabled {
    border: none;
}

.flex-1 { flex: 1 !important; }

.hoverable {
    /*&:hover { background-color: rgba(255,255,255, 0.1); }*/
    & [class*="btn-ghost"] { display: none; }
    &:hover [class*="btn-ghost"] { display: block !important; }
}

.cover {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
}

.karaoke-font-preview {
    --karaoke-preview-size: 32px;
    min-height: 116px;
    padding: 18px 12px;
    background:
        linear-gradient(rgba(0, 0, 0, 0.46), rgba(0, 0, 0, 0.72)),
        radial-gradient(circle at 50% 25%, #46515d, #151719 72%);
    text-shadow:
        -2px -2px 0 #101010,
        2px -2px 0 #101010,
        -2px 2px 0 #101010,
        2px 2px 0 #101010;
}

.karaoke-font-preview-current {
    color: #ffd700;
    font-size: var(--karaoke-preview-size);
    font-weight: 700;
    line-height: 1.15;
}

.karaoke-font-preview-previous {
    display: none;
    margin-bottom: 6px;
    color: #b8b8b8;
    font-size: calc(var(--karaoke-preview-size) * .72);
    line-height: 1.1;
}

.karaoke-font-preview-next {
    margin-top: 8px;
    color: #e8e8e8;
    font-size: calc(var(--karaoke-preview-size) * .8125);
    line-height: 1.15;
}

.karaoke-font-preview[data-layout="cascade"] {
    min-height: 152px;
}

.karaoke-font-preview[data-layout="cascade"] .karaoke-font-preview-previous {
    display: block;
}

@media (min-width: 576px) {
    .overflow-sm-y-auto { overflow-y: auto; }
}