@layer components {
  .rs-field {
    --rs-field-gap: var(--rs-unit-x2);
    --rs-field-p-v: var(--rs-unit-x2);
    --rs-field-radius: var(--rs-radius-small);
    --rs-field-border-width: 1px;
    --rs-field-border: var(--rs-color-border-neutral);
    --rs-field-focus: var(--rs-color-border-primary);
    --rs-field-font-size: var(--rs-font-size-body-3);
    --rs-field-line-height: var(--rs-line-height-body-3);
    display: flex;
    align-items: center;
    gap: var(--rs-field-gap);
    border-radius: var(--rs-field-radius);
    padding: 0 var(--rs-field-gap);
    position: relative;
    z-index: 0;
    background: var(--rs-color-background-elevation-base);
    box-shadow: inset 0 0 0 var(--rs-field-border-width) var(--rs-field-border);
    color: var(--rs-color-foreground-neutral);
    transition:
      background-color var(--rs-duration-fast) var(--rs-easing-standard),
      box-shadow var(--rs-duration-fast) var(--rs-easing-standard);
  }

  .rs-field:focus-within {
    box-shadow: inset 0 0 0 2px var(--rs-field-focus);
  }

  .rs-field:has(:user-invalid) {
    --rs-field-border-width: 2px;
    --rs-field-border: var(--rs-color-border-critical);
    --rs-field-focus: var(--rs-color-border-critical);
  }

  .rs-field:has(:disabled) {
    --rs-field-border: var(--rs-color-border-disabled);
    background: var(--rs-color-background-disabled-faded);
    color: var(--rs-color-foreground-disabled);
    cursor: not-allowed;
  }

  .rs-field[data-size="small"] {
    --rs-field-p-v: var(--rs-unit-x1);
  }

  .rs-field[data-size="large"] {
    --rs-field-gap: var(--rs-unit-x3);
    --rs-field-p-v: var(--rs-unit-x3);
    --rs-field-radius: var(--rs-radius-medium);
    --rs-field-font-size: var(--rs-font-size-body-2);
    --rs-field-line-height: var(--rs-line-height-body-2);
  }

  .rs-field[data-variant="faded"] {
    --rs-field-border: transparent;
    background: var(--rs-color-background-neutral-faded);
  }

  .rs-field > :is(input, textarea, select) {
    inline-size: 100%;
    min-inline-size: 0;
    flex: 1;
    border: 0;
    outline: 0;
    background: transparent;
    color: inherit;
    margin: 0 calc(var(--rs-field-gap) * -1);
    padding: var(--rs-field-p-v) var(--rs-field-gap);
    position: relative;
    z-index: 1;
    font-family: var(--rs-font-family-body);
    font-size: var(--rs-field-font-size);
    font-weight: var(--rs-font-weight-regular);
    line-height: var(--rs-field-line-height);
  }

  .rs-field__affix {
    position: relative;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    flex: none;
    color: var(--rs-color-foreground-neutral-faded);
    font-size: var(--rs-field-font-size);
    line-height: var(--rs-field-line-height);
    padding-inline-end: var(--rs-field-gap);
  }

  .rs-field__affix::after {
    content: "";
    position: absolute;
    inset-block: var(--rs-unit-x1);
    inset-inline-end: 0;
    border-inline-end: 1px solid var(--rs-color-border-neutral-faded);
  }

  /* End-position affix: divider sits on its inline-start edge. */
  .rs-field__affix[data-position="end"] {
    padding-inline-end: 0;
    padding-inline-start: var(--rs-field-gap);
  }

  .rs-field__affix[data-position="end"]::after {
    inset-inline-end: auto;
    inset-inline-start: 0;
    border-inline-end: 0;
    border-inline-start: 1px solid var(--rs-color-border-neutral-faded);
  }
}