@import "./components/reset.css";
@import "./components/root.css";
@import "./components/surface.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/slider.css";
@import "./components/popup.css";
@import "./components/menus.css";
@import "../../shared/css/audio/icon-state.css";

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

.media-default-skin--audio {
  --media-surface-background-color: oklch(1 0 0 / 0.5);
  --media-surface-inner-border-color: oklch(1 0 0 / 0.1);
  --media-surface-outer-border-color: oklch(0 0 0 / 0.05);
  --media-surface-shadow-color: oklch(0 0 0 / 0.15);
  --media-surface-backdrop-filter: blur(16px) saturate(1.5);
  --media-text-color: var(--media-color-primary, oklch(0 0 0));
  --media-error-dialog-transition-duration: 250ms;
  --media-error-dialog-transition-delay: 100ms;
  --media-popup-transition-duration: 100ms;
  --media-popup-transition-timing-function: ease-out;
  --media-tooltip-side-offset: 0.75rem;
  --media-tooltip-boundary-offset: 0.75rem;
  --media-popover-side-offset: 0.75rem;
  --media-popover-boundary-offset: 0.75rem;

  @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-surface-background-color: oklch(0 0 0 / 0.4);
    --media-text-color: var(--media-color-primary, oklch(1 0 0));
  }

  @media (prefers-reduced-transparency: reduce) or (prefers-contrast: more) {
    --media-surface-background-color: oklch(1 0 0);
    --media-surface-outer-border-color: oklch(0 0 0 / 0.05);
  }

  @media (prefers-color-scheme: dark) and ((prefers-reduced-transparency: reduce) or (prefers-contrast: more)) {
    --media-surface-background-color: oklch(0 0 0);
    --media-surface-inner-border-color: oklch(1 0 0 / 0.2);
    --media-surface-outer-border-color: transparent;
  }
}

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

.media-default-skin--audio .media-error__dialog {
  position: absolute;
  inset: 0;
  z-index: 20;
  display: flex;
  gap: 0.75rem;
  align-items: center;
  padding-inline: 1.25rem 0.125rem;
  color: var(--media-text-color);
  background-color: var(--media-surface-background-color);
  border-radius: calc(infinity * 1px);
  backdrop-filter: var(--media-surface-backdrop-filter);
  transition-delay: var(--media-error-dialog-transition-delay);
  transition-timing-function: ease-out;
  transition-duration: var(--media-error-dialog-transition-duration);
  transition-property: opacity, filter;
}

.media-default-skin .media-error[data-starting-style] .media-error__dialog,
.media-default-skin .media-error[data-ending-style] .media-error__dialog {
  opacity: 0;
  filter: blur(4px);
}
.media-default-skin .media-error[data-ending-style] .media-error__dialog {
  transition-delay: 0ms;
}

.media-default-skin--audio .media-error__content {
  display: flex;
  flex: 1;
  gap: 0.5rem;
  align-items: center;
}

/* ==========================================================================
  Controls
  ========================================================================== */

.media-default-skin--audio .media-controls {
  color: var(--media-text-color);
}

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

.media-default-skin--audio .media-slider__track {
  background-color: oklch(0 0 0 / 0.1);

  @media (prefers-color-scheme: dark) {
    background-color: oklch(1 0 0 / 0.2);
    box-shadow: 0 0 0 1px oklch(0 0 0 / 0.05);
  }
}