/*!
 * SPDX-License-Identifier: Apache-2.0
 *
 * The OpenSearch Contributors require contributions made to
 * this file be licensed under the Apache-2.0 license or a
 * compatible open source license.
 *
 * Modifications Copyright OpenSearch Contributors. See
 * GitHub history for details.
 */

// This wraps the range. It is needed because there is no way to do a linear gradient in ie11 for the track
.ouiHue {
  // sass-lint:disable-block no-color-literals
  background: linear-gradient(to right,
    #FF3232 0%,
    #FFF130 20%,
    #45FF30 35%,
    #28FFF0 52%,
    #282CFF 71%,
    #FF28FB 88%,
    #FF0094 100%
   );
  height: $ouiSizeL;
  margin: $ouiSizeXS 0;
  position: relative;

  // To make our fake range skinny, we add some pseudo borders to fake the height of the gradient
  &:before,
  &:after {
    content: '';
    left: 0;
    position: absolute;
    height: $ouiSizeS;
    background: $ouiColorEmptyShade;
    width: 100%;
  }

  &:after {
    bottom: 0;
  }
}

// The range itself is the same height
.ouiHue__range {
  @include ouiRangeThumbPerBrowser {
    @include ouiCustomControl($type: 'round');
    @include ouiRangeThumbStyle;
  }

  position: relative;
  height: $ouiSizeL;
  width: calc(100% + 2px); // Allow for overlap
  margin: 0 -1px; // Use ^ overlap to allow thumb to fully cover gradient ends
  appearance: none;
  background: transparent;
  z-index: 2; // Needed to place the thumb above the :after pseudo border from .ouiRange


  // Resets for the range

  // Disable linter for these very unique vendor controls
  // sass-lint:disable-block no-vendor-prefixes
  &::-webkit-slider-thumb {
    -webkit-appearance: none;
    margin-top: 0;
  }

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

  &::-ms-track {
    height: $ouiSizeL;
    background: transparent;
    border-color: transparent;
    color: transparent;
  }

  &::-moz-focus-outer {
    border: none;
  }

  &::-ms-fill-lower,
  &::-ms-fill-upper {
    background: transparent;
  }

  // Thumb has trouble with animation, so we make something similar to `@include ouiFocusRing`
  &:focus {
    @include ouiRangeThumbPerBrowser {
      box-shadow: 0 0 0 $ouiFocusRingSize $ouiFocusRingColor;
      border-color: $ouiColorPrimary;
    }

    // Focus is added to the thumb ^^ so we can remove the outer wrapping outline
    outline: none;
  }
}