/* Tabs — WowVendor DS. Группа табов для навигации между сгруппированным
   контентом: один таб всегда выбран, отображает свой раздел, скрывая остальные.
   Группа отделяется от контента нижней линией-разделителем.

   Оси component set: Size (s/m) × Dropdown (false/true).
   Внутренние состояния таба (Tab Button): default / hover-focus / active(selected)
   / disabled — реализованы модификаторами .tab--*.

   Dropdown=True добавляет overflow-таб «More...» (в состоянии active) с
   выпадающим меню (Dropdown List) под ним — белая карточка со списком пунктов,
   один пункт в hover, справа скролл-бар.

   Значения — только токены; типографика — utility-классами в разметке.
   Фикс. габариты (высоты 46/60, ширины меню 100/120) не имеют токенов —
   заданы px, как в Figma. */

/* ==== Группа табов ==== */
.tabs {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  box-sizing: border-box;
  font-family: var(--font-family-base);
}
.tabs--s { padding-bottom: var(--spacing-16); }
.tabs--m { padding-bottom: var(--spacing-24); }

.tabs__group {
  position: relative;               /* якорь для абсолютного меню More */
  display: flex;
  align-items: flex-start;
  gap: var(--spacing-8);
  width: 100%;
  border-bottom: 1px solid var(--color-gray-100);   /* линия-разделитель на всю ширину */
}

/* ==== Таб (Tab Button) ==== */
.tab {
  position: relative;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  gap: var(--spacing-8);
  white-space: nowrap;
  cursor: pointer;
  color: var(--color-gray-900);
}
.tabs--s .tab { height: 46px; padding: var(--spacing-12) var(--spacing-8); }
.tabs--m .tab { height: 60px; padding: var(--spacing-16) var(--spacing-12); }

.tab__label { color: inherit; }

/* Подчёркивание — псевдоэлемент, чтобы не менять высоту таба и лечь поверх
   линии-разделителя группы (bottom:-1px перекрывает её 1px). */
.tab--selected,
.tab--hover { }
.tab--selected::after,
.tab--hover::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -1px;
  height: 2px;
}
.tab--hover::after    { background: var(--color-gray-100); }
.tab--selected::after { background: var(--color-accent-400); }

/* Цвета текста по состоянию */
.tab--selected { color: var(--color-accent-400); }
.tab--disabled { color: var(--color-gray-100); cursor: default; }

/* Счётчик внутри таба — переиспользуем компонент counter (secondary).
   Габарит counter'а задаётся его собственными классами. */

/* ==== Overflow-таб «More…» с выпадающим меню ==== */
.tabs__more { position: relative; }   /* якорь для .dropdown-list */

/* ---- Dropdown List ---- */
.dropdown-list {
  position: absolute;
  right: 0;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  padding: var(--spacing-4);
  background: var(--color-gray-0);
  border: 1px solid var(--color-gray-50);
  border-radius: var(--radius-8);
  box-shadow: var(--shadow-4);
  overflow: hidden;
}
.tabs--s .dropdown-list { top: 50px; width: 100px; }
.tabs--m .dropdown-list { top: 64px; width: 120px; }

/* ---- Dropdown Item ---- */
.dropdown-item {
  box-sizing: border-box;
  display: flex;
  align-items: center;
  width: 100%;
  border-radius: var(--radius-4);
  color: var(--color-gray-900);
  cursor: pointer;
}
.tabs--s .dropdown-item { padding: var(--spacing-8); }
.tabs--m .dropdown-item { padding: var(--spacing-8) var(--spacing-12); }
.dropdown-item--hover { background: var(--color-gray-25); }
.dropdown-item__label { flex: 1 0 0; min-width: 0; color: inherit; }

/* ---- Скролл-бар меню ---- */
.dropdown-scroll {
  position: absolute;
  top: -1px; right: -1px; bottom: -1px;
  box-sizing: border-box;
  width: 12px;
  padding: var(--spacing-8) var(--spacing-4);
  display: flex;
}
.dropdown-scroll__track { position: relative; width: 4px; height: 100%; }
.dropdown-scroll__bar {
  position: absolute;
  top: 0; left: 0;
  width: 4px; height: 75%;
  background: var(--color-gray-50);
  border-radius: var(--radius-8);
}

/* ===== Живые интеракции (реальное поведение; в статичной витрине для
   compare.mjs не срабатывают — там нет ни курсора, ни фокуса). ===== */
/* Hover невыбранного таба — серое подчёркивание (как .tab--hover) */
.tab:not(.tab--disabled):not(.tab--selected):hover::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -1px;
  height: 2px;
  background: var(--color-gray-100);
}
.tab:focus-visible {
  outline: 2px solid var(--color-accent-400);
  outline-offset: -2px;
  border-radius: var(--radius-4);
}
/* Live-hover пункта меню */
.dropdown-item:hover { background: var(--color-gray-25); }

/* Интерактивное меню More: скрыто, пока не открыто (атрибут не задевает
   статичную реплику, где меню показано для документации). */
.tabs__more[data-menu] .dropdown-list { display: none; }
.tabs__more[data-menu].is-open .dropdown-list { display: flex; }