/* ring: commons
 * seed: snap
 * still: ./still.md
 * reduced: cut (instant selected; no pill travel)
 * when-not: inverted-radius div hacks, meniscus-01 3-arc socket (later gold), >5 slots, panels of different height, keyboard-only chrome used hundreds of times a day
 *
 * C-TAB-MENISCUS — melon-04 sliding pill first. One seed (snap). Max 5 slots.
 * Pill is a rect that translates + scaleX. Not a fake notch.
 */

[data-c-tab-meniscus] {
  --c-tab-x: 0px;
  --c-tab-s: 1;
  --c-tab-base: 64px;
  color: var(--os-ink);
  max-width: 100%;
}

[data-c-tab-meniscus] .c-tab-list {
  position: relative;
  display: flex;
  align-items: stretch;
  width: 100%;
  padding: 4px;
  border: 1px solid var(--os-rule);
  border-radius: var(--os-radius-pill);
  background: var(--os-ground);
  isolation: isolate;
}

[data-c-tab-meniscus] .c-tab-pill {
  position: absolute;
  top: 4px;
  bottom: 4px;
  left: 0;
  width: var(--c-tab-base);
  border-radius: var(--os-radius-pill);
  background: var(--os-ink);
  pointer-events: none;
  z-index: 0;
  transform-origin: left center;
  transform: translateX(var(--c-tab-x)) scaleX(var(--c-tab-s));
  transition:
    transform var(--ss-snap-duration, 180ms) var(--ss-snap-easing, cubic-bezier(0.32, 0, 0.09, 1));
}

[data-c-tab-meniscus] [role="tab"] {
  position: relative;
  z-index: 1;
  flex: 1 1 0;
  min-width: 0;
  min-height: 44px;
  margin: 0;
  padding: 8px 8px;
  border: 0;
  border-radius: var(--os-radius-pill);
  background: transparent;
  color: var(--os-muted);
  font: inherit;
  font-size: 13px;
  letter-spacing: -0.01em;
  line-height: 1.2;
  cursor: pointer;
}

[data-c-tab-meniscus] [role="tab"][aria-selected="true"] {
  color: var(--os-ground);
}

[data-c-tab-meniscus] [role="tab"]:focus-visible {
  outline: var(--os-focus-ring-width) solid var(--os-focus-ring-color);
  outline-offset: var(--os-focus-ring-offset);
}

[data-c-tab-meniscus] [role="tabpanel"] {
  margin-top: 16px;
  padding: 16px;
  min-height: 5.5em;
  border: 1px solid var(--os-rule);
  border-radius: var(--os-radius-sm);
  background: var(--os-ground);
  font-size: 14px;
}

[data-c-tab-meniscus] [role="tabpanel"][hidden] {
  display: none;
}

html[data-theme="night"] [data-c-tab-meniscus],
html[data-night="1"] [data-c-tab-meniscus] {
  color: var(--os-ground);
}

html[data-theme="night"] [data-c-tab-meniscus] .c-tab-list,
html[data-theme="night"] [data-c-tab-meniscus] [role="tabpanel"],
html[data-night="1"] [data-c-tab-meniscus] .c-tab-list,
html[data-night="1"] [data-c-tab-meniscus] [role="tabpanel"] {
  background: color-mix(in oklab, var(--os-ground-void) 88%, var(--os-ground));
  border-color: color-mix(in oklab, var(--os-ground) 16%, transparent);
}

html[data-theme="night"] [data-c-tab-meniscus] .c-tab-pill,
html[data-night="1"] [data-c-tab-meniscus] .c-tab-pill {
  background: var(--os-ground);
}

html[data-theme="night"] [data-c-tab-meniscus] [role="tab"],
html[data-night="1"] [data-c-tab-meniscus] [role="tab"] {
  color: color-mix(in oklab, var(--os-ground) 55%, var(--os-ground-void));
}

html[data-theme="night"] [data-c-tab-meniscus] [role="tab"][aria-selected="true"],
html[data-night="1"] [data-c-tab-meniscus] [role="tab"][aria-selected="true"] {
  color: var(--os-ground-void);
}