@use './theming';
@use './curated-colors' as curated;

// Includes all theming config
@mixin root-variables($root-selector, $theme-config) {
  $initial-top-banner-height: theming.get-dbx-layout-top-banner-height($theme-config);
  $initial-bottom-banner-height: theming.get-dbx-layout-bottom-banner-height($theme-config);

  #{$root-selector} {
    // variables
    #{theming.$top-banner-height-var}: $initial-top-banner-height;
    #{theming.$bottom-banner-height-var}: $initial-bottom-banner-height;

    #{theming.$page-navbar-height-var}: theming.get-dbx-layout-page-navbar-height($theme-config);
    #{theming.$content-navbar-height-var}: theming.get-dbx-layout-content-navbar-height($theme-config);

    // Section-page header height knob; defaults to the content navbar height. Declared at :root so
    // its value is computed in an outer scope before .dbx-section-page re-points the navbar height
    // to it (a self-referential fallback would otherwise create a custom-property reference cycle).
    // Overriding it resizes the page header AND its reserved content space together
    // (see _section.scss .dbx-section-page).
    --dbx-section-page-header-height: var(--dbx-content-navbar-height);

    #{theming.$box-max-width-var}: theming.get-dbx-layout-box-max-width($theme-config);
    #{theming.$content-max-width-var}: theming.get-dbx-layout-content-max-width($theme-config);

    #{theming.$padding-0-var}: theming.get-dbx-layout-padding($theme-config, 0);
    #{theming.$padding-1-var}: theming.get-dbx-layout-padding($theme-config, 1);
    #{theming.$padding-2-var}: theming.get-dbx-layout-padding($theme-config, 2);
    #{theming.$padding-3-var}: theming.get-dbx-layout-padding($theme-config, 3);
    #{theming.$padding-4-var}: theming.get-dbx-layout-padding($theme-config, 4);
    #{theming.$padding-5-var}: theming.get-dbx-layout-padding($theme-config, 5);

    #{theming.$shadow-gutter-var}: 4px;

    #{theming.$two-column-left-width-var}: theming.get-dbx-two-column-left-width($theme-config);

    #{theming.$dbx-app-height-additional-offset-var}: 0px;
    #{theming.$dbx-page-height-additional-offset-var}: 0px;
    #{theming.$dbx-content-height-additional-offset-var}: 0px;

    // M3 shape-scale system tokens. `mat.theme()` emits these, but the `mat.define-theme()`-based
    // API does not — emit them so `var(--mat-sys-corner-*)` references resolve.
    // Values mirror @angular/material/core/tokens/m3/_md-sys-shape.scss.
    --mat-sys-corner-none: 0;
    --mat-sys-corner-extra-small: 4px;
    --mat-sys-corner-extra-small-top: 4px 4px 0 0;
    --mat-sys-corner-small: 8px;
    --mat-sys-corner-medium: 12px;
    --mat-sys-corner-large: 16px;
    --mat-sys-corner-large-start: 16px 0 0 16px;
    --mat-sys-corner-large-end: 0 16px 16px 0;
    --mat-sys-corner-large-top: 16px 16px 0 0;
    --mat-sys-corner-extra-large: 28px;
    --mat-sys-corner-extra-large-top: 28px 28px 0 0;
    --mat-sys-corner-full: 9999px;

    #{theming.$dbx-content-pit-rounded-border-radius-var}: var(--mat-sys-corner-medium);
    #{theming.$dbx-corners-border-radius-var}: var(--mat-sys-corner-medium);
    #{theming.$dbx-content-pit-scrollable-max-height-var}: 140px;

    #{theming.$dbx-avatar-size-var}: theming.get-dbx-avatar-size($theme-config);
    #{theming.$dbx-avatar-large-size-var}: theming.get-dbx-avatar-large-size($theme-config);
    #{theming.$dbx-avatar-small-size-var}: theming.get-dbx-avatar-small-size($theme-config);

    // root height
    &.dbx-style-root {
      display: block;
      overflow: hidden;
      @include theming.app-height();
    }

    // content sizing/heights
    /**
    These heights rely on the variable set by the dbx height related mixins (app-height(), page-height(), content-height(), etc.).
    */
    .dbx-app-height {
      height: var(theming.$dbx-app-height-var);
    }

    .dbx-app-height-max {
      max-height: var(theming.$dbx-app-height-var);
    }

    .dbx-page-height {
      height: var(theming.$dbx-page-height-var);
    }

    .dbx-page-height-max {
      max-height: var(theming.$dbx-page-height-var);
    }

    .dbx-content-height {
      height: var(theming.$dbx-content-height-var);
    }

    .dbx-content-height-max {
      max-height: var(theming.$dbx-content-height-var);
    }

    .dbx-nested-content-height {
      height: var(theming.$dbx-nested-content-height-var);
    }

    .dbx-nested-content-height-max {
      max-height: var(theming.$dbx-nested-content-height-var);
    }
  }
}

/**
  Sets --dbx-* color variables by aliasing --mat-sys-* system variables
  emitted by the Material theme. Custom colors (notice, success, ok) still
  come from the dbx theme config since they have no Material equivalent.
*/
@mixin root-theme-color-variables($root-selector, $theme-config) {
  #{$root-selector} {
    // Primary/secondary/tertiary/accent/warn - alias from mat system variables
    #{theming.$dbx-primary-color-var}: var(--mat-sys-primary);
    #{theming.$dbx-primary-color-contrast-var}: var(--mat-sys-on-primary);

    #{theming.$dbx-secondary-color-var}: var(--mat-sys-secondary);
    #{theming.$dbx-secondary-color-contrast-var}: var(--mat-sys-on-secondary);

    #{theming.$dbx-tertiary-color-var}: var(--mat-sys-tertiary);
    #{theming.$dbx-tertiary-color-contrast-var}: var(--mat-sys-on-tertiary);

    // accent is an alias for tertiary
    #{theming.$dbx-accent-color-var}: var(--mat-sys-tertiary);
    #{theming.$dbx-accent-color-contrast-var}: var(--mat-sys-on-tertiary);

    #{theming.$dbx-warn-color-var}: var(--mat-sys-error);
    #{theming.$dbx-warn-color-contrast-var}: var(--mat-sys-on-error);

    // Custom dbx colors - still from theme config (no --mat-sys-* equivalent)
    #{theming.$dbx-notice-color-var}: theming.get-dbx-notice-color($theme-config);
    #{theming.$dbx-notice-color-contrast-var}: var(--mat-sys-surface);

    #{theming.$dbx-success-color-var}: theming.get-dbx-success-color($theme-config);
    #{theming.$dbx-success-color-contrast-var}: var(--mat-sys-surface);

    #{theming.$dbx-ok-color-var}: theming.get-dbx-ok-color($theme-config);
    #{theming.$dbx-ok-color-contrast-var}: var(--mat-sys-surface);

    // Grey - foreground text / background
    #{theming.$dbx-grey-color-var}: var(--mat-sys-outline);
    #{theming.$dbx-grey-color-contrast-var}: var(--mat-sys-surface);

    // Disabled - disabled text / background
    #{theming.$dbx-disabled-color-var}: var(--mat-sys-outline-variant);
    #{theming.$dbx-disabled-color-contrast-var}: var(--mat-sys-outline);

    // Default - foreground text / surface background
    #{theming.$dbx-default-color-var}: var(--mat-sys-on-surface);
    #{theming.$dbx-default-color-contrast-var}: var(--mat-sys-surface-container);

    // Surface and outline variables
    #{theming.$dbx-surface-color-var}: var(--mat-sys-surface);
    #{theming.$dbx-surface-container-color-var}: var(--mat-sys-surface-container);
    #{theming.$dbx-on-surface-color-var}: var(--mat-sys-on-surface);
    #{theming.$dbx-on-surface-variant-color-var}: var(--mat-sys-on-surface-variant);
    #{theming.$dbx-outline-color-var}: var(--mat-sys-outline);
    #{theming.$dbx-outline-variant-color-var}: var(--mat-sys-outline-variant);
    #{theming.$dbx-error-color-var}: var(--mat-sys-error);

    // Shared border system — base divider color + opacity knob, blended into a single
    // semi-transparent border color. Components apply var(--dbx-border-color-current);
    // override --dbx-border-color or --dbx-border-opacity (globally here, or locally on a
    // scope) and the computed value recomputes automatically at the point of use.
    #{theming.$dbx-border-color-var}: var(--mat-sys-outline-variant);
    #{theming.$dbx-border-opacity-var}: 60%;
    #{theming.$dbx-border-color-current-var}: color-mix(in srgb, var(--dbx-border-color) var(--dbx-border-opacity), transparent);

    // Shared divider color — defaults to the computed semi-transparent border so dbx-table-view,
    // dbx-two-column, dbx-calendar (and any other) dividers stay consistent. Override here for an
    // app-wide divider retint, or override a component's own divider token for a one-off.
    #{theming.$dbx-divider-color-var}: var(--dbx-border-color-current);

    // Curated color set (avatar initials, etc.) — selects light/dark values from the theme's theme-type.
    @include curated.curated-color-variables($theme-config);
  }
}