@use '../../theme/styles' as theme;

.wr-color-picker {
  --wr-color-picker-width: 17rem;
  --wr-color-picker-sv-height: 10rem;
  --wr-color-picker-slider-height: 0.75rem;
  --wr-color-picker-thumb-size: 0.875rem;
  --wr-color-picker-radius: var(--wr-border-radius-base);
  --wr-color-picker-padding: 0.75rem;
  --wr-color-picker-bg: var(--wr-color-white);
  --wr-color-picker-border: var(--wr-color-light);
  --wr-color-picker-gap: 0.625rem;

  // Driven by host bindings on the component
  --wr-color-picker-hue: hsl(0, 100%, 50%);
  --wr-color-picker-rgb: 0, 0, 0;

  display: inline-flex;
  flex-direction: column;
  gap: var(--wr-color-picker-gap);
  width: var(--wr-color-picker-width);
  padding: var(--wr-color-picker-padding);
  background: var(--wr-color-picker-bg);
  border: 1px solid var(--wr-color-picker-border);
  @include theme.smooth-br(var(--wr-color-picker-radius));
  box-shadow: var(--wr-shadow-overlay);
  font-family: var(--wr-font-family-base);
  user-select: none;

  // SV (saturation + value) canvas
  &__sv {
    position: relative;
    width: 100%;
    height: var(--wr-color-picker-sv-height);
    @include theme.smooth-br(var(--wr-color-picker-radius));
    cursor: crosshair;
    touch-action: none;
    background:
      linear-gradient(to top, #000, transparent), linear-gradient(to right, #fff, transparent),
      var(--wr-color-picker-hue);
    box-shadow: inset 0 0 0 1px rgba(var(--wr-color-black-rgb), 0.06);
  }

  // Hue + alpha sliders
  &__slider {
    position: relative;
    width: 100%;
    height: var(--wr-color-picker-slider-height);
    border-radius: var(--wr-color-picker-slider-height);
    cursor: ew-resize;
    touch-action: none;
    box-shadow: inset 0 0 0 1px rgba(var(--wr-color-black-rgb), 0.06);

    // Coarse pointers: a taller track is easier to drag than the 0.75rem
    // default. A symmetric 44px hit area would overlap the SV panel above it,
    // so grow the track itself instead (the thumb stays vertically centred).
    @media (pointer: coarse) {
      height: 1.5rem;
    }
  }

  &__slider--hue {
    background: linear-gradient(
      to right,
      hsl(0, 100%, 50%),
      hsl(60, 100%, 50%),
      hsl(120, 100%, 50%),
      hsl(180, 100%, 50%),
      hsl(240, 100%, 50%),
      hsl(300, 100%, 50%),
      hsl(360, 100%, 50%)
    );
  }

  &__slider--alpha {
    background-image:
      linear-gradient(to right, rgba(var(--wr-color-picker-rgb), 0), rgba(var(--wr-color-picker-rgb), 1)),
      conic-gradient(#cdd2dd 25%, #fff 0 50%, #cdd2dd 0 75%, #fff 0);
    background-size:
      auto,
      8px 8px;
  }

  // Thumb
  &__thumb {
    position: absolute;
    width: var(--wr-color-picker-thumb-size);
    height: var(--wr-color-picker-thumb-size);
    transform: translate(-50%, -50%);
    top: 0;
    left: 0;
    border-radius: 50%;
    border: 2px solid #fff;
    box-shadow:
      0 0 0 1px rgba(var(--wr-color-black-rgb), 0.3),
      0 1px 2px rgba(var(--wr-color-black-rgb), 0.25);
    pointer-events: none;
    background: transparent;
  }

  // Sliders position their thumb at vertical centre.
  &__thumb--slider {
    top: 50%;
  }

  // Preview tile
  &__preview {
    --wr-preview-size: 1.75rem;
    flex: 0 0 auto;
    display: inline-block;
    width: var(--wr-preview-size);
    height: var(--wr-preview-size);
    @include theme.smooth-br(var(--wr-color-picker-radius));
    background-image:
      linear-gradient(currentColor, currentColor), conic-gradient(#cdd2dd 25%, #fff 0 50%, #cdd2dd 0 75%, #fff 0);
    background-size:
      auto,
      8px 8px;
    box-shadow: inset 0 0 0 1px rgba(var(--wr-color-black-rgb), 0.06);
    color: transparent; // background-image already set inline via [style.background]
  }

  // Chrome: preview tile + format tabs
  &__chrome {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
  }

  &__tabs {
    flex: 1 1 auto;
    font-size: var(--wr-text-xs);
  }

  // Per-tab numeric inputs
  &__inputs {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0.25rem;
  }

  &__inputs--hex {
    grid-template-columns: 1fr;
  }

  &__field {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0.125rem;
    min-width: 0;

    input {
      appearance: none;
      -moz-appearance: textfield;
      background: var(--wr-color-white);
      border: 1px solid var(--wr-color-light);
      border-radius: var(--wr-border-radius-sm);
      padding: 0.25rem 0.375rem;
      color: var(--wr-color-dark);
      font-family: var(--wr-font-family-mono, monospace);
      font-size: var(--wr-text-xs);
      line-height: 1rem;
      text-align: center;
      outline: 0;
      min-width: 0;
      transition:
        border-color var(--wr-transition-base),
        box-shadow var(--wr-transition-base);

      &::-webkit-outer-spin-button,
      &::-webkit-inner-spin-button {
        appearance: none;
        margin: 0;
      }

      &:focus {
        border-color: var(--wr-color-primary);
        box-shadow: 0 0 0 2px rgba(var(--wr-color-primary-rgb), 0.15);
      }

      &:disabled {
        background: rgba(var(--wr-color-light-rgb), 0.35);
        color: var(--wr-color-medium);
        cursor: not-allowed;
      }
    }
  }

  &__field--wide input {
    text-align: left;
    text-transform: lowercase;
    padding: 0.3125rem 0.5rem;
    font-size: var(--wr-text-sm);
  }

  &__field-label {
    text-align: center;
    color: var(--wr-color-medium);
    font-size: 0.625rem; // 10px — intentional micro R/G/B/A channel label, below --wr-text-xs
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    user-select: none;
  }

  // Swatches row
  &__swatches {
    display: grid;
    grid-template-columns: repeat(8, 1fr);
    gap: 0.25rem;
  }

  &__swatch {
    appearance: none;
    aspect-ratio: 1 / 1;
    // Use the dark token so the hairline tracks theme — fixed black at
    // 8% disappears against the dark-mode canvas, leaving swatches
    // bleeding into each other.
    border: 1px solid rgba(var(--wr-color-dark-rgb), 0.12);
    border-radius: var(--wr-border-radius-sm);
    cursor: pointer;
    padding: 0;
    transition:
      transform var(--wr-transition-base),
      box-shadow var(--wr-transition-base);

    &:hover:not(:disabled) {
      transform: scale(1.08);
      box-shadow: 0 0 0 2px rgba(var(--wr-color-primary-rgb), 0.25);
    }

    &:focus-visible {
      @include theme.focus-ring;
    }

    &:disabled {
      cursor: not-allowed;
      opacity: 0.5;
    }
  }

  &--disabled {
    pointer-events: none;
    opacity: 0.65;
  }
}

// Overlay pane used by [wrColorPickerTrigger]. The inner `.wr-color-picker`
// brings its own border + shadow, so the pane just provides z-index isolation.
.wr-color-picker-overlay {
  z-index: 1050;
}