/**
 * navigation.css
 *
 * Responsive navigation components: navbar and sidebar.
 * Supports the documented custom elements and class aliases.
 */

/* ================= Navbar ================= */
:where(nav-navbar, [data-navbar], .navbar, .nav-navbar) {
  color: var(--text-default);
  container-type: inline-size;
  container-name: navbar-container;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacing-md, 1rem);
  min-block-size: var(--nav-min-height, 3.5rem);
  padding: var(--nav-padding, var(--spacing-sm, 0.5rem) var(--spacing-md, 1rem));
  background-color: var(--nav-background, var(--bg, var(--surface-default)));
  border: var(--border-width, 1px) solid var(--nav-border-color, var(--outline-subtle));
  border-radius: var(--nav-radius, var(--radius-lg, 0.75rem));
  position: relative;
  z-index: var(--nav-z-index, var(--z-index-50, 50));
  font-family: var(--font-family-ui, inherit);
  font-size: var(--font-size-navigation, var(--font-size-sm, 0.875rem));
  line-height: var(--line-height-navigation, var(--line-height-snug, 1.375));
}

:where(nav-navbar, [data-navbar], .navbar, .nav-navbar):is([sticky], [data-sticky], .is-sticky) {
  position: sticky;
  top: var(--nav-sticky-offset, 0);
}

:where(nav-navbar, [data-navbar], .navbar, .nav-navbar) .nav-brand {
  color: var(--nav-brand-color, var(--text-overt));
  font-size: var(--nav-brand-font-size, var(--font-size-lg, 1.125rem));
  font-weight: var(--nav-brand-font-weight, var(--font-weight-bold, 700));
  line-height: 1.1;
  text-decoration: none;
  white-space: nowrap;
  margin-inline-end: auto;
}

:where(nav-navbar, [data-navbar], .navbar, .nav-navbar) .nav-links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  list-style: none;
  margin: 0;
  padding: 0;
  gap: var(--nav-links-gap, var(--spacing-sm, 0.5rem));
}

:where(nav-navbar, [data-navbar], .navbar, .nav-navbar) .nav-links > li {
  margin: 0;
  padding: 0;
}

:where(nav-navbar, [data-navbar], .navbar, .nav-navbar) .nav-link {
  display: inline-flex;
  align-items: center;
  color: var(--nav-link-color, var(--text-default));
  text-decoration: none;
  font-weight: var(--nav-link-font-weight, var(--font-weight-ui, 500));
  padding: var(--nav-link-padding-block, var(--spacing-sm, 0.5rem)) var(--nav-link-padding-inline, var(--spacing-md, 1rem));
  border-radius: var(--nav-link-radius, var(--radius-md, 6px));
  transition: background-color 0.15s ease, color 0.15s ease;

  &:hover,
  &:focus-visible {
    background-color: var(--nav-link-hover-background, var(--highlight-bg-subtle));
    color: var(--nav-link-hover-color, var(--text-overt));
    outline: none;
  }
}

:where(nav-navbar, [data-navbar], .navbar, .nav-navbar) .nav-toggle {
  display: none;
  min-height: auto;
  padding: var(--spacing-sm, 0.5rem);
  border: var(--border-width, 1px) solid var(--nav-toggle-border-color, transparent);
  background: var(--nav-toggle-background, transparent);
  color: var(--nav-toggle-color, var(--text-default));
  box-shadow: none;
}

:where(nav-navbar, [data-navbar], .navbar, .nav-navbar) .nav-toggle:hover,
:where(nav-navbar, [data-navbar], .navbar, .nav-navbar) .nav-toggle:focus-visible {
  background: var(--nav-toggle-hover-background, var(--highlight-bg-subtle));
  border-color: var(--nav-toggle-hover-border-color, var(--outline-subtle));
  color: var(--nav-toggle-hover-color, var(--text-overt));
}

@container navbar-container (max-width: 34rem) {
  :where(nav-navbar, [data-navbar], .navbar, .nav-navbar) .nav-links {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    box-sizing: border-box;
    width: 100%;
    flex: 0 0 100%;
    background-color: var(--nav-menu-background, var(--surface-default));
    border-block-start: var(--border-width, 1px) solid var(--nav-menu-border-color, var(--outline-subtle));
    padding: var(--spacing-sm, 0.5rem) 0 0;
    box-shadow: var(--shadow-dropdown, none);
  }

  :where(nav-navbar, [data-navbar], .navbar, .nav-navbar) .nav-links.active,
  :where(nav-navbar, [data-navbar], .navbar, .nav-navbar) .nav-toggle[aria-expanded="true"] + .nav-links {
    display: flex;
  }

  :where(nav-navbar, [data-navbar], .navbar, .nav-navbar) .nav-link {
    width: 100%;
    justify-content: flex-start;
  }

  :where(nav-navbar, [data-navbar], .navbar, .nav-navbar) .nav-toggle {
    display: none;
    margin-inline-start: auto;
  }

  :where(nav-navbar, [data-navbar], .navbar, .nav-navbar):is([data-collapsible], .is-collapsible) .nav-links {
    display: none;
  }

  :where(nav-navbar, [data-navbar], .navbar, .nav-navbar):is([data-collapsible], .is-collapsible) .nav-toggle {
    display: inline-flex;
  }
}

/* ================= Sidebar ================= */
:where(nav-sidebar, [data-sidebar], .sidebar, .nav-sidebar) {
  width: var(--width, var(--sidebar-width, 250px));
  height: var(--sidebar-height, 100vh);
  max-height: var(--sidebar-max-height, none);
  background-color: var(--nav-sidebar-background, var(--bg, var(--surface-default)));
  border-right: var(--border-width, 1px) solid var(--nav-sidebar-border-color, var(--outline-subtle));
  padding: var(--nav-sidebar-padding, var(--spacing-lg, 1.5rem));
  position: sticky;
  top: var(--nav-sidebar-top, 0);
  overflow-y: auto;
  color: var(--text-default);
}

:where(nav-sidebar, [data-sidebar], .sidebar, .nav-sidebar) .sidebar-nav {
  list-style: none;
  margin: 0;
  padding: 0;
}

:where(nav-sidebar, [data-sidebar], .sidebar, .nav-sidebar) .sidebar-link {
  display: block;
  color: var(--sidebar-link-color, var(--text-default));
  text-decoration: none;
  padding: var(--sidebar-link-padding-block, var(--spacing-sm, 0.5rem)) var(--sidebar-link-padding-inline, var(--spacing-md, 1rem));
  border-radius: var(--sidebar-link-radius, var(--radius-md, 6px));
  margin-bottom: var(--spacing-xs, 0.25rem);
  transition: background-color 0.15s ease, color 0.15s ease;

  &:hover,
  &:focus-visible {
    background-color: var(--sidebar-link-hover-background, var(--highlight-bg-subtle));
    color: var(--sidebar-link-hover-color, var(--text-overt));
    outline: none;
  }
}

:where(nav-sidebar, [data-sidebar], .sidebar, .nav-sidebar) .sidebar-section {
  margin-top: var(--sidebar-section-margin-top, var(--spacing-lg, 1.5rem));
  margin-bottom: var(--sidebar-section-margin-bottom, var(--spacing-xs, 0.25rem));
  color: var(--sidebar-section-color, var(--text-overt));
  font-weight: var(--sidebar-section-font-weight, var(--font-weight-semibold, 600));
}

.sidebar-layout {
  display: flex;
  gap: var(--spacing-lg, 2rem);
  flex-wrap: wrap;
}

.sidebar-layout :where(nav-sidebar, [data-sidebar], .sidebar, .nav-sidebar) {
  flex-basis: 200px;
  flex-grow: 1;
}

.sidebar-layout main {
  flex-grow: 9999;
  flex-basis: 50%;
  min-width: min(100%, 20rem);
}

.nav-link-active,
.sidebar-link-active,
:where(nav-navbar, [data-navbar], .navbar, .nav-navbar) .nav-link[aria-current="page"],
:where(nav-sidebar, [data-sidebar], .sidebar, .nav-sidebar) .sidebar-link[aria-current="page"] {
  background-color: var(--accent-subtle);
  color: var(--text-overt);
}