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

// Folder expand/collapse icon animation
.folder-icon {
  transition: transform 0.3s ease-in-out;

  &.expanded {
    transform: rotate(90deg);
  }

  &.collapsed {
    transform: rotate(0deg);
  }
}

:host {
  display: flex !important;
  align-items: stretch;
  position: relative;
  width: 100%;
  color: var(--sidenav-text);

  button:first-of-type {
    white-space: nowrap;
    overflow: hidden;
    flex: 1;
    min-width: 0;
    font-family: inherit;
    font-weight: 400;
    letter-spacing: normal;
    color: var(--sidenav-text);

    // to make space for the task-count
    &.has-tasks {
      padding-right: var(--s5);
    }

    .nav-label {
      color: inherit;
      font: inherit;
      letter-spacing: inherit;
      @include truncateText();
      // smooth collapse/expand for title
      display: inline-block;
      max-width: 100%;
      transition:
        opacity var(--transition-duration-m, 0.25s) var(--ani-standard-timing),
        max-width var(--transition-duration-m, 0.25s) var(--ani-standard-timing),
        margin var(--transition-duration-m, 0.25s) var(--ani-standard-timing);
    }

    .ico-wrapper {
      position: relative;
    }
  }

  .additional-btn {
    flex-shrink: 0;
    width: 40px !important;
    min-width: 40px !important;
  }

  &.isHidden {
    display: none !important;
  }
}

:host.isActiveContext button {
  font-weight: normal;
}

@media (hover: hover) {
  :host:hover .task-count {
    display: none !important;
  }
}

.task-count {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  line-height: 1;
  text-align: center;
  font-size: 10px;
  right: 16px;
  display: flex;
  align-items: center;
  color: var(--text-color-muted);
  // avoid affecting drag handle
  pointer-events: none;
}

// On touch devices the .additional-btn is always visible, so let the counter
// flow inline beside it instead of overlapping.
:host-context(.isTouchPrimary) {
  .task-count {
    position: static;
    transform: none;
    padding: 0 var(--s);
    flex-shrink: 0;
    pointer-events: auto;
  }

  button:first-of-type.has-tasks {
    padding-right: var(--s);
  }
}

// Active state visuals - ensure they override Angular Material styles
//button[mat-menu-item].nav-link[routerlinkactive="active"],
button[mat-menu-item].nav-link.active {
  color: var(--sidenav-active-text) !important;
  background: var(--sidenav-item-active-bg) !important;

  .nav-label {
    color: var(--sidenav-active-text) !important;
  }

  .nav-icon {
    color: var(--sidenav-active-text) !important;
  }
}

// Styling when used inside magic-side-nav: rely on global .nav-link/.nav-child-link
// Only keep adjustments for the additional button here
:host.variant-nav {
  .g-multi-btn-wrapper {
    background-color: transparent;
  }

  .additional-btn {
    color: var(--sidenav-text-secondary);

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

.nav-label.label-hidden,
.text.label-hidden {
  opacity: 0;
  max-width: 0;
  margin-left: 0 !important;
  pointer-events: none;
}

.drag-handle {
  /* Firefox 1.5-26 */
  position: relative;
  @include grabCursor();

  &:after {
    content: '';
    position: absolute;
    top: calc(-1 * var(--s));
    left: calc(-1 * var(--s));
    right: calc(-1 * var(--s));
    bottom: calc(-1 * var(--s));
  }
}

// Standard navigation row styles (simplified to be the only style)
.nav-link {
  display: flex;
  align-items: center;
  gap: var(--s2);
  padding: var(--s) var(--s2);
  color: var(--sidenav-text);
  text-decoration: none;
  border-radius: 6px;
  transition: var(--transition-standard);
  cursor: pointer;
  background: transparent;
  border: none;
  width: 100%;
  text-align: left;
  font-size: 14px;
  font-family: inherit;
  font-weight: 400;
  letter-spacing: normal;

  // Override Angular Material mat-menu-item defaults so buttons/anchors match our palette
  &[mat-menu-item] {
    color: var(--sidenav-text) !important;

    .mat-mdc-menu-item-text {
      color: inherit !important;
    }
  }

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

    .nav-label {
      color: var(--sidenav-text-hover) !important;
    }

    // Ensure mat-menu-item uses hover color for text only
    &[mat-menu-item] {
      .mat-mdc-menu-item-text {
        color: inherit !important;
      }
    }
  }

  // Route items (a.nav-link) should change icon color on hover
  &:not(.active):is(a):hover .nav-icon,
  &:not(.active):is(a):focus .nav-icon {
    color: var(--sidenav-text-hover);
  }

  &.active {
    background: var(--sidenav-item-active-bg);
    color: var(--sidenav-active-text);
    box-shadow: var(--whiteframe-shadow-1dp);

    .nav-icon {
      color: var(--sidenav-active-text);
    }

    .nav-label {
      color: var(--sidenav-active-text);
    }

    // Prevent Material focus styles from reducing contrast on active items
    &:focus,
    &:focus-visible {
      background: var(--sidenav-item-active-bg);
      color: var(--sidenav-active-text) !important;

      .nav-label,
      .nav-icon,
      .mat-mdc-menu-item-text {
        color: var(--sidenav-active-text) !important;
      }
    }
  }

  .nav-icon {
    width: 24px;
    height: 24px;
    font-size: 18px;
  }

  .nav-label {
    font: inherit;
    letter-spacing: inherit;
    color: inherit;
  }
}

// Navigation icon and chevron
.nav-icon {
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  // Don't set default color here - let it inherit or use theme colors
  font-size: 18px;
  line-height: 1;

  // Emoji-specific styling
  &.nav-icon-emoji {
    font-family: 'Apple Color Emoji', 'Segoe UI Emoji', 'Noto Color Emoji', sans-serif;
    font-size: 16px;
    font-feature-settings: normal;
    font-variation-settings: normal;
    text-transform: none;
    letter-spacing: normal;
    overflow-wrap: normal;
    white-space: nowrap;
    direction: ltr;
    // Better emoji rendering
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
  }
}

.expand-icon {
  transition: transform 0.2s ease;
}

.expanded .expand-icon {
  transform: rotate(180deg);
}

:host-context(.nav-sidenav.compactMode) {
  .nav-link {
    justify-content: flex-start;

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

    ::ng-deep .mat-mdc-menu-item-text {
      display: flex;
      justify-content: flex-start;
      width: 100%;
      padding: 0;

      > * {
        margin: 0 !important;
      }
    }

    // Hide the text wrapper if there is a mat-icon sibling (Regular Icon case)
    // This prevents the empty wrapper from shifting the icon
    mat-icon.nav-icon ~ ::ng-deep .mat-mdc-menu-item-text {
      display: none !important;
    }

    &.active {
      color: var(--sidenav-active-text) !important;
      background: var(--sidenav-item-active-bg) !important;
      box-shadow: var(--whiteframe-shadow-1dp);

      &::after {
        position: absolute;
        inset: 4px;
      }

      .nav-icon {
        color: var(--sidenav-active-text) !important;
      }

      .nav-label {
        color: var(--sidenav-active-text) !important;
      }
    }
  }

  .nav-icon {
    margin: 0;
  }

  // Hide the overflow menu button entirely when compactMode
  .additional-btn {
    display: none !important;
  }

  // Hide only text labels, not icons in compact mode
  .nav-label {
    display: none !important;
  }

  .task-count {
    display: none;
  }
}
