// =============================================================================
// Form Group
// =============================================================================

@use '../variables' as *;

.form-group {
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
}

.form-group__label {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  font-size: $font-size-sm;
  font-weight: $font-weight-medium;
  color: rgb(var(--color-text-primary));
}

.form-group__required {
  color: $error-500;
  font-weight: $font-weight-normal;
}

.form-group__hint {
  font-size: $font-size-xs;
  line-height: $line-height-xs;
  color: rgb(var(--color-text-muted));
}

.form-group__error {
  font-size: $font-size-xs;
  line-height: $line-height-xs;
  color: $error-500;

  .dark & {
    color: $error-400;
  }
}

// Horizontal layout
.form-group--horizontal {
  flex-direction: row;
  align-items: center;
  gap: 1rem;

  .form-group__label {
    min-width: 10rem;
    flex-shrink: 0;
  }
}

// Inline group (checkboxes, radios)
.form-group--inline {
  flex-direction: row;
  align-items: center;
  gap: 0.5rem;
}
