/*
 * Publika clips: the player (src/media/videoMarkup.ts + video-player.js) and the
 * optional upload field (video-upload.js). The frame is never cropped: the box
 * takes the clip's own ratio from --pk-video-ratio (set through CSSOM from
 * data-width/data-height) or from the <video> width/height attributes.
 */
.pk-video {
  position: relative;
  margin: 0;
  width: 100%;
  aspect-ratio: var(--pk-video-ratio, auto);
  background: #000;
  overflow: hidden;
  border-radius: var(--pk-media-radius, 0);
}

.pk-video__media,
.pk-video__frame {
  display: block;
  width: 100%;
  height: 100%;
  max-height: 100%;
  object-fit: contain;
  border: 0;
  background: #000;
}

.pk-video__media {
  height: auto;
}

.pk-video.has-ratio .pk-video__media {
  height: 100%;
}

.pk-video__frame {
  position: absolute;
  inset: 0;
}

.pk-video__controls {
  position: absolute;
  inset: auto 0 0 0;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  pointer-events: none;
}

.pk-video__controls[hidden] {
  display: none;
}

.pk-video__button {
  pointer-events: auto;
  min-width: 44px;
  min-height: 44px;
  padding: 0 14px;
  border: 1px solid rgba(255, 255, 255, .24);
  border-radius: 999px;
  background: rgba(10, 10, 12, .62);
  color: #f3efea;
  font: inherit;
  font-size: .8125rem;
  letter-spacing: .01em;
  cursor: pointer;
}

.pk-video__button:hover {
  background: rgba(10, 10, 12, .8);
}

.pk-video__button:focus-visible,
.pk-video__media:focus-visible,
.pk-video__frame:focus-visible {
  outline: 2px solid #f3efea;
  outline-offset: 2px;
}

.pk-video__button[hidden] {
  display: none;
}

.pk-video__sound[aria-pressed="true"] {
  background: rgba(243, 239, 234, .92);
  color: #0b0b0d;
}

.pk-video__duration {
  margin-left: auto;
  padding: 2px 8px;
  border-radius: 999px;
  background: rgba(10, 10, 12, .62);
  color: #f3efea;
  font-size: .75rem;
  font-variant-numeric: tabular-nums;
}

.pk-video.is-facade .pk-video__play {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  min-width: 72px;
  min-height: 72px;
}

.pk-video.is-facade .pk-video__media {
  cursor: pointer;
}

[data-pk-video-upload] {
  border: 1px dashed rgba(255, 255, 255, .24);
  border-radius: 12px;
  padding: 16px;
}

[data-pk-video-upload].is-dragging {
  border-style: solid;
  border-color: #f3efea;
}

[data-pk-video-upload] progress {
  display: block;
  width: 100%;
  margin-top: 8px;
}

[data-pk-video-upload] progress[hidden] {
  display: none;
}

@media (prefers-reduced-motion: reduce) {
  .pk-video__button {
    transition: none;
  }
}