{"version":3,"file":"Nav.module.cjs","names":[],"sources":["../../../src/components/Nav/Nav.module.css"],"sourcesContent":["/* Copyright 2025 New Vector Ltd.\n * Copyright 2023 The Matrix.org Foundation C.I.C.\n *\n * SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial\n * Please see LICENSE files in the repository root for full details.\n */\n\n.nav-bar {\n  border-block-end: var(--cpd-border-width-1) solid var(--cpd-color-gray-400);\n  margin: var(--cpd-space-6x) 0;\n  padding: 0;\n}\n\n.nav-bar-items {\n  display: flex;\n  flex-direction: row;\n  justify-content: flex-start;\n  align-items: center;\n  gap: var(--cpd-space-3x);\n  list-style-type: \"\";\n  padding: 0;\n  margin: 0;\n}\n\n.nav-tab {\n  padding: var(--cpd-space-4x) 0;\n  position: relative;\n}\n\n/* Underline effect */\n.nav-tab::before {\n  content: \"\";\n  position: absolute;\n  inset-block-end: 0;\n  inset-inline: 0;\n  block-size: 0;\n  border-radius: var(--cpd-radius-pill-effect) var(--cpd-radius-pill-effect) 0 0;\n  background-color: var(--cpd-color-bg-action-primary-rest);\n  transition: height 0.1s ease-in-out;\n}\n\n.nav-tab[data-current]::before {\n  /* This is not exactly right: designs says 3px, but there are no variables for that */\n  block-size: var(--cpd-border-width-4);\n}\n\n.nav-item {\n  padding-block: var(--cpd-space-1x);\n  padding-inline: var(--cpd-space-2x);\n  border-radius: var(--cpd-radius-pill-effect);\n  cursor: pointer;\n  appearance: none;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  gap: var(--cpd-space-2x);\n  box-sizing: border-box;\n  background: transparent;\n  border: 0;\n  font: var(--cpd-font-body-md-medium);\n  color: var(--cpd-color-text-secondary);\n  text-decoration: none;\n}\n\n@media (hover) {\n  .nav-item:not([disabled]):hover {\n    color: var(--cpd-color-text-primary);\n    background-color: var(--cpd-color-bg-subtle-secondary);\n  }\n}\n\n.nav-item:focus-visible {\n  outline: var(--cpd-color-border-focused) var(--cpd-border-width-2) solid;\n}\n\n.nav-item:not([disabled]):active {\n  color: var(--cpd-color-text-primary);\n  background-color: var(--cpd-color-bg-subtle-primary);\n}\n\n.nav-item[aria-current],\n.nav-item[aria-selected=\"true\"] {\n  color: var(--cpd-color-text-primary);\n}\n\n.nav-item[disabled] {\n  cursor: not-allowed;\n\n  /* Enable pointer events for svgs even with fill=none */\n  pointer-events: all !important;\n  color: var(--cpd-color-text-disabled);\n}\n\n@media (forced-colors: active) {\n  .nav-tab[data-current]::before {\n    outline: 1px solid transparent;\n  }\n}\n"],"mappings":""}