@import "./components/reset.css";
@import "./components/root.css";
@import "./components/media.css";
@import "./components/overlay.css";
@import "./components/buffering.css";
@import "./components/error.css";
@import "./components/controls.css";
@import "./components/time.css";
@import "./components/button.css";
@import "./components/button-group.css";
@import "./components/badge.css";
@import "./components/icons.css";
@import "./components/poster.css";
@import "./components/thumbnail.css";
@import "./components/slider.css";
@import "./components/popup.css";
@import "./components/menus.css";
@import "./components/captions.css";
@import "./components/input-feedback.css";
@import "../../shared/css/video/icon-state.css";
@import "../../shared/global/video/keyframes.css";
@import "../../shared/global/video/properties.css";

/* ==========================================================================
   Root
   ========================================================================== */

.media-minimal-skin--video {
  --media-border-color: oklch(0 0 0 / 0.15);
  --media-video-border-radius: var(--media-border-radius, 0.75rem);
  --media-controls-background-color: transparent;
  --media-controls-transition-duration: 100ms;
  --media-controls-transition-timing-function: ease-out;
  --media-error-dialog-transition-duration: 150ms;
  --media-error-dialog-transition-delay: 100ms;
  --media-error-dialog-transition-timing-function: ease-out;
  --media-popup-transition-duration: 100ms;
  --media-popup-transition-timing-function: ease-out;
  --media-tooltip-background-color: oklch(1 0 0 / 0.1);
  --media-tooltip-border-color: transparent;
  --media-tooltip-backdrop-filter: blur(16px) saturate(1.5);
  --media-tooltip-text-color: currentColor;
  --media-tooltip-side-offset: 0.5rem;
  --media-tooltip-boundary-offset: 0.5rem;
  --media-popover-background-color: oklch(1 0 0 / 0.1);
  --media-popover-border-color: transparent;
  --media-popover-backdrop-filter: blur(16px) saturate(1.5);
  --media-popover-side-offset: 1.5rem;
  --media-popover-boundary-offset: 0.5rem;
  overflow: clip;
  background: oklch(0 0 0);

  @media (prefers-reduced-motion: reduce) {
    --media-error-dialog-transition-duration: 50ms;
    --media-error-dialog-transition-delay: 0ms;
    --media-popup-transition-duration: 0ms;
  }

  @media (prefers-color-scheme: dark) {
    --media-border-color: oklch(1 0 0 / 0.15);
  }

  @media (prefers-reduced-transparency: reduce) or (prefers-contrast: more) {
    --media-controls-background-color: oklch(0 0 0);
    --media-tooltip-background-color: oklch(0 0 0);
  }

  @container media-root (width > 42rem) {
    & > * {
      --media-popover-side-offset: 0.5rem;
    }
  }

  &:has(.media-controls:not([data-visible])) {
    /* Slight delay to hide controls on non-touch devices after interaction */
    @media (pointer: fine) {
      --media-controls-transition-duration: 300ms;
    }
    @media (pointer: coarse) {
      --media-controls-transition-duration: 150ms;
    }
    @media (prefers-reduced-motion: reduce) {
      --media-controls-transition-duration: 50ms;
    }
  }

  /* Inner border ring */
  &::after {
    position: absolute;
    inset: 0;
    z-index: 10;
    pointer-events: none;
    content: "";
    border-radius: inherit;
    box-shadow: inset 0 0 0 1px var(--media-border-color);
  }

  /* Fullscreen */
  &:fullscreen {
    --media-border-radius: 0;
  }
}

/* ==========================================================================
   Error Dialog
   ========================================================================== */

.media-minimal-skin--video .media-error {
  position: absolute;
  inset: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  outline: none;
}

.media-minimal-skin--video .media-error__dialog {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  max-width: 16rem;
  padding: 1rem;
  color: oklch(1 0 0);
  text-shadow: 0 1px 0 oklch(0 0 0 / 0.5);
  pointer-events: auto;
  transition-delay: var(--media-error-dialog-transition-delay);
  transition-timing-function: var(--media-error-dialog-transition-timing-function);
  transition-duration: var(--media-error-dialog-transition-duration);
  transition-property: opacity, scale;
}

.media-minimal-skin--video .media-error[data-starting-style] .media-error__dialog,
.media-minimal-skin--video .media-error[data-ending-style] .media-error__dialog {
  opacity: 0;
  scale: 0.5;
}
.media-minimal-skin--video .media-error[data-ending-style] .media-error__dialog {
  transition-delay: 0ms;
}

.media-minimal-skin--video .media-error__content {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: 0.375rem 0;
}

.media-minimal-skin--video .media-error__title {
  font-size: 1.125rem;
}

.media-minimal-skin--video .media-error[data-open] ~ .media-controls {
  display: none;
}

/* ==========================================================================
  Controls (hide/show behavior)
  ========================================================================== */

.media-minimal-skin--video .media-controls {
  position: absolute;
  inset-inline: 0.25rem;
  bottom: 0.25rem;
  z-index: 10;
  flex-wrap: wrap;
  column-gap: 0.5rem;
  padding: 0.25rem;
  color: oklch(1 0 0);
  border-radius: 0.75rem;
  transition-timing-function: var(--media-controls-transition-timing-function);
  transition-duration: var(--media-controls-transition-duration);

  @media (pointer: fine) {
    transition-property: translate, filter, opacity;
    will-change: translate, filter, opacity;
  }

  @media (pointer: coarse) {
    transition-property: translate, opacity;
    will-change: translate, opacity;
  }

  &:not([data-visible]) {
    pointer-events: none;
    opacity: 0;

    @media (pointer: fine) and (prefers-reduced-motion: no-preference) {
      filter: blur(8px);
    }

    @media (prefers-reduced-motion: no-preference) {
      translate: 0 100%;
    }
  }

  & .media-time-controls {
    flex: 0 0 100%;
    order: -1;
    padding-inline: 0.625rem;
  }

  & .media-button-group:first-child {
    flex: 1;
    text-align: left;
  }

  & .media-button-group:last-child {
    flex: 1;
    justify-content: end;
  }

  @container media-root (width > 42rem) {
    inset-inline: 0.5rem;
    bottom: 0.5rem;
    flex-wrap: nowrap;

    & .media-time-controls {
      flex: 1;
      order: unset;
    }

    & .media-button-group:first-child,
    & .media-button-group:last-child {
      flex: 0 0 auto;
    }
  }
}

/* Hide cursor when controls are hidden */
.media-minimal-skin--video:has(.media-controls:not([data-visible])) {
  cursor: none;
}

/* ==========================================================================
   Sliders
   ========================================================================== */

.media-minimal-skin--video .media-slider__track {
  box-shadow: 0 0 0 1px oklch(0 0 0 / 0.05);
}

/* ==========================================================================
   Popups & Animations
   ========================================================================== */

.media-minimal-skin--video .media-popover--volume {
  padding-block: 0.75rem;
  background: transparent;
  border-radius: 0.75rem;

  @media (prefers-reduced-transparency: reduce) or (prefers-contrast: more) {
    background: var(--media-controls-background-color);
  }

  @container media-root (width > 42rem) {
    & > * {
      --media-popover-side-offset: 0rem;
    }
  }
}

/* ==========================================================================
   Slider preview
   ========================================================================== */

.media-minimal-skin--video .media-slider__thumbnail {
  --media-slider-thumbnail-max-width: 11rem;
  --media-slider-thumbnail-padding: -0.5rem;
  /**
    Inset is the difference between the container width and the slider (100%) width.
    We only add to the end as we render the time there.
  */
  --media-slider-thumbnail-inset: calc(100cqi - 100%);

  position: absolute;
  bottom: 100%;
  left: clamp(
    calc(var(--media-slider-thumbnail-max-width) / 2 + var(--media-slider-thumbnail-padding)),
    var(--media-slider-pointer),
    calc(
      100% -
      var(--media-slider-thumbnail-max-width) /
      2 -
      var(--media-slider-thumbnail-padding) +
      var(--media-slider-thumbnail-inset)
    )
  );
  opacity: 0;
  filter: blur(8px);
  transform-origin: bottom;
  scale: 0.8;
  translate: -50%;
  transition-timing-function: ease-out;
  transition-duration: 150ms;
  transition-property: scale, opacity, filter;

  @container media-root (width > 42rem) {
    left: var(--media-slider-pointer);
  }

  & .media-thumbnail__image-wrapper {
    position: relative;

    &::after {
      position: absolute;
      inset: 0;
      content: "";
      border-radius: inherit;
      box-shadow:
        0 0 0 1px oklch(0 0 0 / 0.05),
        0 1px 3px 0 oklch(0 0 0 / 0.2),
        0 1px 2px -1px oklch(0 0 0 / 0.2);
    }
  }

  & .media-thumbnail__image {
    max-width: var(--media-slider-thumbnail-max-width);
  }

  &:has(.media-thumbnail__image[data-loading]) {
    max-height: 6rem;
  }
}
.media-minimal-skin--video .media-slider[data-pointing] .media-slider__thumbnail:has([role="img"]:not([data-hidden])) {
  opacity: 1;
  filter: blur(0);
  scale: 1;
}
.media-minimal-skin--video
  .media-slider__thumbnail:has([role="img"]:not([data-hidden]))
  + .media-slider__preview
  .media-slider__value {
  display: none;
}