/* Slider */

$slider_size: $scalable_icon_size;
$slider_size: to_em(18px);; // Yaru change: larger slider cause to border in light theme

.slider {
  // slider trough
  -barlevel-height: 4px;
  -barlevel-background-color: transparentize($fg_color, 0.8); //background of the trough
  -barlevel-border-width: 2px;
  -barlevel-border-color: transparent; // trough border color
  // fill style
  -barlevel-active-background-color: $progress_bg_color; // Yaru change: we detached progress from selected
  -barlevel-active-border-color: transparent;
  // overfill style (red in this case)
  -barlevel-overdrive-color: $destructive_color;
  -barlevel-overdrive-border-color: transparent; //trough border when red;
  -barlevel-overdrive-separator-width:1px;
  // slider handler
  // -slider-handle-border-width: 0;
  // -slider-handle-border-color: transparent; // because 0 width
  -slider-handle-border-width: 1px; // Yaru change: add border
  -slider-handle-border-color: if($variant=='light', darken($alt_borders_color, 3%), transparent); // because 0 width - Yaru change: the handle border needs to be darker for the light theme
  -slider-handle-radius: $slider_size * 0.5; // half the size of the size

  color: darken(white, 1%); // Yaru change: adapt knob to gtk
  height: $slider_size + to_em(2px); // Yaru change: increase height due to border

    // hc style
    @if $contrast == 'high' {
      -barlevel-background-color: transparentize($fg_color, 0.6);
    }
}
