.kz-text-input {
  --text-input-bg: var(--color-light);
  --text-input-border: var(--color-light);
  --text-input-border-radius: 6px;

  background-color: var(--text-input-bg);
  border: 1px solid var(--text-input-border);
  border-radius: var(--text-input-border-radius);
  color: var(--color-klezmer-earth);
  display: block;
  font-family: var(--font-main);
  font-size: var(--step-0);
  padding-block: var(--space-3xs);
  padding-inline: var(--space-xs);
  width: 100%;
}
.kz-text-input[data-input-size='large'] {
  padding-block: var(--space-xs);
  padding-inline: var(--space-m);
}
.kz-text-input[data-input-corners='rounded'] {
  border-radius: 50px;
}

.kz-text-input[disabled] {
  background: rgba(255, 255, 255, 0.5);
  cursor: not-allowed;
}

.kz-text-input--error {
  --text-input-border: var(--color-utility-red);
}

.kz-text-input:focus-visible {
  outline-width: 2px;
  outline-style: solid;
  outline-color: var(--color-utility-orange);
  outline-offset: 2px;
}

.kz-text-input-error {
  color: var(--color-utility-red);
  line-height: var(--line-height-condensed);
  margin-block: var(--space-2xs) 0;
}