/**
 * <color-input-ui> — compact form-bearing color input.
 *
 * §302 (v0.5.12, FEEDBACK-29 re-bucket). Light-DOM composition of
 * <popover-ui> + <button-ui> + <color-picker-ui>. The host element
 * carries form-control sizing tokens; inner button + popover keep
 * their own primitive styling.
 */

@scope (color-input-ui) {
  :scope {
    --color-input-swatch-size: 1em;

    display: flex;
    vertical-align: middle;
  }

  /* Display convention (ADR-0037): block-level by default; [inline] opts back to inline-level. */
  :scope[inline] { display: inline-flex; }

  :scope[disabled] {
    opacity: 0.55;
    pointer-events: none;
  }

  :scope > popover-ui {
    display: inline-flex;
  }

  /* Inline swatch chip inside the trigger button. The button-ui owns its
   * own padding + height; the swatch is sized in em so it tracks the
   * button's font-size + density automatically. */
  .color-input__swatch {
    display: inline-block;
    inline-size: var(--color-input-swatch-size);
    block-size: var(--color-input-swatch-size);
    border-radius: 50%;
    background: var(--swatch-color, transparent);
    border: 1px solid var(--a-ui-border, currentColor);
    margin-inline-end: var(--a-space-2, 0.5em);
    flex: 0 0 auto;
  }

  .color-input__value {
    font-variant-numeric: tabular-nums;
    font-family: var(--a-font-family-mono, monospace);
    font-size: 0.92em;
    color: var(--a-ui-text, currentColor);
  }
}
