/*
 * Copyright (c) 2026, Salesforce, Inc.,
 * All rights reserved.
 * For full license text, see the LICENSE.txt file
 */

@layer theme {
  .slds-input,
  .slds-input_faux {
    /* Surface */
    --slds-c-input-color-background: var(--slds-g-color-surface-container-1);
    --slds-c-input-color-background-disabled: var(--slds-s-input-color-background-disabled);
    --slds-c-input-color-foreground: var(--slds-s-input-color);
    --slds-c-input-color-foreground-disabled: var(--slds-s-input-color-disabled);
    --slds-c-input-color-border: var(--slds-s-input-color-border);
    --slds-c-input-color-border-focus: var(--slds-s-input-color-border-focus);
    --slds-c-input-color-border-disabled: var(--slds-s-input-color-border-disabled);
    --slds-c-input-sizing-border: var(--slds-g-sizing-border-1);
    --slds-c-input-radius-border: var(--slds-s-input-radius-border);
    --slds-c-input-shadow-focus: var(--slds-g-shadow-outline-focus-1);
    --slds-c-input-shadow-focus-bare: var(--slds-g-shadow-inset-focus-1);

    /* Typography */
    --slds-c-input-font-line-height: 1.875rem;
    --slds-c-input-font-size-coarse: var(--slds-g-font-scale-2);

    /* Spacing — single-value axis writes. Compound `<start> <end>`
       writes are forbidden on the axis tier (they don't survive `var()`
       substitution into the longhand reads); asymmetric defaults below
       use the direction tier instead. */
    --slds-c-input-spacing-block: 0;
    --slds-c-input-spacing-inline: var(--slds-s-input-spacing);

    /* Sizing */
    --slds-c-input-sizing-height-min: calc(1.875rem + 2px);
  }

  /* Icon hooks live on the wrapper rather than .slds-input itself
     because `.slds-input__icon` and `.slds-input__icon-group` are
     siblings of `.slds-input`, not descendants. Custom-property
     inheritance flows parent → child only, so defining these on
     `.slds-input-has-icon` (the common ancestor) lets them reach
     both the input and the icon overlay. */
  .slds-input-has-icon {
    --slds-c-input-icon-size: 0.875rem;
    --slds-c-input-icon-spacing-inline: var(--slds-g-spacing-2);
    --slds-c-input-icon-color-foreground-disabled: var(--slds-g-color-disabled-1);
    --slds-c-input-icon-group-size: var(--slds-g-sizing-5);
    --slds-c-input-icon-group-spinner-spacing-inline: var(--slds-g-spacing-5);
  }

  /* Bare modifier: drop chrome under the Rule-5 root-anchored compound.
     Direction-tier writes because start and end differ. */
  .slds-input.slds-input_bare {
    --slds-c-input-color-background: transparent;
    --slds-c-input-color-border: transparent;
    --slds-c-input-spacing-inline-start: var(--slds-s-input-spacing);
    --slds-c-input-spacing-inline-end: 0;
  }

  /* Readonly inputs render chromeless by default. The `_borders`
     modifier opts back in to the bordered surface. */
  .slds-input[readonly] {
    --slds-c-input-color-background: transparent;
    --slds-c-input-color-border: transparent;
    --slds-c-input-spacing-inline-start: 0;
    --slds-c-input-spacing-inline-end: var(--slds-s-input-spacing);
  }

  .slds-input.slds-input_borders[readonly] {
    --slds-c-input-color-background: var(--slds-g-color-surface-container-1);
    --slds-c-input-color-border: var(--slds-s-input-color-border);
    --slds-c-input-spacing-inline: var(--slds-s-input-spacing);
  }

  /* Icon-presence wrapper classes pad the input to clear the
     absolutely positioned icon overlay. Direction-tier writes because
     CSS custom-property substitution can't decompose a compound axis
     value into separate `padding-inline-start` / `-end` reads — the
     tuple substitutes whole and the browser drops it. The
     direction-with-axis-fallback contract in `themes/base.css` still
     lets a customer override the axis on the symmetric case. */
  .slds-input-has-icon_left .slds-input,
  .slds-input-has-icon_left .slds-input_faux,
  .slds-input-has-icon_left .slds-input_bare {
    --slds-c-input-spacing-inline-start: var(--slds-g-spacing-6);
    --slds-c-input-spacing-inline-end: var(--slds-s-input-spacing);
  }

  .slds-input-has-icon_right .slds-input,
  .slds-input-has-icon_right .slds-input_faux,
  .slds-input-has-icon_right .slds-input_bare {
    --slds-c-input-spacing-inline-start: var(--slds-s-input-spacing);
    --slds-c-input-spacing-inline-end: var(--slds-g-spacing-6);
  }

  .slds-input-has-icon_left-right .slds-input,
  .slds-input-has-icon_left-right .slds-input_faux,
  .slds-input-has-icon_left-right .slds-input_bare {
    --slds-c-input-spacing-inline: var(--slds-g-spacing-6);
  }

  .slds-input-has-icon_group-right .slds-input,
  .slds-input-has-icon_group-right .slds-input_faux,
  .slds-input-has-icon_group-right .slds-input_bare {
    --slds-c-input-spacing-inline-start: var(--slds-s-input-spacing);
    --slds-c-input-spacing-inline-end: calc(var(--slds-g-spacing-6) + var(--slds-g-spacing-2));
  }

  /* Error state: parent .slds-has-error wrapper reassigns canonical
     color hooks to global feedback tokens. */
  .slds-has-error .slds-input {
    --slds-c-input-color-background: var(--slds-s-input-color-background-invalid);
    --slds-c-input-color-border: var(--slds-g-color-border-error-1);
    --slds-c-input-color-foreground: var(--slds-s-input-color-invalid);
  }

  .slds-has-error .slds-input__icon {
    --slds-c-input-icon-color-foreground: var(--slds-g-color-error-1);
  }
}