$radius-400: var(--wds-border-radius-400, 8px);
$top-radius: #{$radius-400} #{$radius-400} 0 0;

.color-picker {
  width: var(--wds-color-picker-width, 240px);
  background: var(
    --wds-color-fill-surface-overlay,
    var(--wsr-color-D80, #FFFFFF)
  );
  border-radius: var(--wds-popover-border-radius, var(--wds-border-radius-400, 8px));
  padding: var(--wds-color-picker-padding-vertical, var(--wds-space-200, 18px))
    var(--wds-color-picker-padding-horizontal, var(--wds-space-300, 18px));
  display: flex;
  flex-direction: column;
  gap: var(--wds-space-200, 12px);

  /* doubled root class: the theme sheets re-declare the root `padding` at one
     class and load later, so a single-class `--no-padding` would lose to them */
  &#{&}--no-padding {
    padding: 0;
  }

  &,
  & * {
    box-sizing: border-box;
  }

  /* Actions */
  &__actions {
    display: flex;
    gap: var(--wds-space-200, 12px);
    justify-content: flex-end;
  }

  /* History */
  &__history {
    height: 12px;
    display: flex;

    & > div {
      width: 50%;
    }

    & > div:first-child {
      border-end-start-radius: #{$radius-400};
    }

    & > div:last-child {
      border-end-end-radius: #{$radius-400};
    }
  }

  /* Hue */
  &__hue {
    position: relative;
    touch-action: none;
    height: 12px;
    background-image: linear-gradient(
      to right,
      #f00 0%,
      #ff4d00 5%,
      #f90 10%,
      #ffe600 15%,
      #cf0 20%,
      #80ff00 25%,
      #3f0 30%,
      #00ff1a 35%,
      #0f6 40%,
      #00ffb3 45%,
      #0ff 50%,
      #06f 60%,
      #001aff 65%,
      #30f 70%,
      #8000ff 75%,
      #c0f 80%,
      #ff00e6 85%,
      #f09 90%,
      #ff004d 95%,
      #f00 100%
    );
    border-radius: 0 0 #{$radius-400} #{$radius-400};

  }

  &__hue--no-border-radius {
    --wds-border-radius-400: 0;
  }

  &__hue-handle {
    position: absolute;
    top: -2px;
    left: 0;
    margin-left: -8px;
    height: 16px;
    width: 16px;
    background-color: var(
      --wds-color-fill-standard-tertiary,
      var(--wsr-color-D80, #FFFFFF)
    );
    border: var(--wds-border-width-varied-secondary, 0px) solid
      var(--wds-color-border-standard-tertiary, transparent);
    border-radius: 50%;
    box-shadow: var(
      --wds-shadow-100,
      var(
        --wsr-shadow10,
        0 2px 1px 0 rgba(22, 45, 61, 0.48),
        0 0 3px 0 rgba(22, 45, 61, 0.12)
      )
    );
    cursor: pointer;
  }

  /* HSB */
  &__hsb {
    height: 126px;
    position: relative;
    touch-action: none;
  }

  /* the three HSB layers stack on the same box */
  &__saturation,
  &__brightness,
  &__hsb-hue {
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    border-radius: #{$top-radius};
  }

  &__saturation {
    background-image: linear-gradient(to right, #fff, rgba(255, 255, 255, 0));
  }

  &__brightness {
    background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0), #000);
  }

  &__hsb-hue {
    background-color: red;
  }

  &__hsb-handle {
    height: 12px;
    width: 12px;
    border-radius: 50%;
    top: 0;
    left: 0;
    margin-top: -6px;
    margin-left: -6px;
    position: absolute;
    border: solid 1px
      var(--wds-color-fill-dark-primary, var(--wsr-color-D10, #000624));
    background: var(--wds-color-white, var(--wsr-color-D80, #FFFFFF));
    opacity: 0.7;
    cursor: pointer;
  }

  /* Converter */
  &__converter {
    display: flex;
    flex-direction: column;
    gap: var(--wds-space-200, 12px);
    --wds-segmented-toggle-padding-vertical-medium: 0;
    --wds-segmented-toggle-padding-horizontal-medium: 0;
  }

  &__color-model-switcher {
    display: flex;
    align-items: center;
    gap: var(--wds-space-200, 12px);
  }

  &__converter &__color-model-switcher > :nth-child(1) {
    flex-grow: 1;
    height: var(--wds-button-size-medium, var(--wds-space-600, 36px));
  }

  &__color-converter-wrapper {
    display: flex;
    align-items: center;
  }

  &__color-converter-wrapper--reduce-padding {
    --wds-input-padding-horizontal-medium: 4px;
  }

  &__color-input {
    flex: 1;
    min-width: 0;
  }

  &__preview {
    width: var(--wds-swatches-swatch-size-medium, var(--wds-space-600, 36px));
    height: var(--wds-swatches-swatch-size-medium, var(--wds-space-600, 36px));
    flex: 0 0 var(--wds-swatches-swatch-size-medium, var(--wds-space-600, 36px));
    margin-inline-start: var(--wds-space-200, 12px);
    border-radius: var(
      --wds-swatches-swatch-border-radius-medium,
      var(--wds-border-radius-300, 6px)
    );
    /* stylelint-disable-next-line plugin/use-baseline -- color-mix has a literal fallback color */
    border: solid 1px
      var(
        --wds-color-border-transparent-primary,
        color-mix(in srgb, var(--wsr-color-B00, #084EBD) 24%, transparent)
      );
    /*
     * Disable native focus at (0,1,0) so FocusRing's `:focus-visible` rule
     * ((0,2,0), same bundle) always outranks it on specificity alone — setting
     * it inside `&--clickable` would tie FocusRing and, since this sheet sorts
     * after common/FocusRing in the bundle, win the tie and hide the ring.
     */
    /* stylelint-disable-next-line plugin/use-baseline */
    outline: none;
  }

  &__preview--no-color-selected {
    background: linear-gradient(
      to top left,
      rgba(214, 69, 61, 0) 0%,
      rgba(214, 69, 61, 0) calc(50% - 0.8px),
      rgba(214, 69, 61, 1) 50%,
      rgba(214, 69, 61, 0) calc(50% + 0.8px),
      rgba(214, 69, 61, 0) 100%
    );
  }

  &__preview--clickable {
    cursor: pointer;
    padding: 0;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  &__distribute {
    display: flex;
    min-width: 0;
    justify-content: space-between;
  }

  &__distributed-item {
    width: 31%;
  }
}