/* Slider */

$slider_size: 18px;
$slider_border: if($variant == 'light', rgba(black, 0.2), rgba(black, 0.45));

.slider {
  height: $slider_size + 2px;
  color: lighten($base_color, 6%);
  // slider trough
  -barlevel-height: 4px; // has to be an odd number
  -barlevel-background-color: $borders_color; //background of the trough
  -barlevel-border-width: 0;
  -barlevel-border-color: $borders_color; // trough border color
  // fill style
  -barlevel-active-background-color: $selected_bg_color; //active trough fill
  -barlevel-active-border-color: if($variant == 'light', darken($selected_bg_color, 4%), lighten($selected_bg_color, 2%)); //active trough border
  // overfill style (red in this case)
  -barlevel-overdrive-color: $destructive_color;
  -barlevel-overdrive-border-color: if($variant == 'light', darken($destructive_color, 4%), lighten($destructive_color, 2%)); //trough border when red;
  -barlevel-overdrive-separator-width: 1px;
  // slider handler
  -slider-handle-radius: $slider_size * 0.5; // half the size of the size
  -slider-handle-border-width: 1px;
  -slider-handle-border-color: $slider_border;

  .popup-menu-item.selected &,
  .popup-menu-item:hover &,
  .popup-menu-item:focus & {
    color: $selected_fg_color;
    -slider-background-color: rgba(black, 0.2);
    -slider-active-background-color: $selected_fg_color;
    -slider-handle-border-color: rgba(black, 0.2);

    // barlevels are for >= 3.29.90
    -barlevel-background-color: rgba(black, 0.2);
    -barlevel-active-background-color: $selected_fg_color;
    -barlevel-border-color: rgba(black, 0.2);
  }
}
