@import '../../../../styles/common';

$stacking-order: (
  output: 10,
  input: 20,
);

$range-wrapper: rem(28px);
$range-track-height: rem(4px);
$range-thumb-size: rem(24px);

$range-thumb-border-error: rem(2px) solid color('red');

$range-thumb-shadow: (0 0 0 rem(1px) rgba(black, 0.2), shadow(faint));
$range-thumb-shadow-hover: (0 0 0 rem(1px) rgba(black, 0.4), shadow(faint));
$range-thumb-shadow-error: 0 0 0 rem(1px) color('red');

.Wrapper {
  position: relative;
  width: 100%;
  display: flex;
  align-items: center;
}

.TrackWrapper {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
  min-height: $range-wrapper;
  cursor: pointer;

  &.disabled {
    opacity: 0.8;
    cursor: not-allowed;
  }
}

.Track {
  position: absolute;
  width: 100%;
  height: $range-track-height;
  border-radius: $range-thumb-size;

  --unselected-range: #{color('sky', 'dark')};
  --selected-range: #{color('indigo')};
  --gradient-colors: var(--unselected-range, transparent) 0%,
    var(--unselected-range, transparent)
      var(--Polaris-RangeSlider-progress-lower),
    var(--selected-range, transparent) var(--Polaris-RangeSlider-progress-lower),
    var(--selected-range, transparent) var(--Polaris-RangeSlider-progress-upper),
    var(--unselected-range, transparent)
      var(--Polaris-RangeSlider-progress-upper),
    var(--unselected-range, transparent) 100%;
  background-image: linear-gradient(to right, var(--gradient-colors));

  .error & {
    --selected-range: #{color('red')};
    --gradient-colors: var(--unselected-range, transparent) 0%,
      var(--unselected-range, transparent)
        var(--Polaris-RangeSlider-progress-lower),
      var(--selected-range, transparent)
        var(--Polaris-RangeSlider-progress-lower),
      var(--selected-range, transparent)
        var(--Polaris-RangeSlider-progress-upper),
      var(--unselected-range, transparent)
        var(--Polaris-RangeSlider-progress-upper),
      var(--unselected-range, transparent) 100%;
    background-image: linear-gradient(to right, var(--gradient-colors));
  }

  .disabled & {
    background-image: none;
    background: color('sky', 'dark');
  }
}

.Thumbs {
  position: absolute;
  z-index: z-index('input', $stacking-order);
  width: $range-thumb-size;
  height: $range-thumb-size;
  border-radius: 50%;
  border: border-width() solid color('sky', 'lighter');
  box-shadow: $range-thumb-shadow;
  background: linear-gradient(color('sky', 'lighter'), color('sky', 'light'));
  -webkit-tap-highlight-color: transparent;

  // stylelint-disable-next-line value-no-vendor-prefix
  cursor: -webkit-grab;

  &.disabled {
    cursor: not-allowed;
    border-color: color('sky', 'dark');
  }

  .error & {
    border-color: color('red');
    box-shadow: $range-thumb-shadow-error;

    &:hover,
    &:focus {
      border-color: color('red');
      box-shadow: $range-thumb-shadow-error;
    }
  }

  &:hover {
    background: linear-gradient(color('sky', 'lighter'), color('sky', 'light'));
    box-shadow: $range-thumb-shadow-hover;
  }
}

$range-output-size: rem(32px);
$range-output-spacing: rem(16px);

.Prefix {
  flex: 0 0 auto;
  margin-right: spacing(tight);
}

.Suffix {
  flex: 0 0 auto;
  margin-left: spacing(tight);
}

.Output {
  position: absolute;
  z-index: z-index('output', $stacking-order);
  bottom: $range-thumb-size;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition-property: opacity, visibility;
  transition-duration: duration();
  transition-timing-function: easing();
  transform: translateX(calc(-50% + #{$range-thumb-size / 2}));

  .Thumbs:hover + &,
  .Thumbs:active + &,
  .Thumbs:focus + & {
    opacity: 1;
    visibility: visible;
  }
}

.OutputBubble {
  position: relative;
  display: flex;
  padding: 0 spacing(tight);
  min-width: $range-output-size;
  height: $range-output-size;
  background-color: color('ink');
  border-radius: border-radius();
  transition-property: transform;
  transition-duration: duration();
  transition-timing-function: easing();

  // stylelint-disable selector-max-specificity
  .Thumbs:hover + .Output &,
  .Thumbs:active + .Output &,
  .Thumbs:focus + .Output & {
    transform: translateY(-$range-output-spacing);

    @include page-content-when-not-partially-condensed {
      transform: translateY(-($range-output-spacing / 2));
    }
  }
  // stylelint-enable selector-max-specificity
}

.OutputText {
  @include text-style-subheading;
  display: block;
  flex: 1 1 auto;
  margin: auto;
  text-align: center;
  color: color('white');
}
