/* Formulare: Felder mit Beschriftung, Eingaben, Auswahl, Textfeld, Wahl (Pillen), Haken, Suche, Passwort mit Auge. */

@layer bauteile {
  .feld {
    display: grid;
    align-content: start;
    gap: 0.3rem;
    min-width: 0;

    & > label, & > .beschriftung {
      font-size: var(--gr-12);
      text-transform: uppercase;
      letter-spacing: 0.08em;
      color: var(--text-leise);
    }
    & .fehler { display: flex; align-items: center; gap: 0.35rem; font-size: var(--gr-13); color: var(--minus); }
    & .fehler .icon { width: 1rem; height: 1rem; }
    & .hilfe { font-size: var(--gr-13); color: var(--text-leise); }
  }

  /* Schwebende Beschriftung: Steht sie im HTML hinter dem Feld, liegt sie im leeren Feld und rutscht beim Tippen, mit
     Inhalt und bei Auswahl- und Datumsfeldern klein an den oberen Rand. Felder dafür brauchen placeholder (notfalls
     ein Leerzeichen), sonst steht die Beschriftung immer oben. */
  /* Rückmeldung unter einem Feld beim Tippen, etwa ob die IBAN stimmt (js/kern/iban.js) oder die Straße bekannt ist */
  .hilfe.richtig { color: var(--plus); }
  .hilfe.falsch { color: var(--minus); }
  .hilfe.warnung { color: var(--warnung); }

  /* Pflichtfelder (required) tragen ein Sternchen an der Beschriftung, überall in CSA Office */
  .feld:has(> :is(input, select, textarea):required) > :is(label, .beschriftung)::after { content: " *"; color: var(--minus); }

  .feld:has(> :is(input, select, textarea) + :is(label, .beschriftung)) {
    position: relative;
    gap: 0;

    & > :is(input, select) { height: 3.4rem; line-height: 1.3; }
    & > :is(input, select, textarea) { padding-top: 1.4rem; padding-bottom: 0.35rem; }
    & > :is(input, textarea)::placeholder { color: transparent; transition: color var(--dauer-kurz); }
    & > :is(input, textarea):focus::placeholder { color: var(--text-leise); }
    & > :is(input, select, textarea) + :is(label, .beschriftung) {
      position: absolute;
      top: 0.9rem;
      left: 0.85rem;
      right: 0.85rem;
      overflow: hidden;
      font-size: var(--gr-16);
      text-overflow: ellipsis;
      text-transform: none;
      letter-spacing: 0;
      white-space: nowrap;
      pointer-events: none;
      transform-origin: left top;
      transition: translate var(--dauer-kurz) var(--kurve), scale var(--dauer-kurz) var(--kurve), color var(--dauer-kurz);
    }
    & > :is(input:focus, input:not(:placeholder-shown), input:autofill, input:-webkit-autofill, select, textarea:focus,
      textarea:not(:placeholder-shown)) + :is(label, .beschriftung) { translate: 0 -0.6rem; scale: 0.76; }
    & > :is(input, select, textarea):focus + :is(label, .beschriftung) { color: var(--akzent); }
    & > .fehler, & > .hilfe { margin-top: 0.3rem; }

    /* Ein Icon vor dem Feld steht links darin und färbt sich mit dem Fokus */
    & > .icon {
      position: absolute;
      top: 1.1rem;
      left: 0.85rem;
      z-index: 1;
      width: 1.15rem;
      height: 1.15rem;
      color: var(--text-leise);
      pointer-events: none;
      transition: color var(--dauer-kurz);
    }
    &:has(> .icon) > :is(input, select, textarea) { padding-left: 2.6rem; }
    /* Auswahl: eigener Pfeil; der des Browsers rückt den Text ein und sieht auf jedem Gerät anders aus */
    & > select { appearance: none; padding-right: 2.6rem; }
    &:has(> select)::after { content: ""; position: absolute; top: 50%; right: 1.1rem; width: 0.5rem; height: 0.5rem; pointer-events: none;
      border-right: 1.5px solid var(--text-leise); border-bottom: 1.5px solid var(--text-leise); translate: 0 -75%; rotate: 45deg; }
    &:has(> .icon) > :is(input, select, textarea) + :is(label, .beschriftung) { left: 2.6rem; }
    &:focus-within > .icon { color: var(--akzent); }
  }

  input:not([type="hidden"], [type="checkbox"], [type="radio"], [type="range"], [type="file"]), select, textarea {
    width: 100%;
    min-height: 2.75rem;
    padding: 0.55rem 0.8rem;
    font-size: var(--gr-16);
    background: var(--glas-leicht);
    border: 1px solid var(--linie-stark);
    border-radius: var(--rund-s);
    box-shadow: inset 0 1px 0 var(--kante);
    transition: border-color var(--dauer-kurz), box-shadow var(--dauer-kurz), background var(--dauer-kurz);

    &:hover { border-color: var(--text-leise); }
    &:focus { outline: 0; border-color: var(--akzent); box-shadow: 0 0 0 4px var(--fokus-schein); background: var(--flaeche); }
    &[aria-invalid="true"] { border-color: var(--minus); background: var(--minus-flaeche); }
  }

  textarea { min-height: 6rem; resize: vertical; line-height: 1.5; }
  select { cursor: pointer; }
  /* Auswahl mit eigenem Pfeil: <span class="auswahl"><select>…</select> Icon</span> */
  .auswahl {
    position: relative;
    display: inline-grid;
    & select { width: auto; padding-right: 2.2rem; appearance: none; }
    & .icon { position: absolute; top: 50%; right: 0.7rem; width: 0.95rem; height: 0.95rem; translate: 0 -50%; color: var(--text-leise); pointer-events: none; }
  }
  input[type="checkbox"], input[type="radio"] { width: 1.1rem; height: 1.1rem; margin: 0; accent-color: var(--akzent); }

  /* Raster für Formulare: Felder nebeneinander, am Handy untereinander */
  .feldraster {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: var(--a4);

    & > * { grid-column: span 6; }
    & > .halb { grid-column: span 3; }
    & > .drittel { grid-column: span 2; }
    & > .zweidrittel { grid-column: span 4; }
  }

  /* Wahl: eine aus wenigen Möglichkeiten als Pillen (Radio-Knöpfe) */
  .wahl {
    display: inline-flex;
    justify-self: start;
    gap: 2px;
    padding: 3px;
    border: 0;
    margin: 0;
    background: var(--tinte-flaeche);
    border-radius: var(--pille);

    & label {
      display: inline-flex;
      align-items: center;
      gap: 0.4rem;
      padding: 0.4rem 0.9rem;
      font: 500 var(--gr-14) / 1 var(--schrift-titel);
      color: var(--text-2);
      border-radius: var(--pille);
      cursor: pointer;
    }
    & input { position: absolute; opacity: 0; pointer-events: none; }
    & label:has(input:checked) { color: var(--text); background: var(--flaeche); box-shadow: var(--schatten-knopf); }
    & label:has(input:focus-visible) { outline: 2px solid var(--akzent); outline-offset: 2px; }
    & .icon { width: 1rem; height: 1rem; }
  }

  .haken { display: inline-flex; align-items: center; gap: 0.55rem; color: var(--text-2); cursor: pointer; }

  /* Suchfeld mit Lupe */
  .suche {
    position: relative;
    display: block;
    min-width: min(22rem, 100%);

    & .icon { position: absolute; left: 0.8rem; top: 50%; translate: 0 -50%; color: var(--text-leise); pointer-events: none; }
    & input { padding-left: 2.5rem; border-radius: var(--pille); }
  }

  /* Passwort mit Auge: der Knopf sitzt rechts im Feld, unter der Beschriftung */
  .passwort {
    position: relative;

    & input { padding-right: 2.75rem; }
    & > button {
      position: absolute;
      right: 0.4rem;
      top: 0.6rem;
      display: grid;
      padding: 0.3rem;
      color: var(--text-leise);
      background: none;
      border: 0;
      border-radius: 8px;
      cursor: pointer;
      &:hover { color: var(--text); background: var(--tinte-flaeche); }
      & .icon-eye-off, &[aria-pressed="true"] .icon-eye { display: none; }
      &[aria-pressed="true"] .icon-eye-off { display: inline-block; }
    }
  }

  @media (max-width: 40rem) {
    .feldraster > .halb, .feldraster > .drittel, .feldraster > .zweidrittel { grid-column: span 6; }
  }
}