.waveform {
    padding: 0 var(--space-1);
    user-select: none;

    /* The caret's segment on the segment tier (drawn by waveform.js) */
    --color-segment-current: #b3e5ca;
}

:root[data-theme="dark"] .waveform {
    --color-segment-current: #275440;
}

.waveform-controls {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap-reverse;
    gap: var(--space-3);
    padding: 2px var(--space-1);
    margin-bottom: 2px;
    border: var(--border);
    border-radius: var(--radius-md);
}

.waveform-media-controls,
.waveform-view-controls {
    display: flex;
    align-items: center;
    gap: var(--space-1);
}

.waveform-filename {
    font-size: var(--text-xs);
    color: var(--color-text-muted);
}

.waveform-control {
    width: var(--icon-button-size);
    height: var(--icon-button-size);
    padding: 4px;
    border: none;
    border-radius: var(--radius-sm);
    background-color: transparent;
    color: var(--color-icon);
    cursor: pointer;
}

.waveform-control.speed {
    width: max-content;
    font-size: var(--text-2xs);
    font-variant-numeric: tabular-nums;
    padding: 4px var(--space-2);
}

.waveform-control:hover,
.keyboard .waveform-control:focus {
    background-color: var(--color-fill);
}

.waveform-control:active {
    background-color: var(--color-fill-strong);
}

.waveform-control > svg {
    display: block;
    fill: currentColor;
    stroke: currentColor;
    stroke-width: 7.5rem;
    stroke-linecap: square;
}

.waveform-control > svg.pause {
    stroke-width: 11.5rem;
}

.waveform-canvas {
    display: block;
    width: 100%;
    touch-action: none;
}

.waveform-view {
    position: relative;
}

.waveform-loading {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    display: grid;
    place-items: center;
    pointer-events: none;
}

/* The spinner and the percentage in one place, both centered: the percentage
   inside the ring, so neither moves when it comes, grows or goes */
.waveform-loading > * {
    grid-area: 1 / 1;
}

/* (as large from the start, with room for "100 %") */
.waveform-loading > .spinner {
    width: 2.5rem;
    height: 2.5rem;
    margin: 0;
}

/* How far the signal's computation has gone (its digits all as wide: it
   doesn't shake as it grows) */
.waveform-progress {
    font-size: var(--text-2xs);
    line-height: 1;
    color: var(--color-text-muted);
    font-variant-numeric: tabular-nums;
}

.waveform-progress:empty {
    display: none;
}

.waveform-scroll {
    overflow-x: auto;
    overflow-y: hidden;
}

.waveform-spacer {
    min-width: 100%;
    height: 1px;
}

.waveform-info {
    display: flex;
    gap: var(--space-5);
    font-size: var(--text-2xs);
    color: var(--color-text-muted);
    font-variant-numeric: tabular-nums;
    padding: 2px 0;
    min-height: 1.2rem;
}

@media (pointer: coarse) {
    .waveform-control {
        padding: var(--space-2);
    }

    .waveform-control.speed {
        padding: var(--space-2) var(--space-3);
        font-size: var(--text-sm);
    }
}

@media (max-width: 560px) {
    .waveform-filename {
        order: 1;
        width: 100%;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
    }
}