/* shortwind: navigation@0.0.2 sha:2bb73370d69e0f65 */

/* @guide
   @navigation is the container; links are @navigation-link with
   @navigation-link-active for the current page. Tabs mirror that pair: @tab and
   @tab-active. Use @breadcrumb for trail navigation. Active and inactive are
   separate recipes — swap the whole class rather than combining them. The short
   @nav / @nav-link forms are aliases that expand identically; the full-word
   @navigation-* names are canonical — prefer them.
*/

/* Top-level nav container. */
@recipe nav {
  flex items-center gap-1
}

/* Inactive nav link with hover/focus states. */
@recipe nav-link {
  inline-flex items-center gap-2 rounded-md px-3 py-1.5 text-sm font-medium text-muted-foreground transition-colors hover:bg-muted hover:text-foreground focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring
}

/* Active nav link. */
@recipe nav-link-active {
  inline-flex items-center gap-2 rounded-md bg-muted px-3 py-1.5 text-sm font-medium text-foreground focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring
}

/* Breadcrumb trail container. */
@recipe breadcrumb {
  flex items-center gap-1.5 text-sm text-muted-foreground
}

/* Inactive tab control. */
@recipe tab {
  inline-flex items-center gap-2 border-b-2 border-transparent px-3 py-2 text-sm font-medium text-muted-foreground transition-colors hover:border-border hover:text-foreground focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring
}

/* Active tab control. */
@recipe tab-active {
  inline-flex items-center gap-2 border-b-2 border-primary px-3 py-2 text-sm font-medium text-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring
}

/* Full-word canonical aliases — expand identically to the @nav-* short forms. */

/* Top-level nav container (alias of @nav). */
@recipe navigation { @nav }

/* Inactive nav link (alias of @nav-link). */
@recipe navigation-link { @nav-link }

/* Active nav link (alias of @nav-link-active). */
@recipe navigation-link-active { @nav-link-active }