/*
NavigationMenu

<nav class="navigation-menu" data-navigation-menu data-orientation>          position: relative
  <ul class="navigation-menu-list" data-nav-list>
    <li class="navigation-menu-item" data-nav-item data-value>
      <button class="navigation-menu-trigger" aria-expanded data-state>     label + .navigation-menu-chevron
      <div class="navigation-menu-content" popover="manual" data-state data-motion>   the panel
    <li> <a class="navigation-menu-link" data-active>                        a plain link item
  <div class="navigation-menu-indicator" data-state="visible|hidden">       optional
  <div class="navigation-menu-viewport" popover="manual" data-state>        shared box under the panel

With the viewport (default) the panel is transparent and sits on the
viewport, which carries the chrome and animates its size between panels
(--navigation-menu-viewport-width/height). Without it, each panel carries
its own chrome under its trigger. Panels slide by data-motion when the
open item changes. A sub navigation (.is-sub) shows its panel inline.
*/

@layer components {

.navigation-menu {
  position:    relative;
  display:     flex;
  align-items: center;
  max-width:   max-content;
  font-family: var(--font-ui);
}

.navigation-menu[data-orientation="vertical"] {
  align-items: flex-start;
}

.navigation-menu-list {
  display:     flex;
  flex-wrap:   wrap;
  align-items: center;
  gap:         var(--space-1);
  margin:      0;
  padding:     0;
  list-style:  none;
}

.navigation-menu-list[data-orientation="vertical"] {
  flex-direction: column;
  align-items:    stretch;
}

.navigation-menu-item {
  position: relative;
  margin:   0;
  padding:  0;
}

.navigation-menu-item::marker {
  content: none;
}

.navigation-menu-item-body {
  display: contents;
}

/* Trigger (and links styled as one) */

.navigation-menu-trigger {
  display:         inline-flex;
  align-items:     center;
  justify-content: space-between;
  gap:             var(--space-1);
  box-sizing:      border-box;
  height:          var(--control-height);
  margin:          0;
  padding:         0 var(--control-padding-x);
  color:           var(--ink);
  background:      transparent;
  border:          0;
  border-radius:   var(--radius-control);
  box-shadow:      none;
  font-family:     var(--font-ui);
  font-size:       var(--text-ui);
  font-weight:     var(--weight-ui);
  letter-spacing:  var(--tracking-ui);
  text-transform:  var(--case-ui);
  text-decoration: none;
  line-height:     var(--leading-none);
  white-space:     nowrap;
  cursor:          pointer;
  outline:         none;
  transition:      none;
}

.navigation-menu-list[data-orientation="vertical"] .navigation-menu-trigger {
  width: 100%;
}

.navigation-menu-trigger:hover,
.navigation-menu-trigger[data-state="open"],
.navigation-menu-trigger[data-active] {
  background: var(--item-highlight);
  color:      var(--item-highlight-ink);
}

.navigation-menu-trigger:active {
  transform: none;
}

.navigation-menu-trigger:focus-visible {
  box-shadow: var(--focus-ring);
}

.navigation-menu-trigger[data-disabled] {
  color:      var(--ink-faint);
  background: transparent;
  cursor:     not-allowed;
}

.navigation-menu-chevron {
  width:      var(--icon-size-sm);
  height:     var(--icon-size-sm);
  color:      var(--ink-dim);
  transition: transform var(--duration-enter) var(--ease-enter);
}

.navigation-menu-trigger[data-state="open"] .navigation-menu-chevron {
  transform: rotate(180deg);
}

.navigation-menu-trigger:hover .navigation-menu-chevron,
.navigation-menu-trigger[data-state="open"] .navigation-menu-chevron {
  color: currentColor;
}

.navigation-menu-list[data-orientation="vertical"] .navigation-menu-chevron {
  transform: rotate(-90deg);
}

.navigation-menu-list[data-orientation="vertical"] .navigation-menu-trigger[data-state="open"] .navigation-menu-chevron {
  transform: rotate(90deg);
}

/* Link */

.navigation-menu-link {
  display:         flex;
  flex-direction:  column;
  gap:             var(--space-1);
  box-sizing:      border-box;
  padding:         var(--space-2);
  color:           var(--ink);
  border-radius:   var(--radius-item);
  font-size:       var(--text-ui);
  line-height:     var(--leading-snug);
  text-decoration: none;
  overflow-wrap:   anywhere;
  outline:         none;
}

.navigation-menu-link:hover,
.navigation-menu-link:focus-visible {
  background: var(--item-highlight);
  color:      var(--item-highlight-ink);
}

.navigation-menu-link:focus-visible {
  box-shadow: var(--focus-ring);
}

.navigation-menu-link[data-active] {
  background: var(--item-selected);
  color:      var(--item-selected-ink);
}

.navigation-menu-link .icon {
  width:  var(--icon-size);
  height: var(--icon-size);
  color:  var(--ink-dim);
}

/* Panel */

.navigation-menu-content {
  box-sizing:  border-box;
  max-width:   var(--available-width, calc(100vw - 2 * var(--space-2)));
  max-height:  var(--available-height, none);
  margin:      0;
  padding:     var(--overlay-padding-lg);
  overflow:    auto;
  color:       var(--overlay-ink);
  background:  transparent;
  border:      var(--overlay-border-width) solid transparent;
  font-family: var(--font-body);
  font-size:   var(--text-ui);
  outline:     none;
}

/* No shared viewport: the panel draws its own box. */
.navigation-menu:not(.is-sub):not(:has(> .navigation-menu-viewport)) > .navigation-menu-list > .navigation-menu-item > .navigation-menu-content,
.navigation-menu-content.is-standalone {
  background:    var(--overlay-bg);
  border-color:  var(--overlay-border);
  border-radius: var(--radius-overlay);
  box-shadow:    var(--overlay-shadow);
}

.navigation-menu-content[data-motion="from-start"] { animation: navigation-menu-from-start var(--duration-enter) var(--ease-enter); }
.navigation-menu-content[data-motion="from-end"]   { animation: navigation-menu-from-end var(--duration-enter) var(--ease-enter); }
.navigation-menu-content[data-motion="to-start"]   { animation: navigation-menu-to-start var(--duration-exit) var(--ease-exit) forwards; }
.navigation-menu-content[data-motion="to-end"]     { animation: navigation-menu-to-end var(--duration-exit) var(--ease-exit) forwards; }

.navigation-menu-content:not([data-motion])[data-state="open"] {
  animation: navigation-menu-fade-in var(--duration-enter) var(--ease-enter);
}

.navigation-menu-content:not([data-motion])[data-state="closed"] {
  animation: navigation-menu-fade-out var(--duration-exit) var(--ease-exit) forwards;
}

.navigation-menu-content[data-state="closed"] {
  pointer-events: none;
}

@keyframes navigation-menu-from-start { from { opacity: 0; transform: translateX(calc(var(--enter-distance) * -4)); } }
@keyframes navigation-menu-from-end   { from { opacity: 0; transform: translateX(calc(var(--enter-distance) * 4)); } }
@keyframes navigation-menu-to-start   { to { opacity: 0; transform: translateX(calc(var(--enter-distance) * -4)); } }
@keyframes navigation-menu-to-end     { to { opacity: 0; transform: translateX(calc(var(--enter-distance) * 4)); } }
@keyframes navigation-menu-fade-in    { from { opacity: 0; } }
@keyframes navigation-menu-fade-out   { to { opacity: 0; } }

/* Viewport */

.navigation-menu-viewport {
  box-sizing:       border-box;
  width:            var(--navigation-menu-viewport-width, 0);
  height:           var(--navigation-menu-viewport-height, 0);
  margin:           0;
  padding:          0;
  overflow:         hidden;
  background:       var(--overlay-bg);
  border:           var(--overlay-border-width) solid var(--overlay-border);
  border-radius:    var(--radius-overlay);
  box-shadow:       var(--overlay-shadow);
  transform-origin: var(--transform-origin);
  transition:       width var(--duration-enter) var(--ease-enter), height var(--duration-enter) var(--ease-enter);
  pointer-events:   none;
}

.navigation-menu-viewport[data-state="open"] {
  animation: navigation-menu-viewport-in var(--duration-enter) var(--ease-enter);
}

.navigation-menu-viewport[data-state="closed"] {
  animation: navigation-menu-viewport-out var(--duration-exit) var(--ease-exit) forwards;
}

@keyframes navigation-menu-viewport-in  { from { opacity: 0; transform: scale(var(--enter-scale)); } }
@keyframes navigation-menu-viewport-out { to { opacity: 0; transform: scale(var(--enter-scale)); } }

/* Arrow */

/* Base UI Arrow: a triangle on the viewport's edge facing the list, placed
   on the open trigger's center by the controller (left or top, inline).
   ::before is the border-colored triangle, ::after the fill moved in by the
   border width, so the viewport's border bends round the tip. */
.navigation-menu-viewport:has(> .navigation-menu-arrow) {
  overflow: visible;
}

.navigation-menu-arrow {
  --navigation-menu-arrow-width:  var(--space-3);
  --navigation-menu-arrow-height: var(--space-1-5);

  position:       absolute;
  width:          var(--navigation-menu-arrow-width);
  height:         var(--navigation-menu-arrow-height);
  pointer-events: none;
}

.navigation-menu-arrow::before,
.navigation-menu-arrow::after {
  content:    "";
  position:   absolute;
  inset:      0;
  background: var(--overlay-border);
  clip-path:  polygon(0 100%, 50% 0, 100% 100%);
}

.navigation-menu-arrow::after {
  background: var(--overlay-bg);
  transform:  translateY(var(--overlay-border-width));
}

.navigation-menu-arrow[data-side="bottom"] {
  top: calc(-1 * var(--navigation-menu-arrow-height) - var(--overlay-border-width));
}

.navigation-menu-arrow[data-side="left"],
.navigation-menu-arrow[data-side="right"] {
  width:  var(--navigation-menu-arrow-height);
  height: var(--navigation-menu-arrow-width);
}

.navigation-menu-arrow[data-side="right"] {
  left: calc(-1 * var(--navigation-menu-arrow-height) - var(--overlay-border-width));
}

.navigation-menu-arrow[data-side="right"]::before,
.navigation-menu-arrow[data-side="right"]::after {
  clip-path: polygon(100% 0, 0 50%, 100% 100%);
}

.navigation-menu-arrow[data-side="right"]::after {
  transform: translateX(var(--overlay-border-width));
}

.navigation-menu-arrow[data-side="left"] {
  right: calc(-1 * var(--navigation-menu-arrow-height) - var(--overlay-border-width));
}

.navigation-menu-arrow[data-side="left"]::before,
.navigation-menu-arrow[data-side="left"]::after {
  clip-path: polygon(0 0, 100% 50%, 0 100%);
}

.navigation-menu-arrow[data-side="left"]::after {
  transform: translateX(calc(-1 * var(--overlay-border-width)));
}

/* Indicator */

.navigation-menu-indicator {
  --navigation-menu-arrow: var(--space-2-5);

  position:       absolute;
  top:            100%;
  left:           0;
  z-index:        1;
  display:        flex;
  justify-content: center;
  align-items:    flex-end;
  width:          var(--navigation-menu-indicator-size, 0);
  height:         var(--space-1-5);
  overflow:       hidden;
  pointer-events: none;
  transform:      translateX(var(--navigation-menu-indicator-translate-x, 0));
  transition:     transform var(--duration-enter) var(--ease-enter), width var(--duration-enter) var(--ease-enter), opacity var(--duration-enter) var(--ease-enter);
}

.navigation-menu-indicator[data-state="hidden"] {
  opacity: 0;
}

.navigation-menu-indicator[data-orientation="vertical"] {
  top:             0;
  left:            100%;
  width:           var(--space-1-5);
  height:          var(--navigation-menu-indicator-size, 0);
  align-items:     center;
  justify-content: flex-end;
  transform:       translateY(var(--navigation-menu-indicator-translate-y, 0));
}

.navigation-menu-indicator-arrow {
  width:       var(--navigation-menu-arrow);
  height:      var(--navigation-menu-arrow);
  margin-bottom: calc(var(--navigation-menu-arrow) / -2);
  background:  var(--overlay-bg);
  border:      var(--overlay-border-width) solid var(--overlay-border);
  border-radius: var(--radius-xs);
  transform:   rotate(45deg);
}

.navigation-menu-indicator[data-orientation="vertical"] .navigation-menu-indicator-arrow {
  margin-bottom: 0;
  margin-right:  calc(var(--navigation-menu-arrow) / -2);
}

/* Sub */

.navigation-menu.is-sub {
  display:   flex;
  flex-wrap: wrap;
  gap:       var(--space-2);
  max-width: none;
}

.navigation-menu.is-sub > .navigation-menu-list > .navigation-menu-item > .navigation-menu-content {
  display:    block;
  position:   static;
  order:      1;
  flex-basis: 100%;
  border:     0;
  padding:    0;
  overflow:   visible;
  animation:  none;
}

.navigation-menu.is-sub > .navigation-menu-list,
.navigation-menu.is-sub > .navigation-menu-list > .navigation-menu-item {
  display: contents;
}

.navigation-menu.is-sub .navigation-menu-trigger {
  height: var(--control-height-sm);
  padding: 0 var(--control-padding-x-sm);
}

.navigation-menu.is-sub .navigation-menu-chevron {
  display: none;
}


/* Backdrop (backdrop) */

/* Base UI NavigationMenu.Backdrop: a top layer box under the open panel,
   cut away over the list so the triggers stay above it. It dims the page
   with the theme's backdrop. */
.navigation-menu-backdrop {
  position:   fixed;
  inset:      0;
  width:      auto;
  height:     auto;
  max-width:  none;
  max-height: none;
  margin:     0;
  padding:    0;
  border:     0;
  background: var(--backdrop);
}

.navigation-menu-backdrop:not(:popover-open) {
  display: none;
}

.navigation-menu-backdrop[data-state="open"] {
  animation: navigation-menu-backdrop-in var(--duration-enter) var(--ease-enter);
}

.navigation-menu-backdrop[data-state="closed"] {
  animation: navigation-menu-backdrop-out var(--duration-exit) var(--ease-exit) forwards;
}

@keyframes navigation-menu-backdrop-in {
  from { opacity: 0; }
}

@keyframes navigation-menu-backdrop-out {
  to { opacity: 0; }
}

}


/* FORCED COLORS -------------------------------------------------------------
   High contrast drops box-shadow and paints every background Canvas, so the
   focus ring of a trigger or a panel link, and the fill of an open trigger,
   would vanish. They become outlines in Highlight (no layout effect); a
   link's is drawn inside it, where the panel's overflow cannot clip it. */

@layer components {

@media (forced-colors: active) {
  .navigation-menu-trigger:focus-visible,
  .navigation-menu-trigger[data-state="open"] {
    outline:        var(--focus-ring-width) solid Highlight;
    outline-offset: calc(-1 * var(--focus-ring-width));
  }

  .navigation-menu-link:focus-visible {
    outline:        var(--focus-ring-width) solid Highlight;
    outline-offset: calc(-1 * var(--focus-ring-width));
  }

  .navigation-menu-trigger[data-disabled] {
    color: GrayText;
  }
}

}