/*
 * Tabs
 * Horizontal + vertical
 */

.tabs {
  display: flex;
  flex-direction: column;
}

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

.tabs-list.vertical {
  flex-direction: column;
  border-bottom: 0;
  border-right: 1px solid var(--color-border);
}

.tab {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-4);
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--color-text-muted);
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  cursor: pointer;
  transition: color var(--transition-fast), border-color var(--transition-fast);
  white-space: nowrap;
}

.tab:hover {
  color: var(--color-text);
}

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

.tabs-list.vertical .tab {
  border-bottom: 0;
  border-right: 2px solid transparent;
  text-align: left;
  width: 100%;
}

.tabs-list.vertical .tab.active {
  border-right-color: var(--color-primary);
  border-bottom: 0;
}

.tab-panel {
  padding: var(--space-4) 0;
}

.tab-panel[hidden] {
  display: none;
}