/**
 * password-group.css — Password group (.ui-password-group)
 *
 * @layer      variables, components
 * @requires   layers.css, _variables.css, fields.css, input.css,
 *             button.css
 * @uses       Same shell pattern as input-group.css (:focus-within, :has, data-align)
 * @uses       aria-pressed on toggle — show/hide icon swap via CSS (JS sets type +
 *             aria in password-group.ts)
 * @uses       Native reveal suppressed in _reset.css (::-ms-reveal, etc.)
 * @tokens     --ui-password-group-* (@layer variables)
 */

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

@layer zazz.components {
  /* ===========================================================================
  PASSWORD — .ui-password-group (text field + reveal toggle)
  - A password is a plain .ui-input[type="password"] inside an .ui-password-group, so it
    inherits the shared --ui-field-* surface, hover, focus, and :user-invalid states
    for free. The only password-specific concern is the show/hide toggle.
  - The toggle is a .ui-button[data-variant="ghost"] in a trailing addon. Its
    aria-pressed state drives which icon shows; the <ui-password> element
    (ui/password-group/password-group.js) flips the input's type between password/text and
    keeps aria-pressed + aria-label in sync. With JS off the field still works as
    a normal masked password input.
  - Native reveal/clear chrome (Edge ::-ms-reveal, Safari credential buttons) is
    suppressed in _reset.css so it never double-stacks with our toggle.
  =========================================================================== */

  /* <ui-password> is the custom element (ui/password-group/password-group.js) that wires
     the toggle — it wraps .ui-password-group, so give it block flow. */
  ui-password {
    display: block;
  }

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

    /* 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-password-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 renders as box-shadow; transparent outline twin keeps focus visible
       in forced-colors / high-contrast modes */
    --_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));
    outline: var(--outline-width) var(--outline-style) transparent;
    outline-offset: var(--outline-offset);

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

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

  .ui-password-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;
  }

  .ui-password-group:focus-within .ui-input {
    /* Suppress the control's own focus ring since the shell has one. The control
       still gets :focus so it can style its focus-within state (e.g. show a
       password reveal toggle). */
    outline: none;
    box-shadow: none;
  }

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

  .ui-password-group .ui-input {
    block-size: 100%;
    padding-inline: 0;
  }

  /* Restore the control's own inline padding on whichever edge has no addon, so
     text never sits flush against the shell. The reveal toggle is a trailing
     (inline-end) addon, so by default the leading edge gets the field padding.
     block-* addons take their own row and don't count here. */
  .ui-password-group:not(
      :has(
        [data-slot~="password-group-addon"]:not([data-align]),
        [data-slot~="password-group-addon"][data-align="inline-start"]
      )
    )
    .ui-input {
    padding-inline-start: var(--ui-field-padding);
  }

  .ui-password-group:not(:has([data-slot~="password-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-password-group .ui-textarea {
    flex-basis: 100%;
    min-block-size: var(--ui-password-group-textarea-min-block-size);
    padding-inline: var(--ui-password-group-textarea-padding-inline);
    padding-block: var(--ui-password-group-textarea-padding-block);
    resize: none;
  }

  /* Addon — groups icons, text, kbd, or buttons together */
  [data-slot~="password-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~="password-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~="password-group-addon"]:not([data-align]),
  [data-slot~="password-group-addon"][data-align="inline-start"] {
    order: -1;
  }

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

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

  [data-slot~="password-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~="password-group-text"] {
    display: inline-flex;
    align-items: center;
    gap: var(--gap-xs);
    padding-inline: var(--ui-field-addon-padding);
    font-size: var(--ui-password-group-font-size);
    font-weight: var(--ui-password-group-font-weight);
    color: var(--ui-password-group-foreground);
    min-inline-size: max-content;
  }

  [data-slot~="password-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-password-group .ui-button {
    flex-shrink: 0;
    border-radius: var(--ui-field-inset-child-radius);
  }

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

  /* Icon swap is driven by the toggle's pressed state: show the eye when masked,
     the eye-off when revealed. Both icons ship in the markup; CSS toggles them so
     no icon swap round-trips through JS. */
  [data-slot~="password-group-toggle"] [data-slot~="password-group-icon-hide"] {
    display: none;
  }

  [data-slot~="password-group-toggle"][aria-pressed="true"]
    [data-slot~="password-group-icon-show"] {
    display: none;
  }

  [data-slot~="password-group-toggle"][aria-pressed="true"]
    [data-slot~="password-group-icon-hide"] {
    display: block;
  }
}