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

/**
 * @summary Input base — paint surface for the theme layer.
 *
 * Reads only canonical `--slds-c-input-*` hooks. State paint reads its
 * own per-state hook directly at the paint site (e.g. `border-color:
 * var(--slds-c-input-color-border-focus)` inside `:focus`) rather than
 * reassigning the base hook from a pseudo-state rule. Variant paint
 * (`_bare`, `_faux`, `_height`) lives at root-anchored Rule-5 compounds.
 *
 * Concrete values are supplied by `themes/<theme>.css`.
 */

.slds-input {
  display: inline-block;
  padding-block-start: var(--slds-c-input-spacing-block-start, var(--slds-c-input-spacing-block));
  padding-block-end: var(--slds-c-input-spacing-block-end, var(--slds-c-input-spacing-block));
  padding-inline-start: var(--slds-c-input-spacing-inline-start, var(--slds-c-input-spacing-inline));
  padding-inline-end: var(--slds-c-input-spacing-inline-end, var(--slds-c-input-spacing-inline));
  width: 100%;
  line-height: var(--slds-c-input-font-line-height);
  border-style: solid;
  border-width: var(--slds-c-input-sizing-border);
  border-color: var(--slds-c-input-color-border, transparent);
  border-radius: var(--slds-c-input-radius-border);
  background-color: var(--slds-c-input-color-background);
  background-clip: padding-box;
  color: var(--slds-c-input-color-foreground);
}

@media (pointer: coarse) and (hover: none) {
  .slds-input {
    font-size: var(--slds-c-input-font-size-coarse);
  }
}

.slds-input:focus {
  border-color: var(--slds-c-input-color-border-focus, transparent);
  outline: 0;
}

.slds-input:focus-visible {
  border-color: var(--slds-c-input-color-border-focus, transparent);
  box-shadow: var(--slds-c-input-shadow-focus);
  outline: 0;
}

.slds-input[disabled],
.slds-input.slds-is-disabled {
  background-color: var(--slds-c-input-color-background-disabled);
  border-color: var(--slds-c-input-color-border-disabled, transparent);
  color: var(--slds-c-input-color-foreground-disabled);
  cursor: not-allowed;
  user-select: none;
}

.slds-input[disabled]:focus,
.slds-input[disabled]:active,
.slds-input.slds-is-disabled:focus,
.slds-input.slds-is-disabled:active {
  box-shadow: none;
}

.slds-input[disabled]::placeholder,
.slds-input.slds-is-disabled::placeholder {
  color: var(--slds-c-input-color-foreground-disabled);
}

.slds-input[readonly] {
  outline: 0;
}

.slds-input[type='search']::-ms-clear {
  display: none;
  width: 0;
  height: 0;
}

/* Hide extra UI added by the browser, specifically the close icon, for Search inputs */
.slds-input[type='search']::-webkit-search-decoration,
.slds-input[type='search']::-webkit-search-cancel-button,
.slds-input[type='search']::-webkit-search-results-button,
.slds-input[type='search']::-webkit-search-results-decoration {
  display: none;
}

/* Prevents certain input types from switching to RTL layout. */
.slds-input[type='url'],
.slds-input[type='tel'],
.slds-input[type='email'] {
  direction: ltr;
  text-align: start;
}

/* Bare modifier paint (Rule-5 root-anchored compound). The hook
   reassignment lives in the theme variants. */
.slds-input.slds-input_bare:focus-visible {
  box-shadow: var(--slds-c-input-shadow-focus-bare);
  outline: 0;
}

/* Used to apply an input size to another element thats a non input;
   e.g. matching height for non-input form elements. */
.slds-input.slds-input_height {
  min-height: var(--slds-c-input-sizing-height-min);
}

/**
 * Faux input: mirrors the input's paint surface for non-form elements
 * (e.g. select-only combobox). Reads the same canonical hooks so
 * customers customize once and both forms follow.
 */
.slds-input.slds-input_faux {
  display: inline-flex;
  flex: 1 1 auto;
  text-align: start;
  padding-block-start: var(--slds-c-input-spacing-block-start, var(--slds-c-input-spacing-block));
  padding-block-end: var(--slds-c-input-spacing-block-end, var(--slds-c-input-spacing-block));
  padding-inline-start: var(--slds-c-input-spacing-inline-start, var(--slds-c-input-spacing-inline));
  padding-inline-end: var(--slds-c-input-spacing-inline-end, var(--slds-c-input-spacing-inline));
  width: 100%;
  line-height: var(--slds-c-input-font-line-height);
  border-style: solid;
  border-width: var(--slds-c-input-sizing-border);
  border-color: var(--slds-c-input-color-border, transparent);
  border-radius: var(--slds-c-input-radius-border);
  background-color: var(--slds-c-input-color-background);
  color: var(--slds-c-input-color-foreground);
}

.slds-input.slds-input_faux.slds-is-disabled {
  background-color: var(--slds-c-input-color-background-disabled);
  border-color: var(--slds-c-input-color-border-disabled, transparent);
  color: var(--slds-c-input-color-foreground-disabled);
  cursor: not-allowed;
  user-select: none;
}

.slds-input.slds-input_faux.slds-is-disabled:focus,
.slds-input.slds-input_faux.slds-is-disabled:active {
  box-shadow: none;
}

.slds-input.slds-input_faux > span::before {
  content: '';
  display: inline-block;
}

/**
 * Wrapper class that signals a sibling icon is positioned over the
 * input. Owns the icon's positioning and the inline-padding hook
 * reassignments so the icon doesn't overlap input content.
 */
.slds-input-has-icon {
  position: relative;
}

/* Both the host element (.slds-input__icon) and the inner SVG (.slds-icon rendered
   by lightning-primitive-icon) need --slds-c-icon-size overridden to the input icon
   size. Icon/cosmos.css assigns --slds-c-icon-size: 2rem directly on .slds-icon
   which beats inherited values; this unlayered relay (higher precedence than
   @layer theme) targets both element types inside the icon wrapper. */
.slds-input-has-icon .slds-icon {
  --slds-c-icon-size: var(--slds-c-input-icon-size, revert-layer);
}

.slds-input-has-icon .slds-input__icon {
  --slds-c-icon-size: var(--slds-c-input-icon-size, revert-layer);

  width: var(--slds-c-input-icon-size);
  height: var(--slds-c-input-icon-size);
  position: absolute;
  top: 50%;
  margin-top: calc((var(--slds-c-input-icon-size) * 0.5) * -1);
  line-height: 1;
  border: 0;
  z-index: 2;
}

.slds-input-has-icon:has(.slds-input[disabled]) .slds-input__icon,
.slds-input-has-icon:has(.slds-input.slds-is-disabled) .slds-input__icon {
  fill: var(--slds-c-input-icon-color-foreground-disabled);
}

/* Icon positioning paint. The hook reassignments that pad the input
   to make room for the icon live in the theme variants. */
.slds-input-has-icon_left .slds-input__icon {
  inset-inline-start: var(--slds-c-input-icon-spacing-inline);
}

.slds-input-has-icon_right .slds-input__icon {
  inset-inline-end: var(--slds-c-input-icon-spacing-inline);
}

.slds-input-has-icon_left-right .slds-input__icon_left {
  inset-inline-start: var(--slds-c-input-icon-spacing-inline);
}

.slds-input-has-icon_left-right .slds-input__icon_right {
  inset-inline-end: var(--slds-c-input-icon-spacing-inline);
}

/* Icon-group: a sibling of `.slds-input` that holds the close icon
   plus an in-progress spinner. Anchored under `.slds-input-has-icon`
   so the BEM-element selector doesn't leak via cascade. */
.slds-input-has-icon .slds-input__icon-group {
  position: absolute;
  height: var(--slds-c-input-icon-group-size);
  margin-top: calc(var(--slds-c-input-icon-group-size) * -0.5);
}

.slds-input-has-icon .slds-input__icon-group_right {
  inset-inline-end: 0;
  inset-block-start: 50%;
}

.slds-input-has-icon .slds-input__icon-group_right .slds-input__icon_right {
  inset-inline-end: var(--slds-c-input-icon-spacing-inline);
}

.slds-input-has-icon .slds-input__icon-group_right .slds-input__spinner {
  inset-inline-end: var(
    --slds-c-input-icon-group-spinner-spacing-inline-end,
    var(--slds-c-input-icon-group-spinner-spacing-inline)
  );
  inset-inline-start: auto;
}

/* Use on input container to let it know there is fixed text to the left or right of the input */
.slds-input-has-fixed-addon {
  display: flex;
}

/* Error state icon paint. The canonical color hook is reassigned to
   the global error token under `.slds-has-error .slds-input__icon` in
   each theme file. */
.slds-has-error .slds-input__icon {
  fill: var(--slds-c-input-icon-color-foreground);
  color: var(--slds-c-input-icon-color-foreground);
}