@import '../brand.import';

setup-sliders($customSettings = {}) {

	/*
   * Default settings:
   */
  $defaultSettings = {
    width: 15em,
    height: 1em,
    radius: 0.25em,
    highlight: #E11010,
    background: #CACACA,
    thumbColour: $brandWhite,
    thumbSize: 1em
  }

  $settings = merge($defaultSettings, $customSettings);

  /*
   * Breakpoint setup:
   */
  input[type='range'] {
    display: block;
    border: solid .5em transparent;
    padding: 0;
    width: $settings.width;
    height: $settings.height*2;
    border-radius: $settings.radius;
    background: transparent;
    font-size: 1em;
    cursor: pointer;
    &,
    &::-webkit-slider-runnable-track,
    &::-webkit-slider-thumb {
      -webkit-appearance: none;
    }
    &::-ms-track {
      width: 100%;
      cursor: pointer;
      background: transparent;
      border-color: transparent;
      color: transparent;
    }
    &::-webkit-slider-runnable-track {
      track($settings.highlight, $settings.background, $settings.width, $settings.height/2);
    }
    &::-webkit-slider-thumb {
      margin-top: (($settings.height/2 - $settings.thumbSize)/2);
      thumb($settings.thumbColour, $settings.thumbSize);
    }
    &:focus {
      outline: none;
      box-shadow: 0 0 1px $settings.highlight
    }
  }

  input[type='range'].progress {
    cursor: initial;
    &::-webkit-slider-thumb {
      display: none;
    }
    &:focus {
      outline: none;
      box-shadow: none;
    }
  }

  input[type='range'].animated {
    &::-webkit-slider-runnable-track {
      transition: background-size 400ms ease-in;
    }
  }

  input[type='range'].intermediate {

  }
}

track($highlight, $bg, $width, $height) {
  width: $width;
  height: $height;
  border-radius: (@height/2);
  background: linear-gradient($highlight, $highlight) no-repeat $bg;
  background-size: 0% 100%;
}

thumb($bg, $sz = 0.75em) {
  border: none;
  width: $sz;
  height: $sz;
  border-radius: 50%;
  box-shadow: 0 0 .125em #333;
  background: $bg;
}