/* Inherit the current light, Midnight, Classic Green or Warm Amber palette. */
.lesson-media-player {
  background: var(--bs-tertiary-bg);
  color: var(--bs-body-color);
  border: 1px solid var(--bs-border-color);
  border-radius: .65rem;
  overflow: hidden;
  margin-block: .75rem;
}
.lesson-media-player > :is(audio, video) { display: block; width: 100%; max-height: 70vh; }
.lesson-media-player.is-enhanced > audio { display: none; }
.lesson-media-controls {
  display: grid;
  grid-template-columns: auto minmax(5rem, 1fr) auto auto;
  align-items: center;
  gap: .65rem;
  padding: .8rem;
  font-size: .9rem;
}
.lesson-media-button, .lesson-media-rate {
  min-height: 2.6rem;
  color: var(--bs-body-color);
  background: var(--bs-body-bg);
  border: 1px solid var(--bs-border-color);
  border-radius: .4rem;
  padding: .4rem .7rem;
  font: inherit;
}
.lesson-media-button { cursor: pointer; }
.lesson-media-button:hover { color: var(--bs-primary); border-color: currentColor; }
.lesson-media-play { color: var(--bs-primary); font-weight: 650; }
.lesson-media-time { grid-column: 2 / -1; text-align: end; font-variant-numeric: tabular-nums; }
.lesson-media-seek { grid-column: 1 / -1; width: 100%; }
.lesson-media-volume { width: 100%; min-width: 4rem; max-width: 10rem; }
.lesson-media-seek, .lesson-media-volume {
  min-height: 1.7rem;
  accent-color: var(--bs-primary);
  cursor: pointer;
}
.lesson-media-controls :disabled { opacity: .5; cursor: default; }
.lesson-media-controls :is(button, input, select):focus-visible {
  outline: 2px solid var(--bs-primary);
  outline-offset: 3px;
}
.lesson-media-speed { display: flex; align-items: center; gap: .4rem; white-space: nowrap; }
.lesson-media-status { grid-column: 1 / -1; color: var(--bs-secondary-color); margin: 0; }
.lesson-media-status:empty { display: none; }
@media (max-width: 480px) {
  .lesson-media-controls { grid-template-columns: auto minmax(0, 1fr); gap: .55rem; }
  .lesson-media-time { grid-column: 2; }
  .lesson-media-speed { grid-column: 1; }
  .lesson-media-native { justify-self: end; }
}