@use '../../style/theming';
@use '../style/style';

// MARK: Variables
$pagebar-height-var: theming.$page-navbar-height-var;
$pagebar-height: theming.$page-navbar-height;
$content-navbar-height-var: theming.$content-navbar-height-var;
$content-navbar-height: theming.$content-navbar-height;
$bar-vertical-padding: theming.$padding-1;
$bar-fixed-height: 40px;

// MARK: Mixin
@mixin core() {
  .dbx-pagebar.mat-toolbar {
    height: var(--dbx-pagebar-height, #{$pagebar-height});
  }

  .dbx-content-navbar {
    height: $content-navbar-height;
    max-height: $content-navbar-height;
  }

  /// @dbx-utility bar
  /// @intent compact horizontal bar — centered flex row with body-small typography (used for status/info strips)
  /// @role layout
  /// @see-also dbx-bar-background, dbx-bar-fixed-height, dbx-flex-bar
  .dbx-bar {
    box-sizing: border-box;
    padding: $bar-vertical-padding;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--mat-sys-body-small-size);
  }

  .dbx-bar {
    color: var(--mat-sys-on-surface);
  }

  // Colored bar surface. `[dbxColor]` on the host provides the tokens + the
  // `.dbx-color` marker; the bar paints from them here, scoped on the marker so
  // a bar nested inside a `[dbxColor]` section doesn't repaint from inherited
  // tokens. Mirrors the `mat-card.dbx-color` model.
  // `:not(.dbx-default)` guard: `[dbxColor]` always adds the `.dbx-color` marker,
  // and a nullish color resolves to the `dbx-default` token class (no
  // `--dbx-bg-color-current`), so the guard keeps an uncolored bar from painting.
  .dbx-bar.dbx-color:not(.dbx-default) {
    @include style.dbx-color-surface();

    &.dbx-color-tonal {
      color: var(#{theming.$dbx-bg-color-var});
    }
  }

  // `<dbx-bar-header>` forwards a host-level `[dbxColor]` down to its inner
  // `<dbx-bar>`: the `.dbx-color` marker + tokens land on the header host (tokens
  // inherit), so paint the inner bar here. Scoped on the header marker so only a
  // directly-colored header paints.
  .dbx-bar-header.dbx-color:not(.dbx-default) .dbx-bar {
    @include style.dbx-color-surface();
  }

  .dbx-bar-header.dbx-color.dbx-color-tonal:not(.dbx-default) .dbx-bar {
    color: var(#{theming.$dbx-bg-color-var});
  }

  /// @dbx-utility bar-background
  /// @intent paint a `.dbx-bar` with the `--mat-sys-surface-container` background
  /// @role layout
  /// @see-also dbx-bar
  .dbx-bar-background {
    background: var(--mat-sys-surface-container);
    color: var(--mat-sys-on-surface);
  }

  /// @dbx-utility bar-fixed-height
  /// @intent pin a `.dbx-bar` to a fixed 40px height with overflow clipped
  /// @role layout
  /// @see-also dbx-bar
  .dbx-bar-fixed-height {
    height: $bar-fixed-height;
    overflow: hidden;
  }

  // MARK: Bar Colors
  // Colored pagebar surface. `[dbxColor]` on the `<dbx-pagebar>` /
  // `<dbx-sidenav-pagebar>` host provides the tokens + the `.dbx-color` marker
  // (tokens inherit); map the inner `mat-toolbar`'s Material color tokens to them.
  // Scoped on the host marker so only a directly-colored pagebar paints.
  dbx-pagebar.dbx-color mat-toolbar,
  dbx-sidenav-pagebar.dbx-color mat-toolbar {
    --mat-toolbar-container-background-color: color-mix(in srgb, var(#{theming.$dbx-bg-color-var}) var(#{theming.$dbx-bg-tone-var}, 100%), transparent);
    --mat-toolbar-container-text-color: var(#{theming.$dbx-color-var});
  }

  // DEPRECATED back-compat: the `.dbx-bar-{color}` classes were previously applied
  // by `DbxPagebarComponent`'s `color` input (now removed in favor of `[dbxColor]`).
  // Kept for downstream templates that still apply them directly.
  // Uses Material toolbar CSS tokens for background and text color.
  /// @dbx-utility bar-primary
  /// @intent paint a `mat-toolbar`/`.dbx-pagebar` with the `--dbx-primary-color` palette via Material's toolbar tokens
  /// @role layout
  /// @see-also dbx-bar-accent, dbx-bar-warn
  .dbx-bar-primary {
    --mat-toolbar-container-background-color: var(--dbx-primary-color);
    --mat-toolbar-container-text-color: var(--dbx-primary-color-contrast);
  }

  /// @dbx-utility bar-accent
  /// @intent paint a `mat-toolbar`/`.dbx-pagebar` with the `--dbx-accent-color` palette via Material's toolbar tokens
  /// @role layout
  /// @see-also dbx-bar-primary, dbx-bar-warn
  .dbx-bar-accent {
    --mat-toolbar-container-background-color: var(--dbx-accent-color);
    --mat-toolbar-container-text-color: var(--dbx-accent-color-contrast);
  }

  /// @dbx-utility bar-warn
  /// @intent paint a `mat-toolbar`/`.dbx-pagebar` with the `--dbx-warn-color` palette via Material's toolbar tokens
  /// @role layout
  /// @see-also dbx-bar-primary, dbx-bar-accent
  .dbx-bar-warn {
    --mat-toolbar-container-background-color: var(--dbx-warn-color);
    --mat-toolbar-container-text-color: var(--dbx-warn-color-contrast);
  }

  /// @dbx-utility pagebar-hide
  /// @intent hide the direct-child `.dbx-pagebar` and reset the `--dbx-pagebar-height` layout token to `0px` so child sidenav heights recalculate (nested sidenav pagebars are restored)
  /// @role state
  .dbx-pagebar-hide {
    // Reset pagebar height for layout calculations (page height = app height - navbar height)
    #{$pagebar-height-var}: 0px;

    // Only hide direct-descendant pagebars, not nested ones within child sidenavs
    > dbx-sidenav-pagebar,
    > .dbx-pagebar {
      display: none;
    }

    // Restore the pagebar height variable inside nested sidenav containers
    // so their pagebars render at the correct height
    .dbx-sidenav mat-sidenav-content {
      #{$pagebar-height-var}: var(--dbx-pagebar-height, 52px);
    }
  }
}

@mixin theme($theme-config) {
}