/**
 * Component: Tabs
 * Markup pattern (built by assets/js/components/tabs.js):
 * <div class="tabs">
 *   <div class="tabs__list" role="tablist">
 *     <button class="tabs__tab is-active" role="tab" aria-selected="true" id="tab-1" aria-controls="panel-1">...</button>
 *   </div>
 *   <div class="tabs__panel" id="panel-1" role="tabpanel" aria-labelledby="tab-1">...</div>
 * </div>
 */

.tabs__list {
  display: flex;
  gap: var(--sf-space-1);
  border-bottom: 1px solid var(--sf-border);
  overflow-x: auto;
}

.tabs__tab {
  background: none;
  border: none;
  padding: var(--sf-space-3) var(--sf-space-4);
  font-family: var(--sf-font-mono);
  font-size: var(--sf-text-sm);
  color: var(--sf-slate-600);
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  white-space: nowrap;
}
.tabs__tab:hover { color: var(--sf-ink); }
.tabs__tab.is-active {
  color: var(--sf-indigo);
  border-bottom-color: var(--sf-indigo);
}

.tabs__panel { padding-top: var(--sf-space-6); }
.tabs__panel[hidden] { display: none; }