// Sidebar widths are tokens-of-tokens: 16rem expanded gives enough
// room for two-word labels in both English and French; 4rem collapsed
// matches the 44px+ touch-target minimum from ADR-0016 with breathing
// room on each side. The transition is short and animation-friendly —
// users with `prefers-reduced-motion: reduce` get the no-animation
// branch below.
//
// Dark mode rules sit OUTSIDE the nested blocks and key off
// `:host-context(.dark)` — `.dark` lives on <html>, outside this
// component's encapsulation, and a nested `:where(.dark) &` would be
// rewritten by Angular's emulated CSS scoping into a selector that
// no longer matches <html>.
.sidebar {
  width: 16rem;
  transition: width 0.18s ease-out;

  &--collapsed {
    width: 4rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .sidebar {
    transition: none;
  }
}

// Link + toggle share the same row geometry so transitions between
// expanded/collapsed don't reflow neighbouring items. Tailwind utility
// classes would also work; an SCSS rule keeps the template terse and
// the hover/focus/active variants colocated.
.sidebar__link,
.sidebar__toggle {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  width: 100%;
  min-height: 2.75rem;
  padding: 0.5rem 0.75rem;
  border-radius: 0.5rem;
  color: #374151;
  font-size: 0.875rem;
  font-weight: 500;
  text-decoration: none;
  background: transparent;
  border: 0;
  cursor: pointer;
  text-align: left;
  transition:
    background-color 0.12s ease-out,
    color 0.12s ease-out;

  &:hover {
    background-color: #f3f4f6;
    color: var(--color-brand-primary-500);
  }

  &:focus-visible {
    outline: 2px solid var(--color-brand-primary-500);
    outline-offset: 2px;
  }
}

.sidebar__link--active {
  background-color: var(--color-brand-primary-500);
  color: #fff;

  &:hover {
    background-color: var(--color-brand-primary-600);
    color: #fff;
  }
}

.sidebar__label {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.sidebar--collapsed {
  .sidebar__link,
  .sidebar__toggle {
    justify-content: center;
    padding-left: 0.5rem;
    padding-right: 0.5rem;
  }
}

// --- Dark mode overrides --------------------------------------------------

:host-context(.dark) {
  .sidebar__link,
  .sidebar__toggle {
    color: #e5e7eb;

    &:hover {
      background-color: #1f2937;
      color: var(--color-brand-primary-300);
    }

    &:focus-visible {
      outline-color: var(--color-brand-primary-300);
    }
  }

  .sidebar__link--active {
    background-color: var(--color-brand-primary-400);

    &:hover {
      background-color: var(--color-brand-primary-300);
      color: #0b1620;
    }
  }
}
