:is(.form-wrap, .settings-form, .sf-form, .sm-filters) {
  color: var(--color-text);
}

:is(.form-row, .form-col, .form-field, .sf-field, .sm-filter-field) {
  min-width: 0;
}

:is(.form-label, .form-col label, .sf-field label, .sm-filter-field label) {
  color: var(--color-text-secondary);
  font-family: var(--font-family-body);
  font-size: var(--font-size-label);
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-label);
}

:is(.form-wrap, .settings-form, .sf-form, .sm-filters) :is(input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]), select, textarea),
:is(.form-control, .sf-input, .sf-select, .sm-filter-input, .sm-filter-select) {
  min-height: var(--control-height);
  width: 100%;
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-control);
  background: var(--color-surface);
  color: var(--color-text);
  font: var(--font-weight-regular) var(--font-size-label)/var(--line-height-label) var(--font-family-body);
  padding: var(--space-2) var(--space-3);
  transition: border-color var(--motion-fast), box-shadow var(--motion-fast), background-color var(--motion-fast);
}

:is(.form-wrap, .settings-form, .sf-form, .sm-filters) :is(input, select, textarea):hover {
  border-color: color-mix(in srgb, var(--color-primary) 55%, var(--color-border));
}

:is(.form-wrap, .settings-form, .sf-form, .sm-filters) :is(input, select, textarea):focus {
  border-color: var(--color-focus);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-focus) 22%, transparent);
}

:is(.form-wrap, .settings-form, .sf-form, .sm-filters) :is(input, select, textarea):disabled {
  background: var(--color-surface-subtle);
  color: var(--color-disabled);
}

:is(.form-help, .sf-help, .sm-filter-help) {
  color: var(--color-text-secondary);
  font-size: var(--font-size-micro);
  line-height: var(--line-height-label);
}

:is(.form-errors, .errorlist, .sf-error) {
  color: var(--color-danger);
  font-size: var(--font-size-label);
}

:is(.form-wrap, .settings-form, .sf-form, .sm-filters) :is(input[type="checkbox"], input[type="radio"]) {
  inline-size: 1rem;
  block-size: 1rem;
  accent-color: var(--color-primary);
}

@media (max-width: 40rem) {
  :is(.form-wrap, .settings-form, .sf-form, .sm-filters) :is(input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]), select, textarea) {
    min-height: var(--control-height-touch);
  }
}