/* Slider Component Styles */
/* Styled to match the design system slider component */
/* Works with dmc.Slider */

.custom-slider-ui {
  /* Base slider container */
  position: relative !important;
  display: flex !important;
  width: 100% !important;
  min-width: 100% !important;
  max-width: 100% !important;
  touch-action: none !important;
  user-select: none !important;
  align-items: center !important;
  box-sizing: border-box !important;
}

/* Track (bar) styling - filled portion */
.custom-slider-ui .mantine-Slider-bar {
  height: 8px !important; /* Default track height */
  background-color: hsl(var(--accent-brand-h, 23), var(--accent-brand-s, 90%), var(--accent-brand-l, 54%)) !important;
  border-radius: 6px !important;
}

/* Track (rail) styling - background track */
.custom-slider-ui .mantine-Slider-track {
  height: 8px !important; /* Default track height */
  background-color: hsl(var(--secondary)) !important;
  border-radius: 6px !important;
}

/* Thumb (handle) styling */
.custom-slider-ui .mantine-Slider-thumb {
  width: 20px !important; /* Default thumb size */
  height: 20px !important;
  background-color: hsl(var(--accent-brand-h, 23), var(--accent-brand-s, 90%), var(--accent-brand-l, 54%)) !important;
  border: none !important;
  border-radius: 6px !important;
  cursor: pointer !important;
  cursor: grab !important;
  touch-action: pan-x !important;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2) !important;
  transition: background-color 150ms ease !important;
  outline: none !important;
}

.custom-slider-ui .mantine-Slider-thumb:active {
  cursor: grabbing !important;
}

.custom-slider-ui .mantine-Slider-thumb:hover,
.custom-slider-ui .mantine-Slider-thumb:focus {
  outline: 2px solid hsl(var(--foreground)) !important;
  outline-offset: 2px !important;
}

/* Mark wrapper - vertically center the marks */
.custom-slider-ui .mantine-Slider-markWrapper {
  top: 50% !important;
  transform: translateY(-50%) !important;
  position: absolute !important;
}

/* Mark styling - make circles black and bigger */
.custom-slider-ui .mantine-Slider-mark {
  width: 12px !important;
  height: 12px !important;
  border-radius: 50% !important;
  background-color: black !important;
  border: 2px solid black !important;
  margin-top: 0 !important;
  position: relative !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
}

.custom-slider-ui .mantine-Slider-markLabel {
  font-size: 12px !important;
  color: hsl(var(--muted-foreground)) !important;
}

/* Active mark styling */
.custom-slider-ui .mantine-Slider-markFilled {
  background-color: black !important;
  border-color: black !important;
  width: 12px !important;
  height: 12px !important;
}

/* Disabled state */
.custom-slider-ui[data-disabled="true"],
.custom-slider-ui .mantine-Slider-thumb[data-disabled="true"] {
  cursor: not-allowed !important;
  opacity: 0.5 !important;
}

.custom-slider-ui[data-disabled="true"] .mantine-Slider-bar {
  background-color: hsl(var(--muted) / 0.3) !important;
}

.custom-slider-ui[data-disabled="true"] .mantine-Slider-track {
  background-color: hsl(var(--muted) / 0.2) !important;
}

.custom-slider-ui[data-disabled="true"] .mantine-Slider-thumb {
  cursor: not-allowed !important;
  pointer-events: none !important;
}

/* Focus visible ring */
.custom-slider-ui .mantine-Slider-thumb:focus-visible {
  outline: 2px solid hsl(var(--foreground)) !important;
  outline-offset: 2px !important;
}

/* Responsive marks for sales rank slider - show different step sizes based on screen width */
/* Marks are rendered every 5% (0, 5, 10, 15, 20, 25, 30, 35, 40, 45, 50, 55, 60, 65, 70, 75, 80, 85, 90, 95, 100) */
/* Position: 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21 */

/* Large screens (≤1200px): show steps of 10 (every 2nd mark: positions 1, 3, 5, 7, 9, 11, 13, 15, 17, 19, 21) */
/* This shows: 0, 10, 20, 30, 40, 50, 60, 70, 80, 90, 100 */
@media (max-width: 1200px) {
  .sales-rank-slider .mantine-Slider-markWrapper:not(:nth-child(2n+1)) .mantine-Slider-mark,
  .sales-rank-slider .mantine-Slider-markWrapper:not(:nth-child(2n+1)) .mantine-Slider-markLabel {
    display: none !important;
  }
}

/* Medium screens (≤992px): show steps of 20 (every 4th mark: positions 1, 5, 9, 13, 17, 21) */
/* This shows: 0, 20, 40, 60, 80, 100 */
@media (max-width: 992px) {
  .sales-rank-slider .mantine-Slider-markWrapper:not(:nth-child(4n+1)) .mantine-Slider-mark,
  .sales-rank-slider .mantine-Slider-markWrapper:not(:nth-child(4n+1)) .mantine-Slider-markLabel {
    display: none !important;
  }
}

/* Small screens (≤768px): show steps of 25 (positions 1, 6, 11, 16, 21) */
/* This shows: 0, 25, 50, 75, 100 */
@media (max-width: 768px) {
  .sales-rank-slider .mantine-Slider-markWrapper:not(:nth-child(5n+1)) .mantine-Slider-mark,
  .sales-rank-slider .mantine-Slider-markWrapper:not(:nth-child(5n+1)) .mantine-Slider-markLabel {
    display: none !important;
  }
}