@import 'themes/default';
@import 'themes/bandit';

// For cross-browser compatibility, selectors for vender-specific
// range pseudo elements can't be combined. We're using mixins to avoid
// repeating the CSS properties.

@mixin Range__Track() {
  background-color: var(--Range__Track____bg-color);
  border-radius: var(--Range__Track____radius);
  cursor: pointer;
  height: var(--Range__Track____height);
  width: 100%;
}

@mixin Range__Thumb() {
  appearance: none;
  background-color: var(--Range__Thumb____bg-color);
  border: var(--Range__Thumb____border);
  border-radius: var(--Range__Thumb____radius);
  box-sizing: border-box;
  box-shadow: var(--Range__Thumb____shadow);
  cursor: pointer;
  height: var(--Range__Thumb____height);
  width: var(--Range__Thumb____width);
}

@mixin Range--disabled__Thumb() {
  background: var(--Range--disabled__Thumb____bg-color);
  border: var(--Range--disabled__Thumb____border);
}

@mixin Range--disabled__Track() {
  background: var(--Range--disabled__Track____bg-color);
}

@mixin Range--focused__Thumb() {
  outline: var(--focus--color) var(--focus--style) var(--focus--width);
  outline-offset: var(--focus--offset);
}

.Range {
  --focus--offset: var(--focus--width);

  align-items: center;
  appearance: none;
  background-color: transparent;
  display: flex;
  font-family: inherit;
  font-size: inherit;
  width: 100%;

  &:focus {
    outline: none;
  }

  &:focus-visible::-webkit-slider-thumb {
    @include Range--focused__Thumb();
  }

  &:focus-visible::-moz-range-thumb {
    @include Range--focused__Thumb();
  }
}

.Range::-webkit-slider-thumb {
  @include Range__Thumb();

  transform: translateY(calc(-50% + var(--Range__Track____height) / 2));
}

.Range::-moz-range-thumb {
  @include Range__Thumb();
}

.Range::-webkit-slider-runnable-track {
  @include Range__Track();
}

.Range::-moz-range-track {
  @include Range__Track();
}

.Range:disabled::-webkit-slider-thumb {
  @include Range--disabled__Thumb();
}

.Range:disabled::-moz-range-thumb {
  @include Range--disabled__Thumb();
}

.Range:disabled::-webkit-slider-runnable-track {
  @include Range--disabled__Track();
}

.Range:disabled::-moz-range-track {
  @include Range--disabled__Track();
}