/* ── Local custom properties ─────────────────────────────────────────────────
   --_inp-pad-start : compensates for left icon (set by --icon-left modifier)
   --_inp-pad-end   : compensates for right action buttons (set by --has-actions)
   These are private; do not override from outside.
*/

/* ═══════════════════════════════════════════════════════════════════════════
   FA-INPUT EXTENSIONS — states not covered by field.css
   ═══════════════════════════════════════════════════════════════════════════ */

/* Hover .fa-input — у field.css (консолідовано, аудит #25, 2026-07-02) */

/* ── Number — hide native spin buttons for consistent appearance ─────────── */
.fa-input[type="number"]::-webkit-inner-spin-button,
.fa-input[type="number"]::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.fa-input[type="number"] {
  -moz-appearance: textfield;
}

/* ═══════════════════════════════════════════════════════════════════════════
   INPUT-WRAP — decorator shell (icon + action buttons)
   Placed directly inside .field__body, wraps a single .fa-input.

   Usage:
     <div class="input-wrap [input-wrap--icon-left] [input-wrap--has-actions]">
       <span class="input-wrap__icon" aria-hidden="true">…svg…</span>
       <input class="fa-input" …>
       <button class="input-wrap__clear" hidden …>…svg…</button>
       <button class="input-wrap__toggle" …>…svg…</button>
     </div>
   ═══════════════════════════════════════════════════════════════════════════ */

.input-wrap {
  position: relative;
  display: block;
}

/* ── Compensate fa-input inline padding for icon / buttons ──────────────── */
.input-wrap--icon-left .fa-input {
  /* 20px icon + 8px gap */
  padding-inline-start: calc(20px + var(--uris-spacing-2));
}

.input-wrap--has-actions .fa-input {
  /* 20px button + 8px gap */
  padding-inline-end: calc(20px + var(--uris-spacing-2));
}

/* ── Left decorative icon ────────────────────────────────────────────────── */
.input-wrap__icon {
  position: absolute;
  inset-inline-start: 0;
  top: 50%;
  transform: translateY(-50%);
  width: var(--uris-component-icon-size-md);
  height: var(--uris-component-icon-size-md);
  color: var(--uris-color-semantic-text-muted);
  pointer-events: none;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Mirror error / success tint on the left icon */
.field--error   .input-wrap__icon { color: var(--uris-color-semantic-danger); }
.field--success .input-wrap__icon { color: var(--uris-color-semantic-success); }

/* ── Action buttons — clear and password toggle ──────────────────────────── */
.input-wrap__clear,
.input-wrap__toggle {
  position: absolute;
  inset-inline-end: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 20px;
  height: 20px;
  padding: 0;
  border: none;
  background: transparent;
  cursor: pointer;
  color: var(--uris-color-semantic-text-muted);
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--uris-radius-sm);
  transition: color var(--uris-duration-fast) var(--uris-ease-default);
}

/* Розширена зона натискання 44×44px без зміни візуальних 20px
   (аудит #11, 2026-07-02): прозорий ::before поверх кнопки. */
.input-wrap__clear::before,
.input-wrap__toggle::before {
  content: '';
  position: absolute;
  inset: calc((20px - 44px) / 2); /* 20px візуальних + по 12px на боки = 44px */
}

.input-wrap__clear:hover,
.input-wrap__toggle:hover {
  color: var(--uris-color-semantic-text);
}
/* focus-visible: глобальне кільце фокуса — _shared/utilities.css */

/* search.js/input.js toggle visibility via the native `hidden` property, but
   `display:flex` above (author CSS) beats the UA [hidden] rule regardless of
   specificity — without this, the clear button never actually hides. */
.input-wrap__clear[hidden],
.input-wrap__toggle[hidden] {
  display: none;
}

/* Hide action buttons when the input is disabled or (clear only) readonly */
.input-wrap:has(.fa-input:disabled) .input-wrap__clear,
.input-wrap:has(.fa-input:disabled) .input-wrap__toggle,
.input-wrap:has(.fa-input[readonly]) .input-wrap__clear {
  display: none;
}

/* ── Reduced motion ──────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .input-wrap__clear,
  .input-wrap__toggle {
    transition: none;
  }
}