/*
 * Bootstrap form defaults.
 *
 * Opinionated host-framework defaults for Bootstrap apps. Library SCSS uses
 * `var(--df-name, structural-fallback)` for layout-essential vars so forms
 * render usefully without any opt-in. These mixins layer in the rest —
 * color, typography, focus accent — that a Bootstrap app expects.
 *
 * Usage (in your app's global stylesheet):
 *
 *   @use '@ng-forge/dynamic-forms-bootstrap/styles/defaults' as df;
 *
 *   :root {
 *     @include df.apply-bootstrap-form-defaults;
 *   }
 */

@mixin form-grid-defaults {
  --df-grid-columns: 12;
  --df-grid-gap: 0.5rem;
  --df-grid-row-gap: 0.5rem;

  --df-grid-gap-sm: 0.5rem;
  --df-grid-gap-md: 0.5rem;
  --df-grid-gap-lg: 0.5rem;
  --df-grid-gap-xl: 0.5rem;

  --df-grid-row-gap-sm: 0.5rem;
  --df-grid-row-gap-md: 0.5rem;
  --df-grid-row-gap-lg: 0.5rem;
  --df-grid-row-gap-xl: 0.5rem;

  --df-array-item-gap: var(--df-grid-row-gap);

  --df-focus-color: var(--bs-primary, #0d6efd);
}

@mixin form-page-defaults {
  --df-page-custom-spacing: 1.5rem;
  --df-page-transition-duration: 0.3s;
  --df-page-transition-timing: ease-in-out;
  --df-page-slide-offset: -10px;
}

@mixin form-bootstrap-defaults {
  --df-field-gap: 0.5rem;
  --df-label-font-weight: 500;
  --df-label-color: inherit;
  --df-hint-color: var(--bs-secondary-color, #6c757d);
  --df-hint-font-size: 0.875rem;
  --df-error-color: var(--bs-danger, #dc3545);
  --df-error-font-size: 0.875rem;

  --df-bs-field-margin-bottom: 1rem;
  --df-bs-field-with-hint-margin-bottom: 0.5rem;
  --df-bs-hint-margin-top: 0.25rem;
}

@mixin apply-bootstrap-form-defaults {
  @include form-grid-defaults;
  @include form-page-defaults;
  @include form-bootstrap-defaults;
}