/* Pending indicators: every one is shown only after pending.js's delay.
   Toggled by class, not x-show: x-show reveals on a setTimeout. */

.ks-global-progress {
    position: fixed;
    inset: 0 0 auto 0;
    width: 100%;
    z-index: 10000;
    pointer-events: none;
    --md-linear-progress-track-height: 3px;
    --md-linear-progress-active-indicator-height: 3px;
    --md-linear-progress-track-color: transparent;
    --md-linear-progress-active-indicator-color: var(--md-sys-color-primary);
}

.ks-global-progress:not(.is-shown) {
    display: none;
}

/* Play buttons: the glyph gives way to a spinner in the same spot. */
.ks-play-spinner {
    display: none;
    --md-circular-progress-size: 28px;
    --md-circular-progress-active-indicator-color: currentColor;
}

[data-spinner="on"] > .ks-play-spinner {
    display: block;
}

[data-spinner="on"] > .material-symbols-outlined {
    display: none;
}

/* Busy actions: the icon, or a label with none, gains a spinner; a repeat
   tap joins the action in flight. */
.ks-busy-spinner {
    display: none;
    --md-circular-progress-size: 22px;
    --md-circular-progress-active-indicator-color: currentColor;
    vertical-align: middle;
    margin-inline-end: 0.35rem;
}

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

[data-busy="true"] > .ks-busy-spinner {
    display: inline-block;
}

[data-busy="true"] > .material-symbols-outlined,
[data-busy="true"] > md-icon {
    display: none;
}

md-icon + .ks-busy-spinner,
.material-symbols-outlined + .ks-busy-spinner {
    margin-inline-end: 0;
}

/* Loads: a view with nothing to show yet holds a spinner in its place. */
.ks-load-spinner {
    display: flex;
    justify-content: center;
    padding: 2rem 0;
    --md-circular-progress-size: 40px;
}

.ks-load-spinner:not(.is-shown) {
    display: none;
}

/* Searches: the stale results stay put and the field spins at its end. */
.ks-field-spinner {
    --md-circular-progress-size: 20px;
    pointer-events: none;
}

.ks-field-spinner:not(.is-shown) {
    display: none;
}

.ks-search-field {
    position: relative;
}

.ks-search-field > .ks-field-spinner {
    position: absolute;
    top: 50%;
    right: 0.5rem;
    transform: translateY(-50%);
}

/* Failed waits collect here until a Retry succeeds or it is dismissed. */
.ks-failure-snackbar {
    position: fixed;
    left: 50%;
    bottom: calc(var(--ks-player-height) + 1rem + env(safe-area-inset-bottom, 0px));
    transform: translateX(-50%);
    z-index: 600;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    width: max-content;
    max-width: min(calc(100vw - 32px), 34rem);
    padding: 0.4rem 0.4rem 0.4rem 1rem;
    border-radius: var(--md-sys-shape-corner-extra-small);
    background: var(--md-sys-color-on-surface);
    color: var(--md-sys-color-surface);
    font-size: 0.9rem;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.4);
}

.ks-failure-snackbar:not(.is-shown) {
    display: none;
}

body.ks-guest-mode .ks-failure-snackbar {
    bottom: calc(1rem + env(safe-area-inset-bottom, 0px));
}

.ks-failure-snackbar-text {
    flex: 1;
    min-width: 0;
}

.ks-failure-snackbar-action,
.ks-failure-snackbar-dismiss {
    border: none;
    background: transparent;
    font: inherit;
    cursor: pointer;
    border-radius: 999px;
    padding: 0.4rem 0.75rem;
}

.ks-failure-snackbar-action {
    color: var(--md-sys-color-primary-container);
    font-weight: 700;
}

.ks-failure-snackbar-dismiss {
    display: inline-flex;
    padding: 0.4rem;
    color: inherit;
}