/**
 * EOKit — вкладки: внешний вид + классы состояния для eokit.tabs.js.
 * Логика показа панелей: .eokit-tabs__panel--active (ставит JS).
 * Базовые токены: eokit.ui.css (подключить раньше этого файла).
 *
 * Разметка:
 *   .eokit-tabs[data-eokit-tabs]   — авто-init (см. EOKitConfig.tabs)
 *     input.eokit-tabs__radio      — опционально (группа с одинаковым name)
 *     .eokit-tabs__bar[role="tablist"]
 *       label.eokit-tabs__tab      — или button[role="tab"]
 *     .eokit-tabs__panel           — по одной на вкладку (порядок = порядок табов)
 *
 * API: window.EOKit.tabs / EOKitTabs — init, initIn, select, событие core «tabs:change».
 */

/* Скрытые radio — клик по label[for] */
.eokit-tabs__radio {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
  opacity: 0;
}

.eokit-tabs {
  position: relative;
  width: 100%;
  min-width: 0;
}

.eokit-tabs__bar {
  display: flex;
  flex-wrap: nowrap;
  align-items: stretch;
  gap: var(--eokit-ui-space-1);
  height: var(--eokit-ui-control-height-3);
  padding: var(--eokit-ui-space-1);
  border-radius: var(--eokit-ui-radius-control);
  background: var(--eokit-ui-color-bg-soft);
  user-select: none;
}

.eokit-tabs__tab {
  box-sizing: border-box;
  flex: 1 1 0;
  min-width: 0;
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  padding: 0 var(--eokit-ui-space-2);
  border: none;
  border-radius: calc(var(--eokit-ui-radius-control) - 4px);
  background: transparent;
  color: var(--eokit-ui-color-fg-subtle);
  font-family: var(--eokit-ui-font-family);
  font-feature-settings: var(--eokit-ui-font-feature-settings);
  font-size: var(--eokit-ui-control-font-size);
  font-weight: var(--eokit-ui-input-font-weight);
  line-height: var(--eokit-ui-control-line-height);
  text-align: center;
  white-space: nowrap;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-font-smoothing: antialiased;
}

.eokit-tabs__tab:hover {
  color: var(--eokit-ui-color-fg-muted);
  background: var(--eokit-ui-color-bg-soft-hover);
}

.eokit-tabs__panel {
  display: none;
  padding: 0;
}

.eokit-tabs__panel.eokit-tabs__panel--active {
  display: block !important;
}

.eokit-tabs__tab.eokit-tabs__tab--active {
  border-color: var(--eokit-ui-color-border);
  background: var(--eokit-ui-color-bg);
  color: var(--eokit-ui-color-fg-muted);
  box-shadow: var(--eokit-ui-shadow-1);
}