/* 좁은 폭에서는 줄 전체가 하나로 가로 밀림. 밀지 여부는 문맥 변수로 껍데기가 정함(TopBar.css 의
   topbar__menus 와 같은 자리). 문맥 변수가 없는 자리(보드)에선 기본값 wrap 이 줄바꿈해 안 넘침.
   min-width: 0 이 없으면 내용 폭만큼 안 줄어 담는 화면이 넓어짐(docs/components/TabBar.md) */
.tabbar {
  display: flex;
  flex-wrap: var(--tabbar-wrap, wrap);
  align-items: center;
  min-width: 0;
  gap: var(--space-inline-md);
  border-bottom: var(--border-width) solid var(--border-default);
  overflow-x: var(--tabbar-scroll, visible);
  overscroll-behavior-x: contain;
  scrollbar-width: none;
  scroll-padding-inline-end: var(--measure-topbar-fade);
}
.tabbar::-webkit-scrollbar { display: none; }

/* 767px 이하면 늘 뜸(AppShell.css 가 그 폭에서 문맥 변수를 걺). 그 폭에서 실제로 넘치는지는 안 가림.
   폭 값은 TopBar 그늘과 같은 뜻이라 토큰을 새로 안 만들고 그대로 씀(docs/components/TabBar.md) */
.tabbar::after {
  content: '';
  display: var(--tabbar-fade, none);
  position: sticky;
  inset-inline-end: 0;
  align-self: stretch;
  flex: none;
  width: var(--measure-topbar-fade);
  background: linear-gradient(to right, transparent, var(--surface-page));
  pointer-events: none;
}

.tabbar__tabs {
  display: flex;
  flex: none;
  gap: var(--space-inline-md);
}

/* margin-left: auto 는 남는 폭이 있을 때(넓은 화면)만 오른쪽 끝까지 밀고, 줄 전체가 밀리는 좁은
   화면에서는 그냥 탭 다음에 이어짐. 왼쪽 경계선으로 탭 묶음과 갈림(docs/components/TabBar.md) */
.tabbar__right {
  display: flex;
  flex: none;
  align-items: center;
  gap: var(--space-inline-sm);
  margin-left: auto;
  padding-left: var(--space-inline-md);
  border-left: var(--border-width) solid var(--border-default);
}

.tabbar__item {
  display: inline-block;
  color: var(--text-muted);
  text-decoration: none;
  white-space: nowrap;
  border-bottom: var(--border-width) solid transparent;
  padding: var(--space-inset-sm) 0;
}

.tabbar__item--on { color: var(--text-default); border-bottom-color: var(--border-strong); }
/* 옅게 해서 안 눌리는 자리가 눈으로 갈림. cursor 차이만으로는 폰에서 안 드러남 */
.tabbar__item--off { cursor: default; opacity: 0.5; }