/**
 * input-group.css — Input group (.ui-input-group)
 *
 * @layer      variables, components
 * @requires   layers.css, _variables.css, fields.css, input.css,
 *             textarea.css, button.css
 * @uses       :focus-within — lifts shell ring/border as one field
 * @uses       :has() — restore padding when addons absent; invalid text color
 * @uses       data-align on [data-slot~="input-group-addon"] — inline-start/end, block-start/end
 * @tokens     --ui-input-group-* (@layer variables)
 */

@layer variables {
  :root {
    --ui-input-group-display: flex;
    --ui-input-group-flex-wrap: wrap;
    --ui-input-group-align-items: center;
    --ui-input-group-gap: var(--step-1);
    --ui-input-group-inline-size: 100%;
    --ui-input-group-min-block-size: var(--ui-field-block-size);
    --ui-input-group-padding: 0;
    --ui-input-group-cursor: text;
    --ui-input-group-foreground: var(--muted-foreground);
    --ui-input-group-font-weight: var(--font-weight-strong);
    --ui-input-group-font-size: var(--font-size-sm);
    --ui-input-group-textarea-min-block-size: 3lh;
    --ui-input-group-textarea-padding-inline: var(--step-2);
    --ui-input-group-textarea-padding-block: var(--step-1_5);

    --ui-input-group-shadow: 0 0 transparent;
  }
}

@layer zazz.components {
  /* ===========================================================================
  INPUT GROUP — .ui-input-group  (shadcn-style composition)
  - A single bordered shell that fuses a text control with addons (icons, text,
    kbd) and buttons. The nested control goes borderless/transparent so the group
    reads as one field; :focus-within lifts the whole shell.
  - Addons are placed AFTER the control in the markup (for predictable tab/focus
    order) and positioned with data-align:
      inline-start (default) · inline-end · block-start · block-end
    block-* span the full width on their own row — that's how a textarea grows a
    toolbar above or below it.
  - Composition: .ui-input-group > [.ui-input | .ui-textarea] + [data-slot~="input-group-addon"]
    where an addon may hold [data-slot~="input-group-text"], an <svg>, <kbd>, or .ui-button.
  - The shell is a <label> for click-to-focus, but it is NOT the field's label.
    Wrap it in a .ui-field with a real [data-slot~="field-label"][for] (and optional [data-slot~="field-hint"]
    / [data-slot~="field-error"]) so the control is named by visible text, never by a legend.
  - Shares the --ui-field-* tokens (height, radius, surface) defined in fields.css.
  =========================================================================== */

  .ui-input-group {
    display: var(--ui-input-group-display);
    flex-wrap: var(--ui-input-group-flex-wrap);
    align-items: var(--ui-input-group-align-items);
    gap: var(--ui-input-group-gap);
    inline-size: var(--ui-input-group-inline-size);
    min-block-size: var(--ui-input-group-min-block-size);
    padding: var(--ui-input-group-padding);

    /* The shell is a <label>: clicking a non-interactive addon focuses the
       nested control, so the whole field reads as one clickable target. */
    cursor: var(--ui-input-group-cursor);

    color: var(--ui-field-foreground);
    background-color: var(--ui-field-background);
    border: 1px solid var(--ui-field-border-color);
    border-radius: var(--ui-field-radius);

    --_ring-offset-width: 0px;
    --_ring-width: 0px;
    --_ring: color-mix(in oklch, var(--ui-field-ring-color) var(--ring-opacity), transparent);
    box-shadow:
      0 0 0 var(--_ring-offset-width) var(--ring-offset-color),
      0 0 0 calc(var(--_ring-offset-width) + var(--_ring-width)) var(--_ring, var(--ring)),
      var(--ui-input-group-shadow);

    outline: var(--outline-width) var(--outline-style) transparent;
    outline-offset: var(--outline-offset);

    transition: var(--default-transition);
  }

  .ui-input-group:hover {
    background-color: var(--ui-field-background--hover);
    border-color: var(--ui-field-border-color--hover);
  }

  .ui-input-group:focus-within {
    background-color: var(--ui-field-background--focus);
    border-color: var(--ui-field-border-color--focus);
    --_ring-offset-width: var(--ring-offset-width);
    --_ring-width: var(--ring-width);
    outline-color: transparent;
  }

  /* Nested control sheds its own chrome and fills the row */
  .ui-input-group .ui-input,
  .ui-input-group .ui-textarea {
    flex: 1;
    min-inline-size: 0;
    background-color: transparent;
    border: none;
    border-radius: 0;
    outline: none;
    box-shadow: none;
  }

  .ui-input-group .ui-input {
    flex: 1;
    padding-inline: 0;

    &:is(:hover, :active, :focus) {
      background-color: transparent;
    }
  }

  /* Restore the control's own inline padding on whichever edge has no addon, so
     text never sits flush against the shell. An addon already supplies the
     spacing on its side; block-* addons take their own row and don't count here.
     (Default/no-data-align addons are inline-start.) */
  .ui-input-group:not(
      :has(
        [data-slot~="input-group-addon"]:not([data-align]),
        [data-slot~="input-group-addon"][data-align="inline-start"]
      )
    )
    .ui-input {
    padding-inline-start: var(--ui-field-padding);
  }

  .ui-input-group:not(:has([data-slot~="input-group-addon"][data-align="inline-end"])) .ui-input {
    padding-inline-end: var(--ui-field-padding);
  }

  /* A textarea claims the full width; addons stack above/below via block-* */
  .ui-input-group .ui-textarea {
    flex-basis: 100%;
    min-block-size: var(--ui-input-group-textarea-min-block-size);
    padding-inline: var(--ui-input-group-textarea-padding-inline);
    padding-block: var(--ui-input-group-textarea-padding-block);
    resize: none;
  }

  /* Addon — groups icons, text, kbd, or buttons together */
  [data-slot~="input-group-addon"] {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    gap: var(--step-1);
    color: var(--muted-foreground);
    white-space: nowrap;
    block-size: var(--ui-field-block-size);
    min-inline-size: var(--ui-field-block-size);
    padding-inline: var(--ui-field-addon-padding);
  }

  [data-slot~="input-group-addon"] > svg {
    inline-size: var(--ui-field-icon-size);
    block-size: var(--ui-field-icon-size);
  }

  /* Alignment — inline-start is the default (addon visually leads the control) */
  [data-slot~="input-group-addon"]:not([data-align]),
  [data-slot~="input-group-addon"][data-align="inline-start"] {
    order: -1;
  }

  [data-slot~="input-group-addon"][data-align="inline-end"] {
    order: 1;
  }

  [data-slot~="input-group-addon"][data-align="block-start"] {
    order: -2;
    flex-basis: 100%;
    padding-block: var(--ui-field-addon-padding);
    align-items: flex-start;
  }

  [data-slot~="input-group-addon"][data-align="block-end"] {
    order: 2;
    flex-basis: 100%;
    padding-block: var(--ui-field-addon-padding);
    align-items: flex-end;
  }

  /* Text addon — units, protocols, @handles ("https://", "USD", "@user") */
  [data-slot~="input-group-text"] {
    display: inline-flex;
    align-items: center;
    gap: var(--gap-xs);
    padding-inline: var(--ui-field-addon-padding);
    font-size: var(--ui-input-group-font-size);
    font-weight: var(--ui-input-group-font-weight);
    color: var(--ui-input-group-foreground);
    min-inline-size: max-content;
  }

  [data-slot~="input-group-text"] > svg {
    inline-size: var(--ui-field-icon-size);
    block-size: var(--ui-field-icon-size);
  }

  /* Buttons embedded in a group shrink to nest cleanly inside the shell */
  .ui-input-group .ui-button {
    flex-shrink: 0;
    border-radius: var(--ui-field-inset-child-radius);
  }

  :where(.ui-field:has(:user-invalid)) [data-slot~="input-group-text"] {
    --ui-input-group-foreground: var(--destructive);
  }
}