/* Tabs — табы-вкладки над контентом (буфер, U.pending.Tabs). Макет 20015:237027.
   Ряд pad 0 16 gap 8 · подложка 44, pad 4, r100, $Surface/Widget · пункт 36, пад 8/12 + текст 0/4, Body S 14/18 · выбранный — $Actions/Tertiary Grey.
   Скругления — только капсулы (r ≥ половины высоты), squircle.py их не трогает. */
@property --u-ptabs-fl { syntax: "<length>"; inherits: false; initial-value: 0px; }
@property --u-ptabs-fr { syntax: "<length>"; inherits: false; initial-value: 0px; }

.u-ptabs { display: flex; align-items: center; gap: 8px; padding: 0 16px; min-width: 0; }
.u-ptabs.is-nopad { padding: 0; }
.u-ptabs__bar { position: relative; flex: 1 1 0; min-width: 0; height: 44px; border-radius: 100px; background: var(--c-surface-widget); overflow: hidden; isolation: isolate; }
.u-ptabs__bar.is-hug { flex: none; }
.u-ptabs__bar.is-grey { background: var(--c-actions-tertiary-grey); }
.u-ptabs__bar.is-sk { border-radius: 100px; }

/* скролл внутри подложки; по краям — fade маской (фон контекста), появляется, когда за краем есть пункты */
.u-ptabs__sc { height: 100%; overflow-x: auto; overflow-y: hidden; scrollbar-width: none; overscroll-behavior-x: contain; -webkit-overflow-scrolling: touch;
  --u-ptabs-fl: 0px; --u-ptabs-fr: 0px; transition: --u-ptabs-fl .2s ease, --u-ptabs-fr .2s ease;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 var(--u-ptabs-fl), #000 calc(100% - var(--u-ptabs-fr)), transparent);
          mask-image: linear-gradient(90deg, transparent, #000 var(--u-ptabs-fl), #000 calc(100% - var(--u-ptabs-fr)), transparent); }
.u-ptabs__sc::-webkit-scrollbar { display: none; }
.u-ptabs__sc.is-l { --u-ptabs-fl: 24px; }
.u-ptabs__sc.is-r { --u-ptabs-fr: 24px; }

.u-ptabs__track { position: relative; display: flex; height: 100%; padding: 4px; width: max-content; min-width: 100%; }
.is-fit > .u-ptabs__sc > .u-ptabs__track { width: 100%; }
.is-hug > .u-ptabs__sc > .u-ptabs__track { min-width: 0; }

/* пункт: делят ширину поровну (FILL), не уже своего текста; пад 4 — как у FILL-чипсов макета, где Figma сжимает пад 12 (61.75 при тексте 37).
   is-over (не влезают — скролл) и is-hug: пункт по контенту с падом Chips 8/12 + текст 0/4 */
.u-ptabs__it { position: relative; z-index: 1; flex: 1 1 0; display: inline-flex; align-items: center; justify-content: center; height: 36px; padding: 8px 4px;
  border-radius: 100px; font: 500 14px/18px var(--font-ui); letter-spacing: 0; color: var(--c-text-primary); white-space: nowrap; user-select: none; -webkit-user-select: none;
  transition: transform .1s ease; }
.u-ptabs__it.is-icon { flex: 1 0 36px; min-width: 36px; padding: 8px; }
.is-hug .u-ptabs__it.is-icon { flex: none; width: 36px; }
.is-hug .u-ptabs__it, .is-over .u-ptabs__it { flex: none; }
.is-hug .u-ptabs__it:not(.is-icon), .is-over .u-ptabs__it:not(.is-icon) { padding: 8px 12px; }
.u-ptabs__ic { position: relative; width: 20px; height: 20px; flex: none; }
.u-ptabs__ic > .u-ic { position: absolute; left: 50%; top: 50%; translate: -50% -50%; }
.u-ptabs__tx { padding: 0 4px; max-width: 172px; --fade: 16px; }
.is-fit .u-ptabs__it { min-width: 0; }
.is-fit .u-ptabs__tx { max-width: none; }
.u-ptabs__it:not(:disabled):active { transform: scale(.96); }
.u-ptabs__it:disabled { color: var(--c-text-disabled); cursor: default; }
.uz .u-ptabs__it:focus-visible { outline-offset: -2px; }

/* индикатор выбранного: переезжает и меняет ширину; внутренний слой уменьшается вместе с нажатым выбранным пунктом */
.u-ptabs__ind { position: absolute; z-index: 0; left: 0; top: 4px; height: 36px; pointer-events: none; will-change: transform, width; }
.u-ptabs__ind > i { display: block; height: 100%; border-radius: 100px; background: var(--c-actions-tertiary-grey); transition: transform .1s ease; }
.is-grey .u-ptabs__ind > i { background: var(--c-actions-tertiary-white); }
.u-ptabs__ind.is-anim { transition: transform 380ms cubic-bezier(.32, .72, 0, 1), width 380ms cubic-bezier(.32, .72, 0, 1); }
.u-ptabs__bar:has(.u-ptabs__it.is-on:not(:disabled):active) .u-ptabs__ind > i { transform: scale(.96); }

@media (prefers-reduced-motion: reduce) {
  .u-ptabs__ind.is-anim, .u-ptabs__sc { transition: none; }
}