/* Abas: sublinhado de 3 px na aba atual, distinto da navegação principal e das ações. */

.tabs {
  display: flex;
  gap: var(--space-6);
  margin-bottom: var(--space-6);
  box-shadow: inset 0 -1px 0 var(--line);
}

.tab {
  display: inline-flex;
  align-items: center;
  min-height: var(--control-min-height);
  padding: 0 var(--space-1);
  border-bottom: 3px solid transparent;
  color: var(--muted);
  text-decoration: none;
}

.tab[aria-current="page"] {
  border-bottom-color: var(--selected);
  color: var(--text);
  font-weight: 700;
}

.tab:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 2px;
}

@media (hover: hover) {
  .tab:not([aria-current="page"]):hover {
    color: var(--text);
  }
}

@media (forced-colors: active) {
  .tab[aria-current="page"] {
    border-bottom-color: Highlight;
  }
}