@import "./unset";

@mixin slider(
  $width: 0.7em,
  $slider-width: 0.5em,
  $gradient: $active-gradient,
  $slider: true,
  $focusable: true,
  $radii: $radii
) {
  @include unset($rec: true);

  trough {
    transition: $transition;
    border-radius: $radii;
    border: $border;
    background-color: $widget-bg;
    min-height: $width;
    min-width: $width;

    highlight,
    progress {
      border-radius: max($radii - $border-width, 0);
      background-image: $gradient;
      min-height: $width;
      min-width: $width;
    }
  }

  slider {
    box-shadow: none;
    background-color: transparent;
    border: $border-width solid transparent;
    transition: $transition;
    border-radius: $radii;
    min-height: $width;
    min-width: $width;
    margin: -$slider-width;
  }

  &:hover {
    trough {
      background-color: $hover;
    }

    slider {
      @if $slider {
        background-color: $fg-color;
        border-color: $border-color;

        @if $drop-shadow {
          box-shadow: 0 0 3px 0 $shadow;
        }
      }
    }
  }

  &:disabled {
    highlight,
    progress {
      background-color: transparentize($fg-color, 0.4);
      background-image: none;
    }
  }

  @if $focusable {
    trough:focus {
      background-color: $hover;
      box-shadow: inset 0 0 0 $border-width $accent;

      slider {
        @if $slider {
          background-color: $fg-color;
          box-shadow: inset 0 0 0 $border-width $accent;
        }
      }
    }
  }
}