/* Tabs -see docs/strategy/design-system/16-tabs.md */

.tabs {
  display: flex;
  border-bottom: 1px solid var(--border);
}

.tab {
  display: inline-flex;
  align-items: center;
  padding: 9px 12px;
  border-bottom: 2px solid transparent;
  color: var(--muted);
  font-size: var(--font-size-caption);
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
  background: transparent;
  border-top: 0;
  border-left: 0;
  border-right: 0;
  font-family: var(--font);
}

.tab.active {
  color: var(--primary);
  border-bottom-color: var(--primary);
}

.tab.disabled,
.tab[aria-disabled="true"] {
  opacity: 0.62;
  cursor: not-allowed;
}