/* Copyright 2025 New Vector Ltd.
 * Copyright 2023 The Matrix.org Foundation C.I.C.
 *
 * SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
 * Please see LICENSE files in the repository root for full details.
 */

.nav-bar {
  border-block-end: var(--cpd-border-width-1) solid var(--cpd-color-gray-400);
  margin: var(--cpd-space-6x) 0;
  padding: 0;
}

.nav-bar-items {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  gap: var(--cpd-space-3x);
  list-style-type: "";
  padding: 0;
  margin: 0;
}

.nav-tab {
  padding: var(--cpd-space-4x) 0;
  position: relative;
}

/* Underline effect */
.nav-tab::before {
  content: "";
  position: absolute;
  inset-block-end: 0;
  inset-inline: 0;
  block-size: 0;
  border-radius: var(--cpd-radius-pill-effect) var(--cpd-radius-pill-effect) 0 0;
  background-color: var(--cpd-color-bg-action-primary-rest);
  transition: height 0.1s ease-in-out;
}

.nav-tab[data-current]::before {
  /* This is not exactly right: designs says 3px, but there are no variables for that */
  block-size: var(--cpd-border-width-4);
}

.nav-item {
  padding-block: var(--cpd-space-1x);
  padding-inline: var(--cpd-space-2x);
  border-radius: var(--cpd-radius-pill-effect);
  cursor: pointer;
  appearance: none;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--cpd-space-2x);
  box-sizing: border-box;
  background: transparent;
  border: 0;
  font: var(--cpd-font-body-md-medium);
  color: var(--cpd-color-text-secondary);
  text-decoration: none;
}

@media (hover) {
  .nav-item:not([disabled]):hover {
    color: var(--cpd-color-text-primary);
    background-color: var(--cpd-color-bg-subtle-secondary);
  }
}

.nav-item:focus-visible {
  outline: var(--cpd-color-border-focused) var(--cpd-border-width-2) solid;
}

.nav-item:not([disabled]):active {
  color: var(--cpd-color-text-primary);
  background-color: var(--cpd-color-bg-subtle-primary);
}

.nav-item[aria-current],
.nav-item[aria-selected="true"] {
  color: var(--cpd-color-text-primary);
}

.nav-item[disabled] {
  cursor: not-allowed;

  /* Enable pointer events for svgs even with fill=none */
  pointer-events: all !important;
  color: var(--cpd-color-text-disabled);
}

@media (forced-colors: active) {
  .nav-tab[data-current]::before {
    outline: 1px solid transparent;
  }
}