input[type=range].progress {
  appearance: auto;
  accent-color: var(--bulma-warning);
}
.panel-block > .field {
  width: 100%;
}
[data-playback-rate] {
  flex-basis: 5rem;
}

#play-pause,
#backward,
#forward,
[data-playback-rate] {
  min-height: 44px;
  min-width: 44px;
}

@media screen and (max-width: 768px) {
  #broadcasts-slider {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    z-index: 1000;
    max-width: 85vw;
    overflow-y: auto;
    background: var(--bulma-scheme-main);
    box-shadow: 2px 0 8px rgba(0, 0, 0, 0.2);
    transform: translateX(-100%);
    transition: transform 0.3s ease;
  }

  #broadcasts-slider.is-open {
    transform: translateX(0);
  }

  #broadcasts-backdrop {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 999;
    background: rgba(0, 0, 0, 0.5);
  }

  #broadcasts-backdrop.is-open {
    display: block;
  }
}