/*
 * Copyright (c) 2026, Salesforce, Inc.,
 * All rights reserved.
 * For full license text, see the LICENSE.txt file
 */

/**
 * @summary Fully featured color picker, with swatches and a custom color config
 */

.slds-color-picker {
  position: relative;
}

.slds-color-picker .slds-form-error {
  padding-block-start: var(--slds-g-spacing-2);
  color: var(--slds-g-color-error-base-40, var(--slds-g-color-error-1));
  font-size: var(--slds-g-font-scale-neg-1);
}

/**
 * @summary Label for summary input
 */

.slds-color-picker__summary-label {
  display: block;
}

/**
 * @summary Button that toggles the Color Picker Selector
 */

.slds-color-picker__summary-button {
  vertical-align: top;
  padding-block: 0.3rem;
  padding-inline: var(--slds-g-spacing-2);
  line-height: 1;
  background: var(--slds-g-color-neutral-base-100, var(--slds-g-color-surface-container-1));
  margin-inline-end: var(--slds-g-spacing-1);
  border-radius: var(--slds-s-input-radius-border);

  &:focus-visible {
    border-color: transparent;
  }
}

/**
 * @summary Input field for summary UI
 */
.slds-color-picker__summary-input {
  display: inline-block;
}

.slds-color-picker__summary-input .slds-input {
  width: 6rem;
}

/**
 * @summary The selector subcomponent. Extends upon a .slds-popover
 */
.slds-color-picker__selector {
  margin-block-start: var(--slds-g-spacing-2);
}

.slds-popover__footer {
  border-block-start: var(--slds-g-sizing-border-1) solid
    var(--slds-s-container-color-border, var(--slds-g-color-neutral-base-90));
}

.slds-color-picker__selector.slds-popover {
  width: 14rem;
  box-shadow: var(--slds-g-shadow-2);
}

.slds-color-picker__selector .slds-tabs_default__content {
  padding-block: var(--slds-g-spacing-2);
  padding-inline: 0;
}

/**
 * @summary Swatch container
 */
.slds-color-picker__swatches {
  font-size: 0;
}

.slds-color-picker__swatches.slds-swatch {
  cursor: pointer;
}

/**
 * @summary Color Picker swatch
 */
.slds-color-picker__swatch {
  display: inline-block;
  margin: var(--slds-g-spacing-1);
}

.slds-color-picker__swatch-trigger {
  display: inline-block;
}

.slds-color-picker__swatch-trigger:focus-visible,
.slds-color-picker__swatch-trigger:active {
  outline: none;
  box-shadow: var(--slds-g-shadow-outset-focus-1);
  border-radius: var(--slds-g-radius-border-2);
}

/**
 * @summary Custom picker selection container
 */
.slds-color-picker__custom {
  padding-block: var(--slds-g-spacing-1);
  padding-inline: 0;
}

/**
 * @summary Custom picker range element
 */
.slds-color-picker__custom-range {
  position: relative;
  margin-block-end: var(--slds-g-spacing-1);
  height: var(--slds-g-sizing-12);
  border: var(--slds-g-sizing-border-1) solid var(--slds-g-color-border-1);
  border-radius: var(--slds-g-radius-border-2);
  overflow: hidden;
}

.slds-color-picker__custom-range::before {
  content: '';
  position: absolute;
  top: 0;
  inset-inline-end: 0;
  bottom: 0;
  inset-inline-start: 0;
  background:
    linear-gradient(to top, rgb(0, 0, 0, 1), rgb(0, 0, 0, 0.9) 1%, transparent 99%),
    linear-gradient(to right, rgb(255, 255, 255, 1) 1%, transparent);
}

/**
 * @summary
 */
.slds-color-picker__range-indicator {
  --_slds-c-color-picker-half-spacing: calc(0.75rem * 0.5);

  transform: translate3d(
    var(--_slds-c-color-picker-half-spacing),
    var(--_slds-c-color-picker-half-spacing),
    0
  );
  cursor: pointer;
  position: absolute;
  height: var(--slds-g-sizing-4);
  width: var(--slds-g-sizing-4);
  border: var(--slds-g-sizing-border-2) solid var(--slds-g-color-surface-container-1);
  border-radius: var(--slds-g-radius-border-circle);
  box-shadow:
    0 2px 4px 4px rgb(0, 0, 0, 0.16),
    inset 0 2px 4px 4px rgb(0, 0, 0, 0.16);
  background-color: transparent;
}

.slds-color-picker__range-indicator:focus-visible {
  outline: none;
  box-shadow: var(--slds-g-shadow-outset-focus-1);
}

/**
 * @summary Container element for the hue slider and preview swatch
 */
.slds-color-picker__hue-and-preview {
  display: flex;
}
.slds-color-picker__hue-and-preview .slds-swatch {
  margin-inline-start: var(--slds-g-spacing-1);
  height: var(--slds-g-spacing-5);
  width: var(--slds-g-spacing-5);
  border: var(--slds-g-sizing-border-1) solid var(--slds-g-color-border-1);
  border-radius: var(--slds-g-radius-border-1);
}

/**
 * @summary The slide input that controls the hue
 */
.slds-color-picker__hue-slider {
  appearance: none;
  flex: 1;
  padding: 0;
  height: var(--slds-g-sizing-7);
  width: 100%;
  border: var(--slds-g-sizing-border-1) solid var(--slds-g-color-border-1);
  border-radius: var(--slds-g-radius-border-1);
  background: linear-gradient(
    90deg,
    red,
    #ff1500,
    #ff2b00,
    #ff4000,
    #f50,
    #ff6a00,
    #ff8000,
    #ff9500,
    #fa0,
    #ffbf00,
    #ffd500,
    #ffea00,
    #ff0,
    #eaff00,
    #d4ff00,
    #bfff00,
    #af0,
    #95ff00,
    #80ff00,
    #6aff00,
    #5f0,
    #40ff00,
    #2bff00,
    #15ff00,
    #0f0,
    #00ff15,
    #00ff2b,
    #00ff40,
    #0f5,
    #00ff6a,
    #00ff80,
    #00ff95,
    #0fa,
    #00ffbf,
    #00ffd5,
    #00ffea,
    #0ff,
    #00eaff,
    #00d4ff,
    #00bfff,
    #0af,
    #0095ff,
    #007fff,
    #006aff,
    #05f,
    #0040ff,
    #002bff,
    #0015ff,
    #00f,
    #1500ff,
    #2a00ff,
    #4000ff,
    #50f,
    #6a00ff,
    #7f00ff,
    #9500ff,
    #a0f,
    #bf00ff,
    #d400ff,
    #ea00ff,
    #f0f,
    #ff00ea,
    #ff00d4,
    #ff00bf,
    #f0a,
    #ff0095,
    #ff0080,
    #ff006a,
    #f05,
    #ff0040,
    #ff002b,
    #ff0015
  );
  margin: 0;
}

.slds-color-picker__hue-slider::-webkit-slider-thumb {
  appearance: none;
  cursor: pointer;
  height: calc(var(--slds-g-sizing-7) - (var(--slds-g-sizing-border-1) * 2));
  width: 0.375rem;
  border: var(--slds-g-sizing-border-1) solid var(--slds-g-color-neutral-base-30);
  border-radius: var(--slds-g-radius-border-1);
  background: var(--slds-g-color-surface-container-1, var(--slds-g-color-neutral-base-95));
}

.slds-color-picker__hue-slider::-moz-range-thumb {
  appearance: none;
  cursor: pointer;
  height: calc(var(--slds-g-sizing-7) - (var(--slds-g-sizing-border-1) * 2));
  width: 0.375rem;
  border: var(--slds-g-sizing-border-1) solid var(--slds-g-color-neutral-base-30);
  border-radius: var(--slds-g-radius-border-1);
  background: var(--slds-g-color-surface-container-1, var(--slds-g-color-neutral-base-95));
}

.slds-color-picker__hue-slider::-ms-thumb {
  appearance: none;
  cursor: pointer;
  width: 0.375rem;
  border: var(--slds-g-sizing-border-1) solid var(--slds-g-color-neutral-base-30);
  border-radius: var(--slds-g-radius-border-1);
  background: var(--slds-g-color-surface-container-1, var(--slds-g-color-neutral-base-95));
  height: var(--slds-g-sizing-7);
}

.slds-color-picker__hue-slider:focus {
  outline: none;
}

.slds-color-picker__hue-slider:focus-visible::-webkit-slider-thumb {
  border-color: var(--slds-g-color-brand-base-60, var(--slds-g-color-accent-1));
  box-shadow: var(--slds-g-shadow-outset-focus-1);
}

.slds-color-picker__hue-slider:focus-visible::-moz-range-thumb {
  border-color: var(--slds-g-color-brand-base-60, var(--slds-g-color-accent-1));
  box-shadow: var(--slds-g-shadow-outset-focus-1);
}

.slds-color-picker__hue-slider:focus-visible::-ms-thumb {
  border-color: var(--slds-g-color-brand-base-60, var(--slds-g-color-accent-1));
  box-shadow: var(--slds-g-shadow-outset-focus-1);
}

.slds-color-picker__hue-slider::-moz-range-track {
  height: 0;
}

.slds-color-picker__hue-slider::-ms-track {
  height: 0;
  border: 0;
  background: transparent;
  color: transparent;
}

/**
 * @summary The group of direct input elements
 */
.slds-color-picker__custom-inputs {
  display: flex;
  padding-block-start: var(--slds-g-spacing-2);
}

.slds-color-picker__custom-inputs .slds-form-element:not(:first-child) {
  margin-inline-start: var(--slds-g-spacing-1);
}

.slds-color-picker__custom-inputs input {
  padding-block: 0;
  padding-inline: var(--slds-g-spacing-1);
}

.slds-color-picker__custom-inputs abbr {
  cursor: text;
  text-decoration: none;
}

.slds-color-picker__custom-inputs .slds-form-element.slds-color-picker__input-custom-hex {
  flex: none;
  width: 4.2rem;

  input {
    font-size: var(--slds-g-spacing-3);
  }
}

/**
 * @summary Footer for the Color Selector Picker
 *
 */
.slds-color-picker__selector-footer {
  display: flex;
}
.slds-color-picker__selector-footer .slds-button {
  flex: 1;
}

/**
 * @summary A swatch
 */
.slds-swatch {
  display: inline-block;
  vertical-align: middle;
  height: var(--slds-g-sizing-6);
  width: var(--slds-g-sizing-6);
  border-radius: var(--slds-g-radius-border-1);
  box-shadow: var(--slds-g-color-neutral-base-10, inset 0 0 1px rgb(0, 0, 0, 0.4));
}

.slds-color-picker.slds-color-picker_swatches-only {
  width: 13.3rem;
  padding: var(--slds-g-spacing-2);
}

.slds-color-picker.slds-color-picker_swatches-only .slds-color-picker__selector {
  margin: 0;
}