@layer components {
  
  .form .field,
  .form .row,
  .form .button,
  .form input.button { max-width: var(--measure); }

  .field { display: flex; flex-direction: column; gap: var(--space); }

  
  .input, .select, .textarea {
    font: inherit;
    font-size: var(--text-base);
    color: var(--ink);
    background: var(--field-paper, var(--surface-sunk));
    border: var(--line-w-control) solid var(--field-line, var(--line));
    border-radius: var(--radius);
    padding: 0 var(--space-2);
    height: var(--control-h);
    width: 100%;
    transition: border-color var(--transition), background var(--transition), var(--responds);
  }

  .textarea { height: auto; min-height: 9rem; padding: var(--space-2); line-height: var(--leading-body); resize: vertical; }

  
  .input:hover, .select:hover, .textarea:hover { border-color: var(--line-strong); }
  .input:focus, .select:focus, .textarea:focus { background: var(--surface); border-color: var(--accent); }
  .input::placeholder, .textarea::placeholder { color: var(--ink-faint); }

  
  .input[aria-invalid="true"],
  .input[aria-invalid="true"]:hover,
  .input[aria-invalid="true"]:focus { border-color: var(--danger); }
  .input[aria-invalid="true"]:focus-visible { outline-color: var(--danger); }

  .input:disabled, .select:disabled, .textarea:disabled {
    color: var(--ink-muted);
    cursor: not-allowed;
  }

  .input:disabled:hover, .select:disabled:hover, .textarea:disabled:hover { border-color: var(--line); }

  
  .filefield {
    display: flex;
    align-items: center;
    gap: var(--space);
  }

  @media (width <= 40rem) {
    .filefield { flex-direction: column; align-items: stretch; }
  }

  .input.filefield__input {
    flex: 1;
    min-width: 0;
    display: flex;
    align-items: center;
    cursor: pointer;
    
    height: var(--control-h);
    padding-block: calc((var(--control-h) - 1lh - var(--line-w-control) * 2) / 2);
    
    overflow: hidden;
  }

  @media (width <= 40rem) {
    .input.filefield__input { flex: none; }
  }

  .input.filefield__input::file-selector-button { display: none; }

  
  
  .selectmenu { min-width: 0; }

  .select.selectmenu__button {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space);
    padding-inline-end: var(--space);
    text-align: left;
    cursor: pointer;
  }

  .selectmenu__value {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  
  .menu[popover].menu--select { min-width: 0; }

  
  .selectfield {
    position: relative;
    display: flex;
    align-items: center;
  }

  .selectfield > .select {
    appearance: none;
    padding-inline-end: calc(var(--space) * 2 + 1.25rem);
    cursor: pointer;
  }

  .selectfield > .dropdown-chevron {
    position: absolute;
    right: calc(var(--space) + var(--line-w-control));
    pointer-events: none;
  }

  .input--code {
    font-family: var(--font-mono);
    font-size: var(--text-lg);
    text-align: center;
    letter-spacing: var(--tracking-code);
    text-transform: uppercase;
  }

  .input--code::placeholder { letter-spacing: var(--tracking-code); }

  .input-group { display: flex; }

  .input-group__affix {
    display: flex;
    align-items: center;
    flex: none;
    padding-inline: var(--space-2);
    border: var(--line-w-control) solid var(--field-line, var(--line));
    border-right: none;
    border-radius: var(--radius) 0 0 var(--radius);
    background: var(--surface-sunk);
    color: var(--ink-muted);
    white-space: nowrap;
  }

  .input-group .input {
    flex: 1;
    width: auto;
    min-width: 0;
    border-radius: 0 var(--radius) var(--radius) 0;
  }

  
  .input-group:hover .input-group__affix,
  .input-group:hover .input { border-color: var(--line-strong); }
  .input-group:focus-within .input-group__affix { border-color: var(--accent); }
}