@import "colors/index";

$slider-bg: $color-bg-med;
$slider-bg-fill: $color-blue;
$slider-focus-bg: $color-text-med;
$slider-thumb: $color-text-light;

.swui-slider {

  .slider-inner {
    margin: 1em auto;
    position: relative;
    display: inline-block;
  }

  input[type='range'] {
    appearance: none;
    display: block;
    padding: 0;
    font-size: 1em;
    cursor: pointer;
    background: transparent;
    width: 100%;

    &::-webkit-slider-runnable-track {
      box-shadow: $shadow-1;
      -webkit-appearance: none;
      border: none;
      border-radius: 0.25em;
      background: $slider-bg;
    }

    &::-moz-range-track {
      box-shadow: $shadow-1;
      border: none;
      border-radius: 0.25em;
      background: $slider-bg;
    }

    &::-ms-track {
      box-shadow: $shadow-1;
      border: none;
      border-radius: 0.25em;
      background: $slider-bg;
      color: transparent;
    }

    &::-webkit-slider-thumb {
      -webkit-appearance: none;
      position: relative;
      border: none;
      width: 1em;
      height: 1em;
      border-radius: 0.5em;
      background: $slider-thumb;
      box-shadow: $shadow-3;
      z-index: 100;
    }

    &::-moz-range-thumb {
      box-shadow: $shadow-3;
      border: none;
      width: 1em;
      height: 1em;
      border-radius: 0.5em;
      cursor: ew-resize;
      background: $slider-thumb;
    }

    &::-ms-thumb {
      box-shadow: $shadow-3;
      border: none;
      width: 1em;
      height: 1em;
      border-radius: 0.5em;
      background: $slider-thumb;
    }

    &:focus {
      outline: none;
    }
  }

  &.active {
    input[type='range'] {
      &::-webkit-slider-thumb {
        background: $slider-focus-bg;
      }

      &::-moz-range-thumb {
        background: $slider-focus-bg;
      }

      &::-ms-thumb {
        background: $slider-focus-bg;
      }
    }
  }

  &.horizontal {
    input[type='range'] {
      width: 12.5em;
      height: 10px;
      appearance: slider-horizontal;

      &::-webkit-slider-thumb {
        margin: -0.25em 0;
      }
    }
  }

  &.vertical {
    input[type='range'] {
      width: 10px;
      min-height: 12.5em;
    	appearance: slider-vertical;

      &::-webkit-slider-thumb {
        margin: 0 -0.25em;
      }
    }
  }

  &.filled {
    .fill-bar {
      background-repeat: no-repeat;
      background-image: linear-gradient($slider-bg-fill, $slider-bg-fill);
      position:absolute;
      border-radius: 0.25em;
      z-index: 99;
      pointer-events: none;
    }

    &.horizontal {
      .fill-bar {
        height: 10px;
        left: 0;
        top: 50%;
        margin-top: -5px;
        width: 100%;
      }
    }

    &.vertical {
      .fill-bar {
        transform: rotate(180deg);
        width: 7px;
        height: 100%;
        left: 50%;
        top: 0;
        margin-left: -4px;
      }
    }

    input[type=range] {
      ::-moz-range-progress {
        background-color: $slider-bg-fill;
      }

      &::-ms-fill-lower {
        background: $slider-bg;
      }

      &::-ms-fill-upper {
        background: $slider-bg-fill;
      }
    }
  }

}