.text-field {
  display: flex;
  flex-direction: column;
  position: relative;
}

.text-field__label {
  margin-top: 1rem;
  margin-bottom: 0.5rem;
  color: var(--black);
  transition: all 0.3s ease;
  font-size: 0.9rem;
}

.text-field__input {
  padding: 0.625rem;
  border: 0.06rem solid #ccc;
  border-radius: 0.3125rem;
  transition: all 0.3s ease;
  font-size: 1rem;
  width: 100%;
}

.text-field--error .text-field__input {
  border-color: var(--error-color);
}

.text-field__helper-text {
  font-size: 0.75rem;
  color: var(--black);
  margin-top: 0.5rem; /* Spacing between the input and helper text */
  transition: all 0.3s ease;
}

.text-field--error .text-field__helper-text {
  color: var(--error-color);
}