/* Slider */

@use "../../../../theme-color";
@use "../../gnome-shell";

$handle-size: 12px;

.slider {
  height: 20px;

  @if gnome-shell.$version >= 3.30 {
    // slider trough
    -barlevel-height: 2px;
    -barlevel-border-width: 0;
    -barlevel-border-color: transparent;
    -barlevel-background-color: theme-color.stroke(theme-color.$on-surface);
    // fill style
    -barlevel-active-border-color: transparent;
    -barlevel-active-background-color: theme-color.$primary;
    // overfill style
    -barlevel-overdrive-color: theme-color.$error;
    -barlevel-overdrive-border-color: transparent;
    -barlevel-overdrive-separator-width: 2px;
  } @else {
    // slider trough
    -slider-height: 2px;
    -slider-border-width: 0;
    -slider-border-color: transparent;
    -slider-background-color: theme-color.stroke(theme-color.$on-surface);
    // fill style
    -slider-active-border-color: transparent;
    -slider-active-background-color: theme-color.$primary;
  }

  // slider handle
  -slider-handle-radius: $handle-size / 2;
  -slider-handle-border-width: 0;
  -slider-handle-border-color: transparent;

  &,
  &:hover,
  &:active {
    color: theme-color.$primary;
  }
}