@use '../colours';
@use '../accessibility';

$thumb-colour: colours.$blue;

// We need to use mixins otherwise SASS will combine the classes into a comma seperated list
// which breaks the styling in Chrome
// https://stackoverflow.com/q/67113887

@mixin -track {
  background-color: colours.$light-grey;
  border-radius: colours.$border-radius;
  height: 0.5rem;
}

@mixin -thumb {
  appearance: none;
  background-color: $thumb-colour;
  border: none;
  border-radius: colours.$border-radius;
  box-shadow: colours.$shadow;
  height: 2rem;
  margin-top: -0.75rem;
  width: 1.25rem;
}

.slider {
  appearance: none;
  background: transparent;
  border: none;
  padding: 0;

  &::-webkit-slider-runnable-track {
    @include -track;
  }

  &::-moz-range-track {
    @include -track;
  }

  &::-webkit-slider-thumb {
    @include -thumb;
  }

  &::-moz-range-thumb {
    @include -thumb;
  }

  &:disabled {
    &::-webkit-slider-thumb {
      background-color: colours.$mid-grey;
      box-shadow: none;
    }

    &::-moz-range-thumb {
      background-color: colours.$mid-grey;
      box-shadow: none;
    }
  }

  &:not(:disabled) {
    // Range inputs are always marked as read only, so we only need to overwrite the read-only selector
    // https://stackoverflow.com/a/70375659
    &:read-only {
      &:focus {
        outline: none;
      }

      &:hover::-webkit-slider-runnable-track {
        @include accessibility.hover($background-color: colours.$light-grey);
      }

      &:hover::-moz-range-track {
        @include accessibility.hover($background-color: colours.$light-grey);
      }

      &:focus::-webkit-slider-thumb {
        @include accessibility.focus($background-color: $thumb-colour);
      }

      &:focus::-moz-range-thumb {
        @include accessibility.focus($background-color: $thumb-colour);
      }

      &:hover::-webkit-slider-thumb {
        @include accessibility.hover($background-color: $thumb-colour);
      }

      &:hover::-moz-range-thumb {
        @include accessibility.hover($background-color: $thumb-colour);
      }
    }
  }
}
