@layer components {
  .rs-form-control {
    display: grid;
    gap: var(--rs-unit-x1);
    min-inline-size: 0;
    margin: 0;
    padding: 0;
    border: 0;
    color: var(--rs-color-foreground-neutral);
  }

  .rs-form-control__label {
    display: inline-flex;
    align-items: baseline;
    gap: var(--rs-unit-x1);
    color: var(--rs-color-foreground-neutral);
    font-size: var(--rs-font-size-body-3);
    font-weight: var(--rs-font-weight-medium);
    line-height: var(--rs-line-height-body-3);
  }

  .rs-form-control[data-size="large"] .rs-form-control__label {
    font-size: var(--rs-font-size-body-2);
    line-height: var(--rs-line-height-body-2);
  }

  legend.rs-form-control__label {
    float: inline-start;
    padding: 0;
  }

  legend.rs-form-control__label + * {
    clear: both;
  }

  .rs-form-control__required {
    color: var(--rs-color-foreground-critical);
  }

  .rs-form-control__caption,
  .rs-form-control__error {
    color: var(--rs-color-foreground-neutral-faded);
    font-size: var(--rs-font-size-caption-1);
    line-height: var(--rs-line-height-caption-1);
  }

  .rs-form-control[data-size="large"]
    :is(.rs-form-control__caption, .rs-form-control__error) {
    font-size: var(--rs-font-size-body-3);
    line-height: var(--rs-line-height-body-3);
  }

  .rs-form-control__caption + .rs-form-control__caption,
  .rs-form-control__caption + .rs-form-control__error,
  .rs-form-control__error + .rs-form-control__caption {
    margin-block-start: calc(var(--rs-unit-x1) * -1);
  }

  .rs-form-control__error {
    display: none;
    color: var(--rs-color-foreground-critical);
  }

  .rs-form-control:has(:user-invalid) .rs-form-control__error,
  .rs-form-control[data-error] .rs-form-control__error {
    display: block;
  }

  .rs-form-control:has(:disabled),
  .rs-form-control[data-disabled] {
    color: var(--rs-color-foreground-disabled);
  }

  .rs-form-control:has(:disabled)
    :is(.rs-form-control__label, .rs-form-control__caption),
  .rs-form-control[data-disabled]
    :is(.rs-form-control__label, .rs-form-control__caption) {
    color: var(--rs-color-foreground-disabled);
  }

  .rs-form-control:has(:user-invalid) .rs-field,
  .rs-form-control[data-error] .rs-field {
    --rs-field-border-width: 2px;
    --rs-field-border: var(--rs-color-border-critical);
    --rs-field-focus: var(--rs-color-border-critical);
  }

  .rs-form-control:has(:user-invalid) .rs-select,
  .rs-form-control[data-error] .rs-select {
    box-shadow: inset 0 0 0 2px var(--rs-color-border-critical);
  }

  .rs-form-control:has(:user-invalid) .rs-textarea,
  .rs-form-control[data-error] .rs-textarea {
    --rs-textarea-border: var(--rs-color-border-critical);
    --rs-textarea-border-width: 2px;
  }

  .rs-form-control:has(:user-invalid) .rs-choice__mark,
  .rs-form-control[data-error] .rs-choice__mark {
    box-shadow: inset 0 0 0 2px var(--rs-color-border-critical);
  }
}