/* ==========================================================================
   Mode Selector (בורר מצבים) — Tickchak Design System
   מסונכרן מפיגמה: Qw3YeURNIL8V1wdGubxIWQ / node 12693-3179 (ModeSelector)
   ----------------------------------------------------------------------
   בורר-מצבים מסוג segmented: מסלול בהיר (5% שחור) + גלולה לבנה על המצב הפעיל.
   טאב = תווית + אייקון-עיגול (אופציונלי). עובד ל-2 או 3 מצבים (flex — אוטומטי), RTL.

   Usage:
     <div class="mode-selector" data-size="M" style="--ms-count:3" role="tablist">
       <span class="mode-selector__pill" aria-hidden="true"></span>   <!-- הגלולה הנעה -->
       <button class="mode-selector__tab is-active" role="tab" aria-selected="true">
         <span class="mode-selector__label">מצב 1</span>
         <span class="mode-selector__icon"><!-- svg/img אופציונלי --></span>
       </button>
       <button class="mode-selector__tab" role="tab" aria-selected="false">…</button>
       <button class="mode-selector__tab" role="tab" aria-selected="false">…</button>
     </div>

   size:  data-size="S | M | L"  (ברירת מחדל M)
   מצבים: 2 או 3 טאבים — נמתחים שווה (flex)
   האנימציה: הגלולה מונעת ע"י שני משתנים שה-host מעדכן בלחיצה —
             --ms-count (מספר הטאבים) ו--ms-index (אינדקס הפעיל, 0-based).
             מוסיפים .is-ready אחרי המיקום הראשוני כדי שלא תחליק בטעינה.
   בלי אייקונים: פשוט אל תוסיף <span class="mode-selector__icon">
   Required tokens: tokens.css
   ========================================================================== */

.mode-selector{
  /* M (ברירת מחדל) */
  --ms-h:32px;
  --ms-radius:var(--space-lg,16px);
  --ms-pill-radius:var(--border-radius-lg,12px);
  --ms-text:var(--font-size-body-small,14px);
  --ms-icon:16px;

  position:relative;
  display:flex;
  align-items:center;
  width:100%;
  height:var(--ms-h);
  background:var(--tl-color-bg-surface-inverse,rgba(0,0,0,0.05));   /* טוקן-Live (כמו .sgs) */
  border-radius:var(--ms-radius);
  box-sizing:border-box;
  font-family:inherit;   /* יורש את פונט-ההקשר: Rubik ב-Live, Assistant ב-App */
}
.mode-selector[data-size="S"]{ --ms-h:28px; --ms-radius:14px; --ms-pill-radius:10px; --ms-text:12px; --ms-icon:12px; }
.mode-selector[data-size="L"]{ --ms-h:40px; --ms-radius:20px; --ms-pill-radius:16px; --ms-text:16px; --ms-icon:20px; }

/* הגלולה הלבנה הנעה — רוחב = 1/מספר-הטאבים, ממוקמת לפי --ms-index, מחליקה ב-transition.
   inset-inline-start → RTL-מודע (מתחילה מימין ב-RTL). */
.mode-selector__pill{
  position:absolute;
  top:var(--space-xs,4px);
  bottom:var(--space-xs,4px);
  inset-inline-start:calc(var(--ms-index,0) * (100% / var(--ms-count,3)) + var(--space-xs,4px));
  width:calc((100% / var(--ms-count,3)) - 2 * var(--space-xs,4px));
  background:var(--tl-color-bg-baseAlt,#fff);
  border-radius:var(--ms-pill-radius);
  box-shadow:0 1px 4px rgba(0,0,0,0.25);
  z-index:0;
  pointer-events:none;
}
/* מחליקה רק אחרי מיקום ראשוני (מונע החלקה בטעינה) */
.mode-selector.is-ready .mode-selector__pill{
  transition:inset-inline-start .28s cubic-bezier(.4,0,.2,1);
}

.mode-selector__tab{
  position:relative;
  z-index:1;                          /* מעל הגלולה */
  flex:1 1 0;
  min-width:0;
  height:100%;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  padding:0 var(--space-sm,8px);
  background:none;
  border:0;
  cursor:pointer;
  font-family:inherit;
  font-size:var(--ms-text);
  font-weight:var(--font-weight-semibold,600);
  line-height:1.2;
  color:var(--color-grays-500,#999999);   /* לא-נבחר = אפור (primitive Grays/500, כמו בפיגמה) */
  white-space:nowrap;
  -webkit-tap-highlight-color:transparent;
  transition:color .2s;
}
.mode-selector__tab.is-active{ color:var(--tl-color-text-inverse-default,#000); }   /* נבחר = כהה */
.mode-selector__tab:not(.is-active):hover{ color:var(--tl-color-text-inverse-default,#000); }   /* hover — כהה */

.mode-selector__icon{
  flex:none;
  width:var(--ms-icon);
  height:var(--ms-icon);
  border-radius:50%;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
  background:rgba(153,153,153,0.5);        /* placeholder — מוחלף באייקון אמיתי */
}
.mode-selector__icon:not(:empty){ background:none; border-radius:0; overflow:visible; }   /* אייקון SVG אמיתי → טבעי, בלי דיסק/חיתוך */
.mode-selector__icon svg{ stroke-width:1; }
.mode-selector__icon img,
.mode-selector__icon svg{ width:100%; height:100%; display:block; }