/**
 * DynamicToggle v2 — CSS state transitions.
 *
 * Rules requiring :has(), container queries, clip-path, or pseudo-elements.
 * Layout, colors, sizing in Tailwind (DynamicToggle.styles.ts).
 *
 * @import '@mks2508/mks-ui/react/ui/DynamicToggle/DynamicToggle.module.css';
 */

/* ── Variables ── */
[data-slot="dt-root"] {
  --dt-dur: 0.22s;
  --dt-ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --dt-fade: 0.45;
  --dt-indicator-dur: 0.3s;
  --dt-indicator-ease: cubic-bezier(0.4, 0, 0.2, 1);
}

/* ── Track: explicit row prevents h-full items from overflowing container ── */
[data-slot="dt-root"] [data-slot="dt-track"] {
  grid-template-rows: minmax(0, 1fr);
}

/* ── Top-level option spans 2 grid cols ── */
[data-slot="dt-root"] [data-slot="dt-track"] > label {
  grid-column: span 2;
}

/* ── Primary option text ── */
[data-slot="dt-root"] [data-slot="dt-track"]:has(> input:checked) > label {
  color: var(--accent-foreground);
  z-index: 2;
}
[data-slot="dt-root"] [data-slot="dt-track"]:not(:has(> input:checked)) > label {
  color: var(--foreground);
  opacity: var(--dt-fade);
}

/* ── Group: container queries ── */
[data-slot="dt-root"] [data-slot="dt-group"] {
  container-type: size;
  overflow: hidden;
}

/* ══════════════════════════════════════════════════════════
 * INDICATOR POSITIONING
 *
 * Modern: CSS Anchor Positioning — indicator follows active option
 * Fallback: translate-based positioning for older browsers
 * ══════════════════════════════════════════════════════════ */

/* ── Anchor-based indicator (requires full anchor API) ── */
@supports (anchor-scope: all) {
  /* Scope anchors per toggle instance */
  [data-slot="dt-root"]:not([data-indicator="translate"]) {
    anchor-scope: --dt-active;
  }

  /* Active option becomes the anchor via native :checked */
  [data-slot="dt-root"]:not([data-indicator="translate"]) [data-slot="dt-track"] > label:has(+ input:checked) {
    anchor-name: --dt-active;
  }
  [data-slot="dt-root"]:not([data-indicator="translate"]) [data-slot="dt-group"] > label:has(+ input:checked) {
    anchor-name: --dt-active;
  }

  /* Single unified indicator: morphs from full-width to half-width */
  [data-slot="dt-root"]:not([data-indicator="translate"]) [data-slot="dt-indicator"] {
    position-anchor: --dt-active;
    top: anchor(top);
    right: anchor(right);
    bottom: anchor(bottom);
    left: anchor(left);
    translate: none;
    width: auto;
    transition:
      top var(--dt-indicator-dur) var(--dt-indicator-ease),
      right var(--dt-indicator-dur) var(--dt-indicator-ease),
      bottom var(--dt-indicator-dur) var(--dt-indicator-ease),
      left var(--dt-indicator-dur) var(--dt-indicator-ease);
  }

  /* Hide the group indicator — unified indicator handles everything */
  [data-slot="dt-root"]:not([data-indicator="translate"]) [data-slot="dt-group-indicator"] {
    display: none;
  }
}

/* ── Inset-based fallback (older browsers) — same morph as anchor but hardcoded ── */
@supports not (anchor-scope: all) {
  /* Unified indicator: left/right transition morphs width + position */
  [data-slot="dt-root"] [data-slot="dt-indicator"] {
    left: 50%;
    right: 0;
    width: auto;
    translate: none;
    transition:
      left var(--dt-indicator-dur) var(--dt-indicator-ease),
      right var(--dt-indicator-dur) var(--dt-indicator-ease);
  }
  /* Top-level checked: indicator covers left half */
  [data-slot="dt-root"] [data-slot="dt-track"]:has(> input:checked) [data-slot="dt-indicator"] {
    left: 0;
    right: 50%;
  }
  /* Group option 1 checked: indicator at 3rd quarter */
  [data-slot="dt-root"] [data-slot="dt-group"]:has(input:nth-of-type(1):checked) ~ [data-slot="dt-indicator"],
  [data-slot="dt-root"] [data-slot="dt-track"]:has([data-slot="dt-group"] input:nth-of-type(1):checked) [data-slot="dt-indicator"] {
    left: 50%;
    right: 25%;
  }
  /* Group option 2 checked: indicator at 4th quarter */
  [data-slot="dt-root"] [data-slot="dt-group"]:has(input:nth-of-type(2):checked) ~ [data-slot="dt-indicator"],
  [data-slot="dt-root"] [data-slot="dt-track"]:has([data-slot="dt-group"] input:nth-of-type(2):checked) [data-slot="dt-indicator"] {
    left: 75%;
    right: 0;
  }
  /* Hide group indicator — unified indicator handles everything */
  [data-slot="dt-root"] [data-slot="dt-group-indicator"] {
    display: none;
  }
}

/* ── Force inset mode via data-indicator="translate" (works regardless of @supports) ── */
[data-slot="dt-root"][data-indicator="translate"] [data-slot="dt-indicator"] {
  left: 50%;
  right: 0;
  width: auto;
  translate: none;
  transition:
    left var(--dt-indicator-dur) var(--dt-indicator-ease),
    right var(--dt-indicator-dur) var(--dt-indicator-ease);
}
[data-slot="dt-root"][data-indicator="translate"] [data-slot="dt-track"]:has(> input:checked) [data-slot="dt-indicator"] {
  left: 0;
  right: 50%;
}
[data-slot="dt-root"][data-indicator="translate"] [data-slot="dt-track"]:has([data-slot="dt-group"] input:nth-of-type(1):checked) [data-slot="dt-indicator"] {
  left: 50%;
  right: 25%;
}
[data-slot="dt-root"][data-indicator="translate"] [data-slot="dt-track"]:has([data-slot="dt-group"] input:nth-of-type(2):checked) [data-slot="dt-indicator"] {
  left: 75%;
  right: 0;
}
[data-slot="dt-root"][data-indicator="translate"] [data-slot="dt-group-indicator"] {
  display: none;
}

/* ══════════════════════════════════════════════════════════
 * GROUP COLLAPSED STATE
 *
 * ::before = title text (via data-label attr)
 * ::after  = combined opts text (via data-opts attr)
 * <label>s = controlled by data-collapsed mode
 *
 * 3 modes: title | opts | title-opts (default)
 * ══════════════════════════════════════════════════════════ */

/* ── ::before — group title ── */
[data-slot="dt-group"]::before {
  content: attr(data-label);
  position: absolute;
  left: 50%;
  top: 50%;
  translate: -50% -80%;
  color: var(--foreground);
  font-size: inherit;
  font-weight: 500;
  z-index: 2;
  white-space: nowrap;
  pointer-events: none;
  transition:
    scale var(--dt-dur) var(--dt-ease),
    translate var(--dt-dur) var(--dt-ease),
    opacity var(--dt-dur) var(--dt-ease);
}

/* ── ::after — combined opts text ── */
[data-slot="dt-group"]::after {
  content: attr(data-opts);
  position: absolute;
  left: 50%;
  top: 50%;
  translate: -50% 20%;
  color: var(--muted-foreground);
  font-size: 0.85em;
  opacity: 0.6;
  z-index: 2;
  white-space: nowrap;
  pointer-events: none;
  transition: opacity var(--dt-dur) var(--dt-ease);
}
[data-slot="dt-group"]:not([data-opts])::after {
  content: none;
}

/* ── Group labels — transition props ── */
[data-slot="dt-root"] [data-slot="dt-group"] label {
  color: var(--muted-foreground);
  cursor: pointer;
  z-index: 2;
  transition:
    color var(--dt-dur) var(--dt-ease),
    opacity var(--dt-dur) var(--dt-ease),
    translate var(--dt-dur) var(--dt-ease);
}
[data-slot="dt-root"] [data-slot="dt-group"] label span {
  display: grid;
  place-items: center;
  height: 100%;
  width: 100%;
  border-radius: var(--dt-radius, 9999px);
  transition: scale var(--dt-dur) var(--dt-ease);
}

/* ── Collapsed mode: "title" — only ::before, labels slide+scale out ── */
[data-slot="dt-group"][data-collapsed="title"]::before {
  translate: -50% -50%;
}
[data-slot="dt-group"][data-collapsed="title"]::after {
  display: none;
}
[data-slot="dt-group"][data-collapsed="title"]:not(:has(input:checked)) label {
  opacity: 0;
  translate: 0 30%;
}
[data-slot="dt-group"][data-collapsed="title"]:not(:has(input:checked)) label span {
  scale: 0.5;
}

/* ── Collapsed mode: "opts" — only ::after, labels slide+scale out ── */
[data-slot="dt-group"][data-collapsed="opts"]::before {
  display: none;
}
[data-slot="dt-group"][data-collapsed="opts"]::after {
  translate: -50% -50%;
  font-size: inherit;
  opacity: 0.7;
}
[data-slot="dt-group"][data-collapsed="opts"]:not(:has(input:checked)) label {
  opacity: 0;
  translate: 0 30%;
}
[data-slot="dt-group"][data-collapsed="opts"]:not(:has(input:checked)) label span {
  scale: 0.5;
}

/* ── Collapsed mode: "title-opts" — WIP: disabled, falls back to "title" behavior ── */
/* TODO: title-opts needs a redesign — title (::before) and scaled labels overlap
   at all container sizes. The codepen original morph relied on specific dimensions
   that don't translate to the component's size variants. Needs a different approach
   (e.g., crossfade, flex layout, or JS-measured positions). */
[data-slot="dt-group"][data-collapsed="title-opts"]::after {
  content: none;
}
[data-slot="dt-group"][data-collapsed="title-opts"]::before {
  translate: -50% -50%;
}
[data-slot="dt-group"][data-collapsed="title-opts"]:not(:has(input:checked)) label {
  opacity: 0;
  translate: 0 30%;
}

/* ── When group expanded ── */
[data-slot="dt-group"]:has(input:checked)::before {
  translate: -50% -250%;
  scale: 0.85;
}
[data-slot="dt-group"]:has(input:checked)::after {
  opacity: 0;
}
[data-slot="dt-group"]:has(input:checked) label {
  opacity: 0.75;
  color: var(--muted-foreground);
  translate: 0 0;
}
[data-slot="dt-group"]:has(input:checked) label span {
  scale: 1;
}
[data-slot="dt-group"]:has(input:nth-of-type(1):checked) label:nth-of-type(1),
[data-slot="dt-group"]:has(input:nth-of-type(2):checked) label:nth-of-type(2) {
  color: var(--foreground);
  opacity: 1;
}

/* ══════════════════════════════════════════════════════════
 * GROUP LABEL / BUBBLE (above or below the pill)
 *
 * Positioned via CSS. In filter/path morph modes, rendered with GooeyCanvas.
 * In none mode, simple CSS-driven show/hide.
 * bubblePosition: top | bottom (no left/right in v2)
 * ══════════════════════════════════════════════════════════ */

[data-slot="dt-group-label"] {
  display: grid;
  grid-template-rows: 0fr;
  left: 20%;
  right: 20%;
  transition:
    grid-template-rows calc(var(--dt-dur) * 1.5) var(--dt-ease),
    opacity var(--dt-dur) var(--dt-ease);
  opacity: 0;
  background: var(--card);
  border: 1px solid var(--border);
  z-index: 3;
  transform: translateZ(0);
  -webkit-transform: translateZ(0);
}
[data-slot="dt-group-label"] > span {
  overflow: hidden;
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 0.75em;
  height: calc(var(--dt-h, 38px) * 0.4);
  box-sizing: border-box;
}

/* Top position */
[data-slot="dt-group-label"][data-bubble-position="top"] {
  bottom: 100%;
  border-radius: calc(var(--dt-h, 38px) * 0.2) calc(var(--dt-h, 38px) * 0.2) 0 0;
  border-bottom: none;
  margin-bottom: -1px;
}

/* Bottom position */
[data-slot="dt-group-label"][data-bubble-position="bottom"] {
  top: 100%;
  border-radius: 0 0 calc(var(--dt-h, 38px) * 0.2) calc(var(--dt-h, 38px) * 0.2);
  border-top: none;
  margin-top: -1px;
}

/* When group active → group label grows (vertical: top/bottom) */
[data-slot="dt-root"]:not(:has([data-slot="dt-track"] > input:checked)) [data-slot="dt-group-label"][data-bubble-position="top"],
[data-slot="dt-root"]:not(:has([data-slot="dt-track"] > input:checked)) [data-slot="dt-group-label"][data-bubble-position="bottom"] {
  grid-template-rows: 1fr;
  opacity: 1;
}
[data-slot="dt-root"]:not(:has([data-slot="dt-track"] > input:checked)) [data-slot="dt-group-label"][data-bubble-position="top"] > span,
[data-slot="dt-root"]:not(:has([data-slot="dt-track"] > input:checked)) [data-slot="dt-group-label"][data-bubble-position="bottom"] > span {
  padding: 0.35em 0.75em;
}

/* ── Filter morph mode ── */
[data-slot="dt-root"][data-morph="filter"] [data-slot="dt-group-label"] {
  border: none;
}
[data-slot="dt-root"][data-morph="filter"] [data-slot="dt-track"] {
  position: relative;
  z-index: 1;
}

/* ── Filter morph: ::before hides on expand, gooey canvas handles junction ── */
[data-slot="dt-root"][data-morph="filter"] [data-slot="dt-group"]:has(input:checked)::before {
  opacity: 0;
  translate: -50% -80%;
  scale: 1;
}

/* ── Path morph mode ── */
[data-slot="dt-root"][data-morph="path"] [data-slot="dt-track"] {
  position: relative;
  z-index: 1;
}