@import 'tailwindcss';

@source '../../internal/**/*.templ';

:root {
  --bg: #111419;
  --panel: #181d24;
  --panel-soft: #1f2530;
  --header: #1a2029;
  --text: #e7eaf0;
  --text-muted: #b8c0cd;
  --text-faint: #8b97a8;
  --accent: #cad4e4;
  --danger: #d17f88;
  --surface-search: rgba(10, 13, 18, 0.3);
  --surface-search-focus-border: rgba(202, 212, 228, 0.24);
  --surface-thumb: #141920;
  --surface-input: #151b23;
  --surface-input-focus: #1c2531;
  --surface-tab-hover: #2a3340;
  --surface-tab-active: #323d4c;
  --surface-select: #1a212b;
  --surface-search-view-all: #151b23;
  --text-on-accent: #111419;
  --overlay-subtle: rgba(0, 0, 0, 0.45);
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --poster-max-height: 360px;
  --font: 'Verdana', 'Tahoma', 'Segoe UI', sans-serif;
}

.volume-range {
  writing-mode: vertical-lr;
  direction: rtl;
  accent-color: #ffffff;
}

.volume-range::-webkit-slider-runnable-track {
  width: 4px;
  border-radius: 9999px;
  background: rgba(255, 255, 255, 0.55);
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.45);
}

.volume-range::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 14px;
  height: 14px;
  border-radius: 9999px;
  background: #ffffff;
  border: 0;
  margin-left: -5px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.55);
}

.volume-range::-moz-range-track {
  width: 4px;
  border-radius: 9999px;
  background: rgba(255, 255, 255, 0.55);
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.45);
}

.volume-range::-moz-range-thumb {
  width: 14px;
  height: 14px;
  border-radius: 9999px;
  background: #ffffff;
  border: 0;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.55);
}

.volume-wrap::before {
  content: '';
  position: absolute;
  left: -10px;
  right: -10px;
  bottom: 100%;
  height: 130px;
}

.volume-wrap:hover .volume-panel,
.volume-wrap:focus-within .volume-panel,
.volume-panel:hover,
.volume-panel:focus-within {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.volume-wrap:hover .volume-underline,
.volume-wrap:focus-within .volume-underline {
  opacity: 1;
}

.watch-episodes-scroll {
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.watch-episodes-scroll::-webkit-scrollbar {
  display: none;
}