/* Fluent UI Slider Implementation */
/* Based on Windows 11 Fluent Design specs: */
/* - Thin track (4px) with rounded ends */
/* - Small, solid circle thumb (20px target, 12px visual usually, but we use comfortable 20px) */
/* - Fill track color before thumb (requires JS or complex gradient tricks usually, but we'll stick to simple track for CSS-only MVP or use a gradient) */

/* Base Reset */
input[type="range"] {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  background: transparent;
  margin: 10px 0;
}
input[type="range"]:focus {
  outline: none;
}

/* ----------------------------------------------------------------- */
/* FLUENT THEME OVERRIDES (Scoped via :root check or just default)  */
/* We assume this file is loaded globally, so we can use selectors.  */
/* ----------------------------------------------------------------- */

/* Track - Unfilled Part */
input[type="range"]::-webkit-slider-runnable-track {
  width: 100%;
  height: 4px; /* Fluent standard is thin */
  cursor: pointer;
  background: var(--text-secondary); /* Inactive track color */
  border-radius: 2px;
  opacity: 0.3; /* Low contrast for unfilled part */
}

/* Hover Effect on Track */
input[type="range"]:hover::-webkit-slider-runnable-track {
  opacity: 0.5;
}

/* Thumb - The Handle */
input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  height: 20px; /* Interaction target size */
  width: 20px;
  border-radius: 50%;
  background: var(--accent-color); /* Brand color */
  border: 4px solid var(--modal-bg, #2c2c2c); /* Ring effect: This simulates the 'knob' separate from track if background matches modal */
  /* Note: To make it perfect Fluent (filled track vs empty track), we need JS to update background-size. 
     For CSS-only, we stick to a solid thumb on a gray track. 
     To improve 'ew' factor, we ensure the border matches the modal background to create that 'floating' ring look. */
  cursor: pointer;
  margin-top: -8px; /* Vertically center: (4px track - 20px thumb) / 2 */
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
  transition: transform 0.1s;
}

/* Hover Thumb */
input[type="range"]:hover::-webkit-slider-thumb {
  transform: scale(1.1);
}

/* Active/Dragging Thumb */
input[type="range"]:active::-webkit-slider-thumb {
  transform: scale(0.95); /* Presses in slightly */
  background: var(
    --text-primary
  ); /* Often turns white/lighter on interact in dark mode */
}

/* -------------------------------------- */
/* MATERIAL THEME OVERRIDES (Strict M3)   */
/* -------------------------------------- */
:root[data-theme-style="material"] input[type="range"] {
  height: 44px; /* Touch target size */
  margin: 0;
  accent-color: var(--accent-color); /* Use native accent color for fill */
}

/* Track matches M3 Specs: 4px height, full rounded */
:root[data-theme-style="material"]
  input[type="range"]::-webkit-slider-runnable-track {
  height: 4px;
  background: var(
    --md-sys-color-surface-container-highest,
    #e7e0ec
  ); /* Inactive track color */
  border-radius: 2px; /* 4px / 2 */
}

/* Thumb matches M3 Specs: 20px, no border, separate from track visual if detached, 
   but with accent-color fill, the browser handles the active track connection. */
:root[data-theme-style="material"] input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  background: var(--accent-color);
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: none;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3); /* Slight shadow for elevation */
  margin-top: -8px; /* Center (4px - 20px)/2 */
  transition: transform 0.1s, box-shadow 0.2s;
}

/* M3 Hover State: Thumb gets a halo (state layer) */
:root[data-theme-style="material"]
  input[type="range"]::-webkit-slider-thumb:hover {
  box-shadow: 0 0 0 8px rgba(var(--seed), 0.08);
}

/* M3 Active State: Thumb gets larger halo */
:root[data-theme-style="material"]
  input[type="range"]:active::-webkit-slider-thumb {
  transform: scale(1.1);
  box-shadow: 0 0 0 12px rgba(var(--seed), 0.12);
}

/* Note on Dark Mode Track Color */
@media (prefers-color-scheme: dark) {
  :root[data-theme-style="material"]
    input[type="range"]::-webkit-slider-runnable-track {
    background: #49454f; /* M3 Dark Surface Variant */
  }
}
:root[data-theme-style="material"][data-theme="dark"]
  input[type="range"]::-webkit-slider-runnable-track {
  background: #49454f;
}