/* This file containes base styles for all inputs*/
:where(input, textarea, select) {
  border: var(--border-width-primary) solid var(--color-border-secondary);
  font-family: var(--font-family-text);
  font-size: 0.875rem;
  color: var(--color-text-value);
  outline: none;
  background: var(--white);
}

/* Error */
:where(:is(input, textarea, select).error:not(:checked)) {
  border-color: var(--color-border-interactive-error);
}

/* Hover state */
:where(:is(input, textarea, select):is(:hover, .hover)) {
  border-color: var(--color-border-interactive-hover);
}

/* Focus-visible state */
:where(:is(input, textarea, select):is(:focus-visible, .focus-visible)) {
  box-shadow: var(--border-interactive-focus);
  border-color: var(--color-border-interactive-hover);
}

/* Disabled */
:where(:is(input, textarea, select):is(:disabled, .disabled)) {
  cursor: not-allowed;
  color: var(--color-text-disabled);
  background-color: var(--color-background-disabled);
  box-shadow: none;
  border-color: var(--color-border-disabled);
}

:where(.label > :is(input, textarea, select)),
:where(.label + :is(input, textarea, select)) {
  margin-top: var(--space-2x);
}