@layer atoms {
  label {
    display: block;
    font-size: var(--font-size-s);
    line-height: 1.5;
    padding-inline: var(--padding-button-l-r);
    margin-bottom: var(--gap-xs);
    color: var(--body-text-color);
  }
  input[type=text],
  input[type=password],
  input[type=email],
  textarea {
    border-radius: var(--border-radius-button);
    border: var(--border-default-width) solid var(--shade-grey-750);
    background: var(--shade-white);
    width: 100%;
    padding: var(--padding-button-t-b) var(--padding-button-l-r);
    color: var(--body-text-color);
    font-size: var(--font-size-default);
  }
  input[type=text]::placeholder,
  input[type=password]::placeholder,
  input[type=email]::placeholder,
  textarea::placeholder {
    color: var(--shade-grey-250);
  }
  input[type=text]:focus-visible,
  input[type=password]:focus-visible,
  input[type=email]:focus-visible,
  textarea:focus-visible {
    outline: var(--border-default-width) solid var(--color-primary-orange);
    outline-offset: 2px;
  }
  textarea {
    min-height: calc(var(--font-size-default) * 1.5 * 3 + var(--padding-button-t-b) * 2 + var(--border-default-width) * 2);
    resize: vertical;
    font-family: inherit;
  }
  /*
   * Visual-only state modifiers on the wrapping <div> (Figma node 3037:31109's "valid"/"error"
   * variants) -- no JS wires them up yet, felogin has no client-side validation. Icons are the
   * exact Figma exports, already stroke-colored to --color-alert-green/-red in the SVG itself.
   */
  .is-valid input,
  .is-invalid input {
    background-repeat: no-repeat;
    background-position: right var(--padding-button-l-r) center;
    background-size: 24px;
    padding-right: calc(var(--padding-button-l-r) * 2 + 24px);
  }
  .is-valid input {
    border-color: var(--color-alert-green);
    background-image: url(../../Images/input-check.svg);
  }
  .is-invalid input {
    border-color: var(--color-alert-red);
    background-image: url(../../Images/input-error.svg);
  }
  /*
   * Leading search icon on the wrapping <div> (Figma node 4337:29531, Solr search form).
   * Lucide "search" glyph, same codepoint as ".icon-search" in 4-elements/_elements.scss.
   */
  .has-icon-search {
    position: relative;
  }
  .has-icon-search::before {
    content: "\e151";
    position: absolute;
    inset-block: 0;
    inset-inline-start: var(--padding-button-l-r);
    display: flex;
    align-items: center;
    font-family: "lucide";
    font-size: 24px;
    color: var(--body-text-color);
    pointer-events: none;
  }
  .has-icon-search input {
    padding-inline-start: calc(var(--padding-button-l-r) + 24px + var(--gap-s));
    padding-inline-end: calc(var(--padding-button-l-r) + 24px + var(--gap-s));
  }
  .has-icon-search .reset {
    position: absolute;
    inset-block: 0;
    inset-inline-end: var(--padding-button-l-r);
    display: flex;
    align-items: center;
    font-family: "lucide";
    font-size: 24px;
    color: var(--body-text-color);
    text-decoration: none;
    transition: color var(--motion-base) var(--motion-ease), transform var(--motion-base) var(--motion-ease);
  }
  .has-icon-search .reset::before {
    content: "\e1b2";
  }
  .has-icon-search .reset:hover, .has-icon-search .reset:focus-visible {
    color: var(--color-primary-orange);
    transform: rotate(90deg);
  }
}