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

// MARK: Variables
$width: 240px;
$mobile-width: 80vw;
$icon-only-width: 65px;
$mat-mdc-list-item-height: 48px;
$mat-mdc-list-item-icon-padding: 16px;

$default-active-border-left-width: 2px;

$dbx-sidenav-nav-bottom-padding: 24px;
$faded-text-transparent-color: 0.2;
$active-background-transparent-color: 0.93;

// MARK: Mixin
@mixin core() {
  .dbx-sidenav {
    height: 100%;

    > mat-sidenav {
      width: var(--dbx-sidenav-width, #{$width});
      border-top-right-radius: var(--dbx-sidenav-top-corner-radius, var(--mat-sys-corner-extra-large, 24px));
      border-bottom-right-radius: var(--dbx-sidenav-bottom-corner-radius, var(--mat-sys-corner-extra-large, 24px));

      // Uniform nav items (default). A sidenav is typically assembled from differently-created nav
      // elements — top-level root anchors and nested child anchors in the `[anchors]` tree, plus separate
      // `<dbx-anchor-list>` lists dropped into the `[top]` / `[bottom]` content slots. Left to the generic
      // anchor-list styling these would NOT match up (a separate list rounds all four corners as floating
      // pills, and nested child rows carry a depth-shade). The sidenav normalizes them so every element
      // reads as one consistent nav: nested children drop the depth-shade here (the active/selected rules
      // override this token by source order, so the active route still keeps its accent), the right-only
      // flush-left corner shape is applied to all drawer anchor lists in `_list.scss`, and child content is
      // aligned with root rows below. Apps can restore the depth-shade per list via the token if desired.
      --dbx-anchor-list-item-child-background: transparent;

      .mat-drawer-inner-container {
        display: flex;
        flex-direction: column;
        box-sizing: border-box;
        padding-bottom: var(--dbx-padding-5);
      }

      .dbx-anchor-list.mat-mdc-nav-list {
        .mat-mdc-list-item {
          height: $mat-mdc-list-item-height;

          &.mdc-list-item--disabled {
            user-select: none;
          }
        }

        // Align nested child content with root rows (cancel the small left nudge `_anchorlist.scss` adds
        // to child rows) so a nested child reads like a top-level root item.
        .dbx-anchor-list-child .mat-mdc-list-item .mdc-list-item__content {
          padding-left: 0;
        }

        // directly active links have a side border indicator
        .dbx-anchor-active-eq,
        .dbx-anchor-list-child .dbx-anchor-active {
          .mat-mdc-list-item {
            .mdc-list-item__content {
              margin-left: calc(#{$mat-mdc-list-item-icon-padding} - var(--dbx-sidenav-active-child-item-border-width, #{$default-active-border-left-width}));
            }

            &.mdc-list-item--with-leading-icon {
              .mdc-list-item__content {
                margin-left: 0; // cancel padding since the icon will be padded instead.
              }

              .mat-mdc-list-item-icon {
                // Offset the added border by clearing the default padding width (4px)
                margin-left: calc(#{$mat-mdc-list-item-icon-padding} - var(--dbx-sidenav-active-child-item-border-width, #{$default-active-border-left-width}));
              }
            }
          }
        }

        .dbx-anchor-list-child .dbx-anchor-active .mat-mdc-list-item,
        .dbx-anchor-list-child .dbx-anchor-active-eq .mat-mdc-list-item {
          padding-left: calc(#{anchorlist.$active-child-item-left-padding} - var(--dbx-sidenav-active-child-item-border-width, #{$default-active-border-left-width}));
        }
      }
    }

    &.dbx-sidenav-mobile {
      > mat-sidenav {
        width: var(--dbx-sidenav-mobile-width, #{$mobile-width});
      }
    }

    &.dbx-sidenav-icon {
      > mat-sidenav {
        width: var(--dbx-sidenav-icon-width, #{$icon-only-width});
      }

      &.dbx-sidenav-start > mat-sidenav-content {
        margin-left: var(--dbx-sidenav-icon-width, #{$icon-only-width});
      }

      &.dbx-sidenav-end > mat-sidenav-content {
        margin-right: var(--dbx-sidenav-icon-width, #{$icon-only-width});
      }
    }

    &.dbx-sidenav-full {
      > mat-sidenav {
        width: var(--dbx-sidenav-width, #{$width});
      }

      &.dbx-sidenav-start > mat-sidenav-content {
        margin-left: var(--dbx-sidenav-width, #{$width});
      }

      &.dbx-sidenav-end > mat-sidenav-content {
        margin-right: var(--dbx-sidenav-width, #{$width});
      }
    }

    .mat-sidenav .mat-drawer-inner-container {
      overflow-y: auto !important;
    }

    .dbx-sidenav-nav {
      .dbx-sidenav-nav-end {
        padding-bottom: $dbx-sidenav-nav-bottom-padding;
      }
    }

    .mat-mdc-nav-list.dbx-anchor-list {
      padding-top: 0;
    }
  }

  .dbx-sidenav-page {
    height: 100%;
    max-height: 100%;
    overflow: hidden;

    .dbx-sidenav-page-content {
      overflow: auto;
    }
  }

  // MARK: Theming
  // Available CSS custom properties for dbx-sidenav:
  //
  // Layout:
  //   --dbx-sidenav-width              Full-mode drawer width (default: 240px)
  //   --dbx-sidenav-mobile-width       Mobile overlay drawer width (default: 80vw)
  //   --dbx-sidenav-icon-width         Icon rail drawer width (default: 65px)
  //
  // Shape:
  //   --dbx-sidenav-top-corner-radius     Top trailing-edge corner radius (default: --mat-sys-corner-extra-large / 24px)
  //   --dbx-sidenav-bottom-corner-radius  Bottom trailing-edge corner radius (default: --mat-sys-corner-extra-large / 24px)
  //
  // Drawer colors:
  //   --dbx-sidenav-background         Drawer background color
  //   --dbx-sidenav-text-color         Drawer text color
  //   --dbx-sidenav-divider-color      Drawer border/divider color
  //
  // Active item:
  //   --dbx-sidenav-active-accent                      Active item accent color
  //   --dbx-sidenav-active-item-background             Active root item background
  //   --dbx-sidenav-active-child-item-background       Active child item background
  //   --dbx-sidenav-active-child-item-border-width     Active item border indicator width (default: 2px)
  //
  // Scrim:
  //   --dbx-sidenav-scrim-color        Backdrop/scrim color for overlay mode

  .dbx-sidenav {
    // scrim color
    --mat-sidenav-scrim-color: var(--dbx-sidenav-scrim-color, color-mix(in srgb, var(--mat-sys-neutral-variant20) 40%, transparent));

    mat-sidenav.mat-drawer {
      --mat-sidenav-container-text-color: var(--dbx-sidenav-text-color, var(--dbx-color-current, var(--mat-sys-on-surface)));
      --mat-sidenav-container-divider-color: var(--dbx-sidenav-divider-color, transparent);
      background: var(--dbx-sidenav-background, var(--dbx-bg-color-current));

      .dbx-anchor-list.mat-mdc-nav-list {
        --dbx-sidenav-active-accent: color-mix(in srgb, var(--dbx-accent-color) 65%, var(--mat-sys-surface));

        // The sidenav opts out of the default solid list tone (which anchor lists now inherit from
        // `--dbx-list-item-active-color`) in favor of its subtle accent overlay + side-border treatment.
        // Define the anchor-list active/selected override tokens here so the base `_anchorlist.scss` rows
        // pick up the accent tint, and pin the on-color to the drawer text color so the active label is
        // not recolored to the list's on-primary-container tone. The explicit root/child background +
        // border rules below still apply on top (they distinguish root vs child and add the indicator).
        --dbx-anchor-list-item-active-color: var(--dbx-sidenav-active-item-background, color-mix(in srgb, var(--dbx-sidenav-active-accent) 12%, transparent));
        --dbx-anchor-list-item-active-on-color: var(--dbx-sidenav-text-color, var(--dbx-color-current, var(--mat-sys-on-surface)));
        --dbx-anchor-list-item-selected-color: var(--dbx-anchor-list-item-active-color);
        --dbx-anchor-list-item-selected-on-color: var(--dbx-anchor-list-item-active-on-color);

        .dbx-anchor-active {
          .mat-mdc-list-item {
            .mat-mdc-list-item-icon {
              color: var(--dbx-sidenav-active-accent);
            }
          }
        }

        .dbx-anchor-list-root .dbx-anchor-active .mat-mdc-list-item {
          background: var(--dbx-sidenav-active-item-background, color-mix(in srgb, var(--dbx-sidenav-active-accent) 12%, transparent));
        }

        // directly active links have a side border indicator
        .dbx-anchor-active-eq,
        .dbx-anchor-list-child .dbx-anchor-active {
          .mat-mdc-list-item {
            border-left: var(--dbx-sidenav-active-child-item-border-width, #{$default-active-border-left-width}) solid var(--dbx-sidenav-active-accent);

            .mat-mdc-list-item-icon {
              --mat-list-list-item-leading-icon-color: var(--dbx-sidenav-active-accent);
            }
          }
        }

        // end-position sidenavs use border-right instead of border-left
        .dbx-sidenav-end & {
          .dbx-anchor-active-eq,
          .dbx-anchor-list-child .dbx-anchor-active {
            .mat-mdc-list-item {
              border-left: none;
              border-right: var(--dbx-sidenav-active-child-item-border-width, #{$default-active-border-left-width}) solid var(--dbx-sidenav-active-accent);
            }
          }
        }

        .dbx-anchor-list-child .dbx-anchor-active .mat-mdc-list-item,
        .dbx-anchor-list-child .dbx-anchor-active-eq .mat-mdc-list-item {
          background: var(--dbx-sidenav-active-child-item-background, color-mix(in srgb, var(--dbx-sidenav-active-accent) 12%, transparent));
        }
      }
    }
  }
}

@mixin theme($theme-config) {
}