@import '../../../styles/core.scss';
// @import './browser-defaults.scss';

$pop: get(color 'blue');
$bgc: var(--bgc, white);

$track-w: 100%;
$track-h: .45em;
$track-radius: 8px;
$thumb-d: 1.25em;
$track-c: mix(get(grays, -1), get(grays, -2), 75%);
$transition: .2s ease-out;

@mixin track() {
  box-sizing: border-box;
  border: none;
  border-radius: $track-radius;
  width: $track-w;
  height: $track-h;
  background: transparent;
}

@mixin thumbFocus($shadow: rgba(get(grays, -2), .4)) {
  box-shadow:  -2px 0 0 0 transparent, 1px 1px 4px 1px $shadow;
  &:active {
    box-shadow: -2px 0 0 0 transparent, inset -1px 1px 2px 0 $shadow !important;
  }
}

@mixin thumb($shadow: rgba(get(grays, -2), .4)) {
  position: relative;
  z-index: 3;
  box-sizing: border-box;
  border: 3px solid $pop;
  width: $thumb-d;
  height: $thumb-d;
  border-radius: 50%;
  background-color: white;
  box-shadow: -2px 0 0 0 $bgc, 2px 1px 4px -1px $shadow;
  transition: $transition;
  &:hover { @include thumbFocus($shadow) }
}

$CALC: '(var(--range-val) - var(--range-min))/(var(--range-max) - var(--range-min))';

.Range {
  & {
    position: relative;
    color: $pop;
    margin-top: ms(3);
  }
  &:before, &:after {
    content: ' ';
    z-index: 2;
    position: absolute;
    pointer-events: none;
    top: $thumb-d / 2;
    height: $track-h;
    transform: translate(0, -50%);
    margin: 0;
    padding: 0;
  }
  &_marks:before {
    z-index: 2;
    left: 0;
    width: 100%;
    max-width: 100%;
    height: calc(#{$track-h} + 2px);
    margin: 0 0 0 calc(#{$thumb-d}/2.5);
    background-position: center;
    background-image: repeating-linear-gradient(
      90deg,
      $bgc,
      $bgc 3px,
      transparent 0,
      transparent
      calc(100% / var(--range-marks))
    );
  }
  &:after {
    z-index: 1;
    right: 0;
    width: 100%;
    background: $track-c;
    border-radius: $track-radius;
  }
  &-input[type='range'] {
    position: relative;
    z-index: 3;
    outline: none;

    &,
    &::-webkit-slider-thumb {
      -webkit-appearance: none
    }

    flex: 1;
    margin: 0;
    padding: 0;
    min-height: $thumb-d;
    background: transparent;
    font: inherit;
    color: inherit;

    &::-webkit-slider-runnable-track {
      @include track()
    }

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

    &::-ms-track {
      @include track
    }

    &::-webkit-slider-thumb {
      margin-top: .5*($track-h - $thumb-d);
      @include thumb;
    }

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

    &::-ms-thumb {
      margin-top: 0;
      @include thumb;
    }

    &:hover:not(:active), &:focus {
      &::-webkit-slider-thumb {
        @include thumbFocus();
      }
      &::-moz-range-thumb {
        @include thumbFocus();
      }
      &::-ms-thumb {
        @include thumbFocus();
      }
    }
  
    &::-moz-focus-outer {
      border: none;
    }

    &::-ms-tooltip {
      display: none
    }

  }
  
  &-progress {
    position: absolute;
    z-index: 2;
    width: calc((#{$CALC} * #{$track-w}) - .6px);
    max-width: 100%;
    height: $track-h;
    border-top-left-radius: $track-radius;
    border-bottom-left-radius: $track-radius;
    top: $thumb-d / 2;
    transform: translate(0, -50%);
    background: $pop;
    // background-image: linear-gradient(to right, rgba(black, .163), rgba(black, 0));
    transition: nth($transition, 1)/2 nth($transition, 2);
    pointer-events: none;
  }

  &-output {
    pointer-events: none;
    position: absolute;
    bottom: 100%;
    left: calc(#{$CALC} * #{$track-w});
    
    display: inline-flex;
    justify-content: center;
    align-items: center;
    min-height: 1rem;
    margin: 0 0 ms(0)/3;
    padding: 0;
    transform: translate(calc(#{$CALC} * -100%));

    font: inherit;
    font-size: ms(1);
    font-weight: bold;
    text-align: center;
    background: $bgc;
    box-shadow:
      #{$track-radius} 0 $bgc, -#{$track-radius} 0 $bgc,
      #{$track-radius/2} 0 $bgc, -#{$track-radius/2} 0 $bgc;
    color: currentColor;
    opacity: 1;

    transition: .3s ease-out;
  }
}