.form-field__wrapper {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-2);
}

.form-field__wrapper.input-with-inline-label {
  flex-direction: row;
  align-items: center;
  gap: 0;
}

/* Start - Label */

.form-field__label,
.form-field__wrapper--radio-label {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-normal);
  color: var(--gray-700);
  line-height: var(--line-height-tight);
}

.form-field__label--required span[aria-hidden="true"] {
  color: var(--error-700);
}

/* End - Label */

/* Start - Input */

.form-field__input {
  width: 100%;
  height: var(--spacing-10);
  padding: var(--spacing-2) var(--spacing-4);
  border: 1px solid var(--gray-400);
  border-radius: var(--radius-lg);
  font-size: var(--font-size-sm);
  transition: all 0.2s ease;
  color: var(--gray-900);
  background-color: var(--gray-25);
}

.form-field__input:focus {
  outline: none;
  box-shadow: 0 0 0 2px var(--blue-300);
}

.form-field__input:disabled, .form-field__input[readonly] {
  background-color: var(--gray-100);
  border-color: var(--gray-400);
  color: var(--gray-500);
  cursor: not-allowed;
}

/* End - Input */

/* Start - Hint */

.form-field__hint {
  font-size: var(--font-size-xs);
  color: var(--gray-700);
  line-height: var(--line-height-relaxed);
}

/* End - Hint */

/* Start - Error messages */

.form-field__error-messages {
  font-size: var(--font-size-xs);
  color: var(--error-700);
  line-height: var(--line-height-tight);
}

.form-field__error-message {
  font-size: var(--font-size-xs);
  color: var(--error-700);
  line-height: var(--line-height-tight);
}

/* End - Error messages */

/* Start - Radio */

.form-field__radio-group {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  gap: var(--gap-lg);
  margin-top: var(--spacing-4);
}

.form-field__wrapper--radio {
  display: flex;
  align-items: flex-start;
  gap: var(--spacing-3);
  cursor: pointer;
  transition: all 0.2s ease;
  min-width: 30%;
}

.form-field__wrapper--radio-label {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-1);
}

.form-field__label--radio {
  font-size: var(--font-size-sm);
  color: var(--gray-900);
  line-height: var(--line-height-normal);
}

.form-field__input--radio-hint {
  font-size: var(--font-size-xs);
  color: var(--gray-600);
  line-height: var(--line-height-relaxed);
}

/* End - Radio */

/* Start - Switch */

.form-field__wrapper--switch {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: var(--gap-md);
}

.form-field__label--switch {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-normal);
  color: var(--gray-900);
  line-height: var(--line-height-tight);
}

/* End - Switch */