@layer component.state {
  .bit--has-error > .bit__input,
  .bit .bit__input:has(.error) {
    border-color: var(--error, currentColor);
    box-shadow: inset 0 0 0 1px var(--error, currentColor);
  }

  .bit__input {
    transition:
      border-color 0.25s,
      box-shadow 0.25s;
    &:focus-within {
      border-color: var(--primary, currentColor);
      box-shadow: inset 0 0 0 1px var(--primary, currentColor);
    }
  }

  .bit__input > textarea {
    resize: vertical;
  }
}