@use '../../../styles/_globals.scss' as *;

// THEME AUTHORS: do NOT apply `backdrop-filter`, `filter`, `transform`,
// `perspective`, `contain: paint/layout/strict`, or `will-change` for any of
// those on the :host (magic-side-nav). They establish a new containing block
// for fixed-position descendants — and on mobile the host computes to width:0
// (hostWidthSignal in magic-side-nav.component.ts), which then collapses the
// fixed-positioned drawer (.nav-sidenav) and overlay (.nav-backdrop-mobile)
// to 0 width. The drawer simply won't appear when the user taps the menu.
// Apply glass/blur/tint to `.nav-sidenav` (inner) instead. See velvet.css and
// liquid-glass.css for the correct pattern.
:host {
  --sidenav-width-expanded: var(--side-nav-width, 260px);
  --mobile-breakpoint: 768px;
  --sidenav-transition-duration: var(--transition-duration-m, 0.3s);
  --sidenav-transition-timing: var(--ani-standard-timing, cubic-bezier(0.4, 0, 0.2, 1));
  --mat-menu-item-spacing: 4px;
  --sidenav-border-color: var(--separator-color);

  // Ensure the component itself participates in layout and animates width
  display: block;
  flex: 0 0 auto;
  transition: none;
  will-change: width;
  position: relative;
  z-index: var(--z-side-nav);
}

// Enable host width transition only when toggling compactMode/fullMode
:host(.animate) {
  transition: width var(--sidenav-transition-duration) var(--sidenav-transition-timing);
}

// Disable host transition during resize drags
:host(.resizing) {
  transition: none !important;
}

:host(.initializing),
:host(.initializing) * {
  transition: none !important;
  animation: none !important;
}

:host(.initializing) {
  .nav-sidenav,
  .resize-handle {
    opacity: 0;
  }
}

:host(.initial-shell-enter) {
  .nav-sidenav {
    animation: sidenav-fade-in var(--transition-duration-l) var(--ani-enter-timing) both;
  }
}

:host(.initial-enter) {
  .nav-list,
  .resize-handle {
    animation: sidenav-fade-in var(--transition-duration-l) var(--ani-enter-timing) both;
  }
}

@keyframes sidenav-fade-in {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

// Mobile menu open button (only shows when menu is closed)
.mobile-menu-open {
  display: flex;
  align-items: center;
  justify-content: center;
  position: fixed;
  top: calc(8px + var(--safe-area-top));
  left: 8px;
  background: var(--sidenav-bg);
  border: 1px solid var(--sidenav-border-color);
  border-radius: 8px;
  padding: var(--s);
  cursor: pointer;
  transition: var(--transition-standard);
  color: var(--text-color);

  &:focus,
  &:hover {
    background: var(--sidenav-hover-bg);
  }

  svg {
    color: var(--sidenav-text);
  }
}

// Mobile overlay
.nav-backdrop-mobile {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  background: var(--overlay-bg);
  z-index: var(--z-backdrop, 1001);
  display: block;
  opacity: 1;
}

// Main sidenav
.nav-sidenav {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  width: var(--sidenav-width-expanded);
  background: var(--sidenav-bg);
  border-right: 1px solid var(--sidenav-border-color);
  // Default: don't animate width
  transition: none;
  z-index: 1002;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  -webkit-app-region: no-drag;

  // Slight elevation and clear background for overlay/mobile mode is defined in the mobile block below

  &.animate {
    transition: width var(--sidenav-transition-duration) var(--sidenav-transition-timing);
  }

  &.resizing {
    transition: none !important;
  }

  // When resizing, also suppress label/text transitions inside entries
  &.resizing .nav-label,
  &.resizing .text {
    transition: none !important;
  }

  // Milkglass effect when background image is present (light theme)
  :host-context(.hasBgImage) & {
    background: var(--c-light-50);
    backdrop-filter: blur(20px);
  }

  // Milkglass effect for dark theme with background image
  :host-context(.isDarkTheme.hasBgImage) & {
    background: var(--c-dark-50);
    backdrop-filter: blur(20px) saturate(180%);
  }

  // CompactMode state (desktop)
  &.compactMode {
    scrollbar-width: none;
    scrollbar-gutter: stable both-edges;

    .mode-toggle {
      right: auto;
      left: 50%;
      transform: translateX(-50%);
    }
  }

  // Mobile specific
  &.mobile {
    width: var(--sidenav-width-expanded);
    background: var(--sidenav-bg-mobile);
    box-shadow: 4px 0 16px var(--c-dark-30);
    // Remove CSS transitions - let Angular animations handle it
    transition: none !important;
  }

  :host-context(.hasBgImage:not(.isDarkTheme)) &.mobile {
    background: var(--bg);
  }

  :host-context(body.isNativeMobile) &.mobile {
    top: var(--safe-area-top);
  }

  // Position right
  &.position-right {
    left: auto;
    right: 0;
    border-right: none;
    border-left: 1px solid var(--sidenav-border-color);

    .mode-toggle {
      left: 16px;
      right: auto;
    }

    &.mobile {
      box-shadow: -4px 0 16px var(--c-dark-30);
    }
  }

  // Note: Theme colors are handled by CSS variables above
}

// Sidebar toggle button (desktop)
.mode-toggle {
  --top: 8px;
  display: none;
  position: absolute;
  top: var(--top);
  right: 8px;
  background: transparent;
  border: 1px solid var(--sidenav-border-color);
  border-radius: 6px;
  padding: 6px;
  cursor: pointer;
  transition: var(--transition-standard);
  color: var(--sidenav-text-secondary);
  -webkit-app-region: no-drag;

  :host-context(.isMac.isElectron) & {
    top: calc(var(--top) + var(--mac-title-bar-padding, 0px));
  }

  &.visible {
    display: flex;
    align-items: center;
    justify-content: center;
  }

  &:focus,
  &:hover {
    background: var(--sidenav-hover-bg);
    color: var(--sidenav-text);
  }
}

// Navigation list
.nav-list {
  --pt: 48px;
  list-style: none;
  //padding: 60px var(--s) var(--s2);
  padding: 0;
  padding-top: var(--pt);
  margin: 0;
  min-height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;

  @include mq(xs, max) {
    padding-top: var(--safe-area-top);
    padding-bottom: calc(var(--safe-area-bottom) + var(--bottom-nav-height));
  }

  :host-context(.isMac.isElectron) & {
    padding-top: calc(var(--pt) + var(--mac-title-bar-padding, 0px));
  }
}

.nav-item {
  margin-bottom: var(--s-quarter);
  -webkit-app-region: no-drag;

  &.has-children {
    margin-bottom: var(--s-half);
  }
}

// Separator styling
.nav-separator {
  height: 1px;
  background: var(--sidenav-border-color);
  margin: var(--s2) var(--s2);
  border: none;
  opacity: 1;
  flex-shrink: 0;
  -webkit-app-region: no-drag;
}

// Resize handle (now positioned relative to host component)
.resize-handle {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 4px;
  cursor: col-resize;
  z-index: 1003; // Above the nav-sidenav
  transition: background-color 0.2s ease;

  &.position-left {
    right: -2px;
  }

  &.position-right {
    left: -2px;
  }

  &:focus,
  &:hover {
    background-color: var(--sidenav-active-text);
  }

  &:active {
    background-color: var(--sidenav-active-text);
  }
}
