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

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

  .euiSaturation__lightness {
    background: linear-gradient(to right, $euiColorPickerValueRange0, $euiColorPickerValueRange1);
  }

  .euiSaturation__saturation {
    background: linear-gradient(to top, $euiColorPickerSaturationRange0, $euiColorPickerSaturationRange1);
  }

  .euiSaturation__indicator {
    position: absolute;
    height: $euiColorPickerIndicatorSize;
    width: $euiColorPickerIndicatorSize;
    border-radius: 100%;
    margin-top: $euiColorPickerIndicatorSize * -.5;
    margin-left: $euiColorPickerIndicatorSize * -.5;
    border: 1px solid $euiColorDarkestShade;

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

  &:focus {
    .euiSaturation__indicator {
      @include euiFocusRing;
    }
  }
}