/* The video player: Video.js v10's pieces, drawn by us. The veil under the controls is the brand's dark in both
   themes, since it sits on the picture and not on the page. */
.ds-video-player {
  --video-player-veil: color-mix(in oklch, var(--ds-brand-1) 72%, transparent);
  --video-player-ink: var(--ds-brand-6);

  display: block;
  block-size: 100%;
}

.ds-video-player media-i18n { display: contents; }

.ds-video-player__frame {
  container: video-player / inline-size;
  position: relative;
  display: block;
  overflow: hidden;
  inline-size: 100%;
  block-size: 100%;
  border-radius: var(--ds-radius-xl);
  background: var(--ds-brand-1);
  color: var(--video-player-ink);
}

.ds-video-player__frame:fullscreen { border-radius: 0; }

.ds-video-player__frame:focus { outline: none; }

.ds-video-player__frame:focus-visible {
  outline: 2px solid var(--ds-focus-ring);
  outline-offset: 0;
}

.ds-video-player__frame video {
  display: block;
  inline-size: 100%;
  block-size: 100%;
  object-fit: contain;
}

.ds-video-player__poster {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.ds-video-player__poster:not([data-visible]) { display: none; }

.ds-video-player__poster img {
  inline-size: 100%;
  block-size: 100%;
  object-fit: contain;
}

.ds-video-player__loading {
  position: absolute;
  inset: 0;
  display: none;
  place-items: center;
  pointer-events: none;
}

.ds-video-player__loading[data-visible] { display: grid; }

/* The cover opens on the mark and the title, in the middle: the button waits below them. */
.ds-video-player__big {
  position: absolute;
  inset-block-start: 72%;
  inset-inline-start: 50%;
  display: grid;
  place-items: center;
  inline-size: 4.5rem;
  block-size: 4.5rem;
  border-radius: var(--ds-radius-full);
  background: var(--ds-cta);
  color: var(--ds-on-cta);
  cursor: pointer;
  translate: -50% -50%;
  transition: background-color var(--ds-duration-fast) var(--ds-ease-out);
}

.ds-video-player__big:hover { background: var(--ds-cta-hover); }

.ds-video-player__big:focus-visible,
.ds-video-player__button:focus-visible {
  outline: 2px solid var(--ds-focus-ring);
  outline-offset: 0;
}

/* Only the cover has it. Paused later on, the bar's own button is enough, and the picture stays uncovered. */
.ds-video-player__big:is([data-started], :not([data-paused])) { display: none; }

.ds-video-player__controls {
  position: absolute;
  inset-inline: 0;
  inset-block-end: 0;
  display: flex;
  align-items: center;
  gap: var(--ds-space-2);
  padding: var(--ds-space-2) var(--ds-space-3);
  background: var(--video-player-veil);
  transition: opacity var(--ds-duration) var(--ds-ease-out);
}

.ds-video-player__frame:has(.ds-video-player__big:not([data-started])) .ds-video-player__controls { display: none; }

.ds-video-player__frame:not([data-controls-visible]) .ds-video-player__controls { opacity: 0; pointer-events: none; }

.ds-video-player__button {
  --hover-size: 0;

  display: grid;
  flex-shrink: 0;
  place-items: center;
  inline-size: 2.25rem;
  block-size: 2.25rem;
  border-radius: var(--ds-radius-full);
  color: var(--video-player-ink);
  cursor: pointer;
}

/* With a speed other than 1x, the gear widens into a pill that says it. */
.ds-video-player__settings:has(.ds-video-player__rate:not([hidden])) {
  display: flex;
  gap: var(--ds-space-1);
  inline-size: auto;
  padding-inline: var(--ds-space-2);
}

.ds-video-player__rate {
  font-size: var(--ds-font-size-xs);
  font-weight: var(--ds-weight-semibold);
  font-variant-numeric: tabular-nums;
}

.ds-video-player__button:hover { background: color-mix(in oklch, var(--video-player-ink) 16%, transparent); }

.ds-video-player__button[data-paused] .ds-video-player__when-playing,
.ds-video-player__button:not([data-paused]) .ds-video-player__when-paused,
.ds-video-player__button[data-volume-level="off"] .ds-video-player__when-sound,
.ds-video-player__button:not([data-volume-level="off"]) .ds-video-player__when-muted,
.ds-video-player__button[data-fullscreen] .ds-video-player__when-window,
.ds-video-player__button:not([data-fullscreen]) .ds-video-player__when-fullscreen { display: none; }

.ds-video-player__menu {
  min-inline-size: 13rem;
  margin: 0;
  padding: var(--ds-space-1);
  border: 1px solid var(--ds-border);
  border-radius: var(--ds-radius-xl);
  background: var(--ds-bg-pure);
  color: var(--ds-text);
  text-align: start;
}

.ds-video-player__menu-content[data-child-open] > .ds-video-player__menu-item { display: none; }

.ds-video-player__menu-item {
  display: flex;
  align-items: center;
  gap: var(--ds-space-2);
  min-block-size: 40px;
  padding-inline: var(--ds-space-3);
  border-radius: var(--ds-radius-full);
  font-size: var(--ds-font-size-compact);
  font-weight: var(--ds-weight-medium);
  white-space: nowrap;
  cursor: pointer;

  > svg { flex-shrink: 0; }
}

@media (any-hover: hover) {
  .ds-video-player__menu-item:hover { background: var(--ds-hover); }
}

.ds-video-player__menu-item[data-highlighted] { background: var(--ds-hover); }

.ds-video-player__menu-item:focus-visible {
  outline: 2px solid var(--ds-focus-ring);
  outline-offset: -2px;
}

.ds-video-player__menu-item[aria-checked="true"] {
  background: var(--ds-cta-soft);
  color: var(--ds-on-cta-soft);
  font-weight: var(--ds-weight-semibold);
}

.ds-video-player__menu-label { flex: 1; }

.ds-video-player__menu-value {
  color: var(--ds-text-muted);
  font-variant-numeric: tabular-nums;
}

.ds-video-player__menu-back { color: var(--ds-text-muted); }

.ds-video-player__rate-check { margin-inline-start: auto; }

.ds-video-player__menu-item[aria-checked="false"] .ds-video-player__rate-check { visibility: hidden; }

.ds-video-player__time {
  flex-shrink: 0;
  font-size: var(--ds-font-size-xs);
  font-variant-numeric: tabular-nums;
}

.ds-video-player__slider {
  position: relative;
  display: flex;
  flex: 1;
  align-items: center;
  min-inline-size: 2rem;
  block-size: 1.5rem;
  cursor: pointer;
}

.ds-video-player__track {
  position: relative;
  display: block;
  inline-size: 100%;
  block-size: 4px;
  overflow: hidden;
  border-radius: var(--ds-radius-full);
  background: color-mix(in oklch, var(--video-player-ink) 28%, transparent);
}

/* Video.js writes the slider's positions already as percentages ("21.5%"). */
.ds-video-player__buffer,
.ds-video-player__fill {
  position: absolute;
  inset-block: 0;
  inset-inline-start: 0;
  display: block;
}

.ds-video-player__buffer {
  inline-size: var(--media-slider-buffer, 0%);
  background: color-mix(in oklch, var(--video-player-ink) 40%, transparent);
}

.ds-video-player__fill {
  inline-size: var(--media-slider-fill, 0%);
  background: var(--ds-cta);
}

.ds-video-player__thumb {
  position: absolute;
  inset-inline-start: var(--media-slider-fill, 0%);
  display: block;
  inline-size: 0.875rem;
  block-size: 0.875rem;
  border-radius: var(--ds-radius-full);
  background: var(--ds-cta);
  translate: -50% 0;
}

/* A phone-wide vertical video: the bar tightens before it drops anything, so the slider keeps room to aim at. */
@container video-player (width < 24rem) {
  .ds-video-player__controls { gap: var(--ds-space-1); padding-inline: var(--ds-space-2); }
}

@container video-player (width < 20rem) {
  .ds-video-player__time[type="duration"] { display: none; }
}

@container video-player (width < 16rem) {
  .ds-video-player__time { display: none; }
}

@container video-player (width < 14rem) {
  .ds-video-player__controls media-mute-button { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .ds-video-player__big, .ds-video-player__controls { transition: none; }
}