/*!
 * 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.
 */


.ouiSaturation {
  position: relative;
  width: 100%;
  padding-bottom: 100%;
  border-radius: $ouiBorderRadius / 2;
  touch-action: none; // prevent TouchMove events from scrolling page
  z-index: 3; // Required to be above the hue slider, which can overlap

  .ouiSaturation__lightness,
  .ouiSaturation__saturation {
    position: absolute;
    top: -1px; // hides a slight color inconsistency
    bottom: 0;
    left: 0;
    right: 0;
    border-radius: $ouiBorderRadius / 2;
  }

  .ouiSaturation__lightness {
    background: linear-gradient(to right, $ouiColorPickerValueRange0, $ouiColorPickerValueRange1);
  }

  .ouiSaturation__saturation {
    background: linear-gradient(to top, $ouiColorPickerSaturationRange0, $ouiColorPickerSaturationRange1);
  }

  .ouiSaturation__indicator {
    position: absolute;
    height: $ouiColorPickerIndicatorSize;
    width: $ouiColorPickerIndicatorSize;
    border-radius: 100%;
    margin-top: $ouiColorPickerIndicatorSize * -.5;
    margin-left: $ouiColorPickerIndicatorSize * -.5;
    border: 1px solid $ouiColorDarkestShade;

    &:before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      border-radius: 100%;
      border: 1px solid $ouiColorLightestShade;
    }
  }

  &:focus {
    outline: none; // Hide focus ring because of `tabindex=0` on Safari

    .ouiSaturation__indicator {
      box-shadow: 0 0 0 $ouiFocusRingSize $ouiFocusRingColor;
      border-color: $ouiColorPrimary;
    }
  }
}