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

// MARK: Variables
$anchor-list-item-disabled-item-opacity: 45%;
$anchor-list-item-muted-opacity: 92%;
$anchor-list-item-parent-active-opacity: 90%;
$anchor-list-item-active-opacity: 100%;

$active-child-item-left-padding: 2px;

$default-anchor-list-item-child-list-item-text-size: 14px;
$default-anchor-list-item-leading-icon-size: 24px;

// MARK: Mixin
@mixin core() {
  .dbx-anchor-list.mat-mdc-nav-list {
    padding-top: 0; // no padding

    // Relays the list's effective item metrics down so a nested child list can size itself relative to
    // its parent. Reads the M3 `--mat-list-*` tokens Angular Material actually consumes — the legacy
    // `--mdc-list-*` names this relay used to read/write are not emitted or read by Material 21, which
    // silently made the `--dbx-anchor-list-item-child-list-item-*` override points dead.
    --dbx-anchor-list-parent-item-icon-size: var(--mat-list-list-item-leading-icon-size, #{$default-anchor-list-item-leading-icon-size});
    --dbx-anchor-list-parent-item-text-size: var(--mat-list-list-item-label-text-size, #{$default-anchor-list-item-child-list-item-text-size});

    .mat-mdc-list-item .mat-icon.mat-mdc-list-item-icon {
      font-size: var(--mat-list-list-item-leading-icon-size, var(--dbx-anchor-list-parent-item-icon-size));
      padding-left: calc((var(--dbx-anchor-list-parent-item-icon-size) - var(--mat-list-list-item-leading-icon-size, var(--dbx-anchor-list-parent-item-icon-size))) / 2); // align the icons
    }

    .dbx-anchor-list-child {
      // text and icon size text is smaller
      --mat-list-list-item-leading-icon-size: var(--dbx-anchor-list-item-child-list-item-icon-size, var(--dbx-anchor-list-parent-item-icon-size));
      --mat-list-list-item-label-text-size: var(--dbx-anchor-list-item-child-list-item-text-size, var(--dbx-anchor-list-parent-item-text-size));

      .mat-mdc-list-item .mdc-list-item__content {
        padding-left: $active-child-item-left-padding;
      }
    }

    .mat-mdc-list-item {
      // inherit color from dbx-color-var
      --mat-list-list-item-hover-leading-icon-color: #{theming.$dbx-color-var};
      --mat-list-list-item-hover-trailing-icon-color: #{theming.$dbx-color-var};
      --mat-list-list-item-hover-label-text-color: #{theming.$dbx-color-var};

      .mat-icon.mat-mdc-list-item-icon.mdc-list-item__start {
        // fix the icon alignment for items that are larger than the expected size
        align-self: center;
        margin-top: 0;
      }

      .mdc-list-item__content .mat-mdc-list-item-unscoped-content.mdc-list-item__secondary-text::before {
        // ensure the custom content follows the text content shortly after
        content: unset;
      }
    }
  }

  .dbx-anchor-list.mat-mdc-nav-list,
  .dbx-list-view .mat-mdc-nav-list {
    --mat-divider-color: color-mix(in srgb, var(--mat-sys-outline-variant) 15%, transparent);

    // Active/selected route rows default to the shared dbx list tone so anchor lists match value lists
    // out of the box, instead of a bare on-surface overlay. A standalone `.dbx-anchor-list` isn't
    // necessarily inside a `.dbx-list`, so fall back to the M3 container tones directly when the
    // `--dbx-list-item-*-color` knobs aren't inherited. Override the `--dbx-anchor-list-item-*` tokens to
    // give a list its own active/selected treatment (the sidenav does, for its accent tint + border).
    --dbx-anchor-list-item-selected-color: var(--dbx-list-item-selected-color, var(--mat-sys-primary-container));
    --dbx-anchor-list-item-selected-on-color: var(--dbx-list-item-selected-on-color, var(--mat-sys-on-primary-container));
    --dbx-anchor-list-item-active-color: var(--dbx-list-item-active-color, var(--dbx-anchor-list-item-selected-color));
    --dbx-anchor-list-item-active-on-color: var(--dbx-list-item-active-on-color, var(--dbx-anchor-list-item-selected-on-color));

    // MARK: Muting
    // items that are not active are muted
    .mat-mdc-list-item {
      opacity: #{$anchor-list-item-muted-opacity};

      &.mdc-list-item--disabled {
        .mat-icon.mat-mdc-list-item-icon.mdc-list-item__start {
          opacity: #{$anchor-list-item-disabled-item-opacity};
        }

        opacity: #{$anchor-list-item-disabled-item-opacity};
      }
    }

    // active route as a parent
    .dbx-anchor-active {
      .mat-mdc-list-item {
        opacity: #{$anchor-list-item-parent-active-opacity};
      }
    }

    // MARK: Anchor Tree
    // Nested child rows get a subtle depth-shading background. This is the BASE tone for a child row, so
    // it is declared BEFORE the selected / active-route rules below: those match the same row at equal
    // specificity (0,4,0), so source order decides — keeping this first lets an active or selected child
    // row layer its own tone on top instead of being masked by the depth shading (which left an active
    // child reading as un-selected: grey background, only the text recolored).
    //
    // The tone is an override point: set `--dbx-anchor-list-item-child-background` (e.g. to `transparent`)
    // to flatten the depth-shade so nested children read like top-level root rows. Because the
    // active/selected rules below win by source order, overriding the token never clears an active child's
    // accent — only the inactive depth-shade. The `.dbx-sidenav-flat` modifier uses this.

    /// Background tone applied to nested (depth > 0) anchor-list child rows to set them apart from
    /// top-level root rows. Override to `transparent` to flatten the nesting depth-shade.
    /// @role color
    /// @intent nested child row background, anchor list depth shade, flatten nested rows
    .dbx-anchor-list-child .mat-mdc-list-item {
      background: var(--dbx-anchor-list-item-child-background, color-mix(in srgb, var(--mat-sys-on-surface) 14%, transparent));
    }

    // selected
    .dbx-anchor-selected {
      .mat-mdc-list-item {
        opacity: #{$anchor-list-item-active-opacity};
        background: var(--dbx-anchor-list-item-selected-color);
        color: var(--dbx-anchor-list-item-selected-on-color);
      }
    }

    // active route
    .dbx-anchor-active-eq {
      .mat-mdc-list-item {
        opacity: #{$anchor-list-item-active-opacity};
        background: var(--dbx-anchor-list-item-active-color);
        color: var(--dbx-anchor-list-item-active-on-color);
      }
    }
  }
}

@mixin theme($theme-config) {
}