@import "tailwindcss";

/* Class-based dark mode, so the app can offer System / Light / Dark rather
   than only following the OS. */
@custom-variant dark (&:where(.dark, .dark *));

@layer base {
  /* Native controls utilities cannot reach into. */
  input[type="range"] { accent-color: var(--color-sky-500); }
  select optgroup { font-style: normal; }

  /* A `display` utility otherwise beats the [hidden] attribute. */
  [hidden] { display: none !important; }

  /* It is a tool, not a document: dragging across it should not leave a
     selection, and a stray double-click should not highlight a label.
     Text fields opt back in — without a selection you cannot fix a typo,
     only retype the field. */
  html { -webkit-user-select: none; user-select: none; }
  input, textarea, [contenteditable="true"] { -webkit-user-select: text; user-select: text; }
  img, a { -webkit-user-drag: none; }

  /* No focus ring anywhere. :focus-visible has to go too — WebKit counts a
     click on a select or checkbox as "focus worth showing" and draws its own
     ring, which survives a :focus rule alone. */
  *, *::before, *::after, :focus, :focus-visible, :focus-within {
    outline: none !important;
    outline-offset: 0 !important;
    -webkit-tap-highlight-color: transparent;
  }
  ::-moz-focus-inner { border: 0 !important; }
  ::-moz-focus-outer { border: 0 !important; }
  input[type="range"]:focus, input[type="range"]:focus-visible,
  select:focus, select:focus-visible,
  button:focus, button:focus-visible,
  [contenteditable]:focus { outline: none !important; }

  /* Subtitles. Size and face come from the player's subtitle menu, written
     into a style element there — ::cue takes no custom properties. */
  video::cue {
    line-height: 1.35;
    background-color: rgb(2 6 23 / 0.55);
    color: #f8fafc;
  }

  html, body, #root { height: 100%; }
  body {
    margin: 0;
    -webkit-font-smoothing: antialiased;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
      "Helvetica Neue", "Noto Sans", Arial, sans-serif, "Apple Color Emoji",
      "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
    background: var(--color-slate-100);
    color: var(--color-slate-800);
  }
  .dark body {
    background: var(--color-slate-950);
    color: var(--color-slate-100);
  }

  /* A fullscreened element is painted over a black backdrop, so it has to
     carry its own background rather than inheriting the page's. */
  :fullscreen { background: #000; }

  /* Borders do the separating; the scrollbar should not compete. */
  ::-webkit-scrollbar { width: 10px; height: 10px; }
  ::-webkit-scrollbar-track { background: transparent; }
  ::-webkit-scrollbar-thumb {
    background: var(--color-slate-300);
    border-radius: 9999px;
    border: 3px solid transparent;
    background-clip: content-box;
  }
  .dark ::-webkit-scrollbar-thumb { background: var(--color-slate-700); background-clip: content-box; }
}
