/* Root container */
.audio-switcher {
    display: flex;
    flex-direction: row;
    user-select: none;
    height: auto;
    margin-top: 0;
    margin-left: calc(var(--std-padding) / 2);
    margin-right: calc(var(--std-padding) / 2);
    margin-bottom: calc(var(--std-padding) / 2);
    gap: calc(var(--std-padding) / 2);

}

/* Make the two main sections split the height */
.audio-switcher>.controls,
.audio-switcher>.progress-container {
    flex: 1;
    width: 100%;
    height: 40px;
}

/* Controls wrapper (make gap work by making it a flex container) */
.controls {
    display: flex;
    width: 100%;
}

/* Row of buttons */
.audio-switcher .button-row {
    display: flex;
    justify-content: space-between;
    gap: calc(var(--std-padding) / 2);
    width: 100%;
    height: 100%;
}

/* Shared button styles */
.audio-switcher .play-pause,
.audio-switcher .audio-switcher__btn {
    flex: 1 1 0;
    background: var(--clr-dark);
    color: var(--clr-suplight);
    border: none;
    border-radius: calc(var(--bord-rad) / 2);
    font-size: 24px;
    text-align: center;
    cursor: pointer;
}

/* Hover effect */
.audio-switcher .play-pause:hover {
    background-color: var(--clr-light);
    color: var(--clr-bg);
}

/* Progress bar container */
.progress-container {
    background: var(--clr-dark);
    border-radius: calc(var(--bord-rad) / 2);
    cursor: pointer;
    overflow: hidden;
}

/* Actual progress */
.audio-switcher .progress {
    background: var(--clr-suplight);
    border-radius: inherit;
    height: 100%;
    width: 0%;
}

/* Toggle button states */
.audio-switcher .audio-switcher__btn.before {
    color: var(--clr-acc-2);
}

.audio-switcher .audio-switcher__btn.after {
    color: var(--clr-acc-1);
}

.audio-switcher .audio-switcher__btn.before:hover,
.audio-switcher .audio-switcher__btn.after:hover {
    color: var(--clr-light);
}