/* ─── Tabs ─────────────────────────────────────────────────────────────────────
   Values: site/tokens.css (--ds-tab-* tokens)
   Consumers: site/preview/tabs.html + src/components/Tabs/Tabs.tsx
   States: data-attributes only
   ─────────────────────────────────────────────────────────────────────────── */

/* ── Root ──────────────────────────────────────────────────────────────────── */

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

.ds-tabs[data-orientation='vertical'] {
  flex-direction: row;
}

/* ── Tablist ───────────────────────────────────────────────────────────────── */

.ds-tabs-list {
  display:          flex;
  flex-direction:   row;
  position:         relative;
  overflow-x:       auto;
  scrollbar-width:  none;
}

.ds-tabs-list::-webkit-scrollbar {
  display: none;
}

.ds-tabs[data-orientation='vertical'] .ds-tabs-list {
  flex-direction: column;
  overflow-x:     unset;
  overflow-y:     auto;
}

/* ── Divider (pseudo-element, toggled by data-divider on root) ─────────────── */

.ds-tabs[data-divider] .ds-tabs-list::after {
  content:    '';
  position:   absolute;
  background: var(--ds-tab-divider-color);
}

.ds-tabs[data-divider]:not([data-orientation='vertical']) .ds-tabs-list::after {
  bottom: 0;
  left:   0;
  right:  0;
  height: 1px;
}

.ds-tabs[data-divider][data-orientation='vertical'] .ds-tabs-list::after {
  top:    0;
  right:  0;
  bottom: 0;
  width:  1px;
}

/* ── Tab button — base ─────────────────────────────────────────────────────── */

.ds-tabs-tab {
  position:    relative;
  display:     inline-flex;
  align-items: center;
  flex-shrink: 0;
  border:      none;
  background:  transparent;
  color:       var(--ds-text-tertiary);
  font-family: inherit;
  font-weight: 500;
  cursor:      pointer;
  white-space: nowrap;
  outline:     none;
  transition:  color var(--ds-dur-2) var(--ds-ease), background var(--ds-dur-2) var(--ds-ease);
  -webkit-tap-highlight-color: transparent;

  /* MD defaults */
  height:      var(--ds-tab-md-h);
  padding:     0 var(--ds-tab-md-px);
  gap:         var(--ds-tab-md-gap);
  font-size:   var(--ds-tab-md-fs);
  line-height: var(--ds-tab-md-lh);
}

/* ── Sizes ─────────────────────────────────────────────────────────────────── */

.ds-tabs[data-size='sm'] .ds-tabs-tab {
  height:      var(--ds-tab-sm-h);
  padding:     0 var(--ds-tab-sm-px);
  gap:         var(--ds-tab-sm-gap);
  font-size:   var(--ds-tab-sm-fs);
  line-height: var(--ds-tab-sm-lh);
}

.ds-tabs[data-size='lg'] .ds-tabs-tab {
  height:      var(--ds-tab-lg-h);
  padding:     0 var(--ds-tab-lg-px);
  gap:         var(--ds-tab-lg-gap);
  font-size:   var(--ds-tab-lg-fs);
  line-height: var(--ds-tab-lg-lh);
}

/* ── Tab states ────────────────────────────────────────────────────────────── */

.ds-tabs-tab[data-hovered]:not([data-disabled]):not([data-selected]),
.ds-tabs-tab:hover:not([data-disabled]):not([data-selected]) {
  color:   var(--ds-text-primary);
  z-index: 1;
}

.ds-tabs-tab[data-pressed]:not([data-disabled]):not([data-selected]),
.ds-tabs-tab:active:not([data-disabled]):not([data-selected]) {
  color: var(--ds-text-primary);
}

.ds-tabs-tab[data-selected] {
  color:  var(--ds-text-primary);
  cursor: default;
}

.ds-tabs-tab[data-selected][data-hovered],
.ds-tabs-tab[data-selected]:hover {
  background: transparent;
}

.ds-tabs-tab[data-disabled] {
  color:          var(--ds-disabled-text);
  cursor:         not-allowed;
  pointer-events: none;
}

.ds-tabs-tab[data-focus-visible],
.ds-tabs-tab:focus-visible {
  box-shadow:    var(--ds-focus-ring);
  border-radius: 4px;
}

/* ── Sliding track indicator ─────────────────────────────────────────────── */
.ds-tabs-list {
  position: relative; /* ensure absolute children work */
}

.ds-tab-track-indicator {
  position: absolute;
  background: var(--ds-tab-indicator-color);
  z-index: 1;
  /* Horizontal default.
     Индикатор — это полоса без текста, поэтому scaleX не искажает контент.
     База по анимируемой оси = 1px; реальная ширина задаётся через scaleX(--indicator-width).
     translateX(--indicator-left) двигает полосу вдоль ряда вкладок.
     transform-origin: 0 0 — масштабирование и сдвиг считаются от левого-верхнего угла. */
  bottom: 0;
  left: 0;
  width: 1px;
  height: var(--ds-tab-indicator-h, 2px);
  border-radius: 9999px;
  transform-origin: 0 0;
  transform:
    translateX(var(--indicator-left, 0px))
    scaleX(var(--indicator-width, 40));
  /* Анимируем только transform — нет reflow в таблицах 200+ строк (never-do.md). */
  transition: transform var(--ds-dur-3) var(--ds-ease);
  pointer-events: none;
}

/* Vertical: indicator on the left edge.
   База по анимируемой оси (высота) = 1px; реальная высота через scaleY(--indicator-height).
   translateY(--indicator-top) двигает полосу вдоль колонки вкладок. */
.ds-tabs-list[data-orientation='vertical'] .ds-tab-track-indicator {
  left: 0;
  top: 0;
  bottom: auto;
  width: var(--ds-tab-indicator-h, 2px);
  height: 1px;
  border-radius: 9999px;
  transform-origin: 0 0;
  transform:
    translateY(var(--indicator-top, 0px))
    scaleY(var(--indicator-height, 40));
  transition: transform var(--ds-dur-3) var(--ds-ease);
}

/* Reduced motion: disable animation */
@media (prefers-reduced-motion: reduce) {
  .ds-tab-track-indicator { transition: none; }
}

/* ── Per-tab hover indicator ─────────────────────────────────────────────── */
.ds-tab-hover-indicator {
  position: absolute;
  bottom: 0;
  height: var(--ds-tab-indicator-h, 2px);
  left: var(--ds-tab-md-px);
  right: var(--ds-tab-md-px);
  background: var(--ds-tab-indicator-hover-color, var(--ds-nba-border));
  border-radius: 9999px;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--ds-dur-2) var(--ds-ease);
}
.ds-tabs[data-size='sm'] .ds-tab-hover-indicator {
  left: var(--ds-tab-sm-px);
  right: var(--ds-tab-sm-px);
}
.ds-tabs[data-size='lg'] .ds-tab-hover-indicator {
  left: var(--ds-tab-lg-px);
  right: var(--ds-tab-lg-px);
}

.ds-tabs-tab:hover:not([data-disabled]):not([data-selected]) .ds-tab-hover-indicator,
.ds-tabs-tab[data-hovered]:not([data-disabled]):not([data-selected]) .ds-tab-hover-indicator {
  opacity: 1;
}
.ds-tabs-tab:active:not([data-disabled]):not([data-selected]) .ds-tab-hover-indicator,
.ds-tabs-tab[data-pressed]:not([data-disabled]):not([data-selected]) .ds-tab-hover-indicator {
  opacity: 1;
}

/* Vertical: hover indicator on left edge */
.ds-tabs[data-orientation='vertical'] .ds-tab-hover-indicator {
  left: 0;
  right: auto;
  top: var(--ds-tab-md-py);
  bottom: var(--ds-tab-md-py);
  height: auto;
  width: var(--ds-tab-indicator-h, 2px);
}
.ds-tabs[data-orientation='vertical'][data-size='sm'] .ds-tab-hover-indicator {
  top: var(--ds-tab-sm-py);
  bottom: var(--ds-tab-sm-py);
}
.ds-tabs[data-orientation='vertical'][data-size='lg'] .ds-tab-hover-indicator {
  top: var(--ds-tab-lg-py);
  bottom: var(--ds-tab-lg-py);
}

@media (prefers-reduced-motion: reduce) {
  .ds-tab-hover-indicator { transition: none; }
}

/* ── Icon slot ─────────────────────────────────────────────────────────────── */

.ds-tabs-icon {
  display:     flex;
  align-items: center;
  flex-shrink: 0;
  width:       var(--ds-tab-md-icon);
  height:      var(--ds-tab-md-icon);
}

.ds-tabs[data-size='sm'] .ds-tabs-icon {
  width:  var(--ds-tab-sm-icon);
  height: var(--ds-tab-sm-icon);
}

.ds-tabs[data-size='lg'] .ds-tabs-icon {
  width:  var(--ds-tab-lg-icon);
  height: var(--ds-tab-lg-icon);
}

.ds-tabs-icon svg {
  width:  100%;
  height: 100%;
}

/* ── Label sub-wrapper: icon sits outside, text+badge inside ───────────────── */

.ds-tabs-label {
  display: flex;
  align-items: center;
  gap: var(--ds-tab-md-gap);
  padding-inline: var(--ds-tab-md-label-lr);
  flex: 1 1 auto;
  min-width: 0;
}
.ds-tabs-list[data-size='sm'] .ds-tabs-label {
  gap: var(--ds-tab-sm-gap);
  padding-inline: var(--ds-tab-sm-label-lr);
}
.ds-tabs-list[data-size='lg'] .ds-tabs-label {
  gap: var(--ds-tab-lg-gap);
  padding-inline: var(--ds-tab-lg-label-lr);
}

.ds-tabs-label-text {
  overflow:      hidden;
  text-overflow: ellipsis;
  white-space:   nowrap;
}

/* ── Badge slot ────────────────────────────────────────────────────────────── */

/* Tab counter badge — neutral pill.
   Figma 582:4688 child Badge "Soft": Static/Surface/Neutral/2-Medium (#ebedef / #2c3033 dark)
   + Static/Text/Neutral/Primary. Родитель таба прозрачный/страница (светлый) → по HC-adjacency
   нейтральная пилюля = surface-neutral-medium (видна в обеих темах). Размеры — Badge MD. */
.ds-tabs-badge {
  display:         inline-flex;
  align-items:     center;
  justify-content: center;
  flex-shrink:     0;
  min-width:       var(--ds-bdg-md-h);
  height:          var(--ds-bdg-md-h);
  padding:         0 var(--ds-bdg-md-px);
  border-radius:   var(--ds-radius-pill);
  font-size:       var(--ds-bdg-md-fs);
  font-weight:     500;
  line-height:     var(--ds-bdg-md-fs);
  letter-spacing:  0.04em;
  background:      var(--ds-surface-neutral-medium);
  color:           var(--ds-text-primary);
}

/* ── Tab panels ────────────────────────────────────────────────────────────── */

.ds-tabs-panels {
  flex: 1;
  min-width: 0;
}

.ds-tabs-panel {
  outline: none;
}

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

/* ── Tabs group wrapper (list + more button) ────────────────────────────────── */

.ds-tabs-group {
  display: flex;
  align-items: center;
  gap: var(--ds-tab-md-grp-gap);
  min-width: 0;
  overflow: hidden;
}

.ds-tabs[data-size='sm'] .ds-tabs-group { gap: var(--ds-tab-sm-grp-gap); }
.ds-tabs[data-size='lg'] .ds-tabs-group { gap: var(--ds-tab-lg-grp-gap); }

.ds-tabs-group .ds-tabs-list {
  overflow: hidden;
  flex: 1 1 0;
  min-width: 0;
}

/* ── More button ── */
.ds-tabs-more {
  position: relative;
  flex-shrink: 0;
}

.ds-tabs-more-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--ds-tab-md-h);
  height: var(--ds-tab-md-h);
  border: none;
  background: transparent;
  color: var(--ds-text-secondary);
  border-radius: var(--ds-radius-md, 8px);
  cursor: pointer;
  outline: none;
  transition: background var(--ds-dur-2) var(--ds-ease), color var(--ds-dur-2) var(--ds-ease);
}

.ds-tabs[data-size='sm'] .ds-tabs-more-btn {
  width: var(--ds-tab-sm-h);
  height: var(--ds-tab-sm-h);
}

.ds-tabs[data-size='lg'] .ds-tabs-more-btn {
  width: var(--ds-tab-lg-h);
  height: var(--ds-tab-lg-h);
}

.ds-tabs-more-btn:hover {
  background: var(--ds-nba-20);
  color: var(--ds-text-primary);
}

[data-theme='dark'] .ds-tabs-more-btn:hover {
  background: var(--ds-nba-40);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) .ds-tabs-more-btn:hover {
    background: var(--ds-nba-40);
  }
}

.ds-tabs-more-btn:focus-visible {
  box-shadow: var(--ds-focus-ring);
}

/* ── More dropdown menu ── */
.ds-tabs-more-menu {
  position: absolute;
  top: calc(100% + 4px);
  right: 0;
  min-width: 160px;
  background: var(--ds-surface);
  border: 1px solid var(--ds-border);
  border-radius: var(--ds-radius-md, 8px);
  box-shadow: var(--ds-shadow-md);
  padding: 4px;
  z-index: 100;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.ds-tabs-more-item {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 8px 12px;
  border: none;
  background: transparent;
  color: var(--ds-text-secondary);
  font-family: inherit;
  font-size: var(--ds-tab-md-fs);
  font-weight: 500;
  text-align: left;
  border-radius: 6px;
  cursor: pointer;
  outline: none;
  transition: background var(--ds-dur-1) var(--ds-ease), color var(--ds-dur-1) var(--ds-ease);
  white-space: nowrap;
}

.ds-tabs-more-item:hover {
  background: var(--ds-nba-20);
  color: var(--ds-text-primary);
}

[data-theme='dark'] .ds-tabs-more-item:hover {
  background: var(--ds-nba-40);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) .ds-tabs-more-item:hover {
    background: var(--ds-nba-40);
  }
}

.ds-tabs-more-item[data-selected] {
  color: var(--ds-text-primary);
  background: var(--ds-nba-15);
}

.ds-tabs-more-item:focus-visible {
  box-shadow: var(--ds-focus-ring);
}

/* ── Reduced motion ────────────────────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
  .ds-tabs-tab,
  .ds-tab-track-indicator,
  .ds-tab-hover-indicator,
  .ds-tabs-more-btn,
  .ds-tabs-more-item {
    transition: none !important;
    animation: none !important;
  }
}