.input {
  width: 100%;
  padding: 10px 14px;
  font-family: var(--font-family);
  font-size: 16px;
  line-height: 150%;
  color: var(--colors-text-text-primary);
  background: var(--colors-background-bg-primary);
  border: 1px solid var(--colors-border-border-primary);
  border-radius: 8px;
  box-shadow: 0 1px 2px 0 rgba(16, 24, 40, 0.05);
  transition: all 200ms;
}

.input::placeholder {
  color: var(--colors-text-text-placeholder);
}

.input:hover {
  border-color: var(--colors-brand-500);
}

.input:focus {
  outline: none;
  border-color: var(--colors-brand-500);
  box-shadow: 0 0 0 4px var(--colors-brand-100);
}

.input:disabled {
  background-color: var(--colors-background-bg-disabled);
  border-color: var(--colors-border-border-disabled);
  color: var(--colors-text-text-disabled);
  cursor: not-allowed;
}

.input[readonly] {
  background-color: var(--colors-background-bg-readonly);
  border-color: var(--colors-border-border-readonly);
  color: var(--colors-text-text-readonly);
  cursor: default;
}

.input:invalid {
  border-color: var(--colors-error-500);
}

.input:invalid:focus {
  box-shadow: 0 0 0 4px var(--colors-error-100);
}

.input.focused {
  z-index: 1;
}