/* PrJ/public/assets/css/views/settings.css */

/* --- Slider Track (Optional: Style the bar itself) --- */
#font-scale-slider {
  /* You might already have some styles from settings-view.js, 
     like width, height, background, border-radius. 
     Keep those or adjust as needed. */
  width: 90%;
  height: 15px; /* Example: Slightly thicker track */
  cursor: pointer;
  appearance: none; /* Override default look */
  background: var(--brand-gray-light); /* Light mode track */
  border-radius: var(--radius-full);
  outline: none;
}

/* Dark mode track */
html.dark #font-scale-slider {
   background: var(--brand-gray-dark); /* Darker track for dark mode */
}


/* --- Slider Thumb (The Draggable Knob) --- */

/* For Webkit browsers (Chrome, Safari, Edge) */
#font-scale-slider::-webkit-slider-thumb {
  appearance: none; /* Override default look */
  width: 1.8rem;       /* Increased width */
  height: 1.8rem;      /* Increased height */
  background: var(--brand-orange); /* Brand color */
  border-radius: 50%; /* Make it round */
  cursor: pointer;
  border: none; /* Remove default border if any */
  margin-top: -8px; /* Adjust vertical centering: -(thumbHeight - trackHeight) / 2 */
                    /* (- (24px - 8px) / 2 = -8px) */
}

/* For Firefox */
#font-scale-slider::-moz-range-thumb {
  width: 1,8rem;       /* Increased width */
  height: 1.8rem;      /* Increased height */
  background: var(--brand-orange); /* Brand color */
  border-radius: 50%; /* Make it round */
  cursor: pointer;
  border: none; /* Remove default border */
}

/* Optional: Styles for focus state (accessibility) */
#font-scale-slider:focus {
  outline: none; /* Remove default outline */
}
#font-scale-slider:focus::-webkit-slider-thumb {
  box-shadow: 0 0 0 3px rgba(240, 201, 58, 0.5); /* Example orange glow */
}
#font-scale-slider:focus::-moz-range-thumb {
   box-shadow: 0 0 0 3px rgba(240, 201, 58, 0.5); /* Example orange glow */
}