/* ==========================================================================
   toggle-group.css
   ========================================================================== */
/* ==========================================================================
   Toggle Button & Toggle Group — PEGMENT Design System

   Not the on/off switch (.toggle, see toggle.css) — this is a pressable
   button that stays visually "on" once selected, the way a formatting
   toolbar button (Bold/Italic) or a filter chip works. Phase 1 (this
   file, so far): the standalone toggle button. Phase 2 (next): grouping
   several into a segmented .tgl-group.

   Component: .tgl-btn
   Types:     .tgl-btn--default  — filled neutral surface at rest
              .tgl-btn--ghost    — transparent at rest, visible border
   Sizes:     .tgl-btn--sm (32px) · default, no modifier (36px) · .tgl-btn--lg (40px)

   States (both types): default, hover, focus, selected, disabled.
   Selected uses the real `aria-pressed="true"` attribute — the same
   value a real toggle button's click handler would set — so a static
   docs example and actual runtime interaction use one selector, no
   separate demo-only class needed (see checkboxes.css's :checked lesson
   from earlier in this system).

   Content configurations (mirrors buttons.css):
     Text only, icon + text, text + icon, dot + text, icon only.
     Icons are Tabler <i class="ti ti-*"> (sized via --icon-size), not inline
     SVG — .tgl-btn__dot is the only shape-drawing element left in here.

   Colour tokens (defined in style.css, all 4 theme blocks):
     --toggle-btn-bg-default / -hover / -selected / -disabled
     --toggle-btn-label-default / -selected / -disabled
   Shared by both types — Default's resting bg IS bg-default; Ghost's
   resting bg stays transparent (border does the work instead), but both
   types converge on the same hover/selected/disabled/label tokens.
   ========================================================================== */

/* ─── Base ──────────────────────────────────────────────────────────────── */
.tgl-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: var(--font-base);
  font-weight: var(--font-weight-medium);
  font-size: var(--text-body-md-size);
  line-height: 20px;
  border: 1px solid transparent;
  border-radius: 999px;
  padding: 0 16px;
  height: 36px;
  cursor: pointer;
  white-space: nowrap;
  box-sizing: border-box;
  transition: background-color var(--transition-fast), border-color var(--transition-fast),
              color var(--transition-fast), box-shadow var(--transition-fast);
}

.tgl-btn:focus {
  outline: none;
}

.tgl-btn .ti {
  --icon-size: 16px;
}

.tgl-btn__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: currentColor;
  flex-shrink: 0;
}

/* ─── Sizes ─────────────────────────────────────────────────────────────── */
.tgl-btn--sm {
  height: 32px;
  padding: 0 12px;
  font-size: var(--text-title-sm-size);
  gap: 6px;
}


.tgl-btn--lg {
  height: 40px;
  padding: 0 20px;
  font-size: var(--text-body-lg-size);
  line-height: 24px;
  gap: 10px;
}


/* ─── Icon-only sizing ──────────────────────────────────────────────────── */
.tgl-btn--icon-only {
  padding: 0;
  width: 36px;
}

.tgl-btn--sm.tgl-btn--icon-only {
  width: 32px;
}

.tgl-btn--lg.tgl-btn--icon-only {
  width: 40px;
}

/* ════════════════════════════════════════════════════════════════════════
   TYPE: DEFAULT — filled neutral surface at rest
   ════════════════════════════════════════════════════════════════════════ */
.tgl-btn--default {
  background: var(--toggle-btn-bg-default);
  color: var(--toggle-btn-label-default);
  border-color: transparent;
}

.tgl-btn--default:hover:not(:disabled):not(.is-disabled),
.tgl-btn--default[data-hover]:not(:disabled):not(.is-disabled) {
  background: var(--toggle-btn-bg-hover);
}

.tgl-btn--default:focus-visible:not(:disabled):not(.is-disabled),
.tgl-btn--default[data-focus]:not(:disabled):not(.is-disabled) {
  background: var(--toggle-btn-bg-default);
  box-shadow: 0 0 0 2px var(--btn-primary-focus-ring-offset), 0 0 0 4px var(--btn-primary-focus-ring);
}

.tgl-btn--default[aria-pressed="true"]:not(:disabled):not(.is-disabled) {
  background: var(--toggle-btn-bg-selected);
  color: var(--toggle-btn-label-selected);
  border-color: transparent;
}

.tgl-btn--default:disabled,
.tgl-btn--default.is-disabled {
  background: var(--toggle-btn-bg-disabled);
  color: var(--toggle-btn-label-disabled);
  cursor: not-allowed;
}

/* ════════════════════════════════════════════════════════════════════════
   TYPE: GHOST — transparent at rest, visible border
   ════════════════════════════════════════════════════════════════════════ */
.tgl-btn--ghost {
  background: transparent;
  color: var(--toggle-btn-label-default);
}

.tgl-btn--ghost:hover:not(:disabled):not(.is-disabled),
.tgl-btn--ghost[data-hover]:not(:disabled):not(.is-disabled) {
  background: var(--toggle-btn-bg-hover);
}

.tgl-btn--ghost:focus-visible:not(:disabled):not(.is-disabled),
.tgl-btn--ghost[data-focus]:not(:disabled):not(.is-disabled) {
  background: transparent;
  box-shadow: 0 0 0 2px var(--btn-primary-focus-ring-offset), 0 0 0 4px var(--btn-primary-focus-ring);
}

.tgl-btn--ghost[aria-pressed="true"]:not(:disabled):not(.is-disabled) {
  background: var(--toggle-btn-bg-selected);
  color: var(--toggle-btn-label-selected);
}

.tgl-btn--ghost:disabled,
.tgl-btn--ghost.is-disabled {
  background: transparent;
  color: var(--toggle-btn-label-disabled);
  cursor: not-allowed;
}

/* ════════════════════════════════════════════════════════════════════════
   TOGGLE GROUP — Phase 2
   Several .tgl-btn fused into one segmented shape: a real .tgl-group__divider
   element between each pair, rounded only on the two outer ends, flat where
   buttons touch. Each button keeps its own state (default/hover/selected/
   disabled) independently — grouping is purely visual fusion, not a shared
   background.

   No overflow: hidden on the group — a focused button's ring extends
   past its own edges, and clipping it would cut the ring off for anyone
   tabbing through. Corner-rounding is done explicitly on the first/last
   child instead (matches the group's own border-radius).

   .tgl-group              — horizontal (row), hug width (default)
   .tgl-group--vertical    — column instead of row
   .tgl-group--fill        — stretch to fill the container; children
                              share the space equally (flex: 1 1 0)
   Sizes: put .tgl-btn--sm / .tgl-btn--lg on each child, same as a
   standalone toggle button — the group doesn't duplicate that switch.
   ════════════════════════════════════════════════════════════════════════ */
.tgl-group {
  display: inline-flex;
  background: var(--toggle-btn-bg-default);
  border-radius: 999px;
}

.tgl-group .tgl-btn {
  border-radius: 0;
}

/* .tgl-btn--default's own resting fill uses the SAME token as the group's
   own background (--toggle-btn-bg-default), and in light mode that token
   is translucent (#1C1C1C at 4%). A real divider div consumes its own 1px
   of flex track, so its slot only ever shows the single group-bg layer,
   while every button's slot shows that layer AND the button's own fill
   stacked on top (doubled alpha) — the mismatch reads as a lighter gap
   "splitting" the group at each divider. Swap both layers to an opaque
   sibling token (--toggle-group-bg-default) so there's nothing to stack;
   dark mode's bg-default is already opaque, so this is a light-mode-only
   fix in effect, but applying it unconditionally keeps one rule instead
   of forking per theme. :where() keeps this at zero specificity so
   hover/focus-visible/selected/disabled (all real classes/pseudo-classes
   on .tgl-btn--default) still win over it. */
.tgl-group:has(.tgl-btn--default) {
  background: var(--toggle-group-bg-default);
}

:where(.tgl-group:has(.tgl-btn--default)) .tgl-btn--default {
  background: var(--toggle-group-bg-default);
}

/* Divider: a real element between buttons — a short, centred hairline
   drawn with border-left/border-top on a zero-width/zero-height box.
   Blink pixel-snaps border geometry (unlike a background fill at a
   fractional flex position, which anti-aliases and varies per divider
   depending on preceding sibling widths), so every segment's bar comes
   out the same weight — same technique as .btn-group__divider. */
.tgl-group__divider {
  flex: 0 0 1px;
  width: 0;
  min-width: 0;
  align-self: center;
  height: 16px;
  margin: 0;
  border-left: 1px solid var(--color-border-medium);
  pointer-events: none;
}

.tgl-group:has(.tgl-btn--sm) .tgl-group__divider { height: 14px; }
.tgl-group:has(.tgl-btn--lg) .tgl-group__divider { height: 18px; }

.tgl-group--vertical .tgl-group__divider {
  flex: 0 0 1px;
  width: 16px;
  min-width: 16px;
  height: 0;
  align-self: center;
  margin: 0;
  border-left: 0;
  border-top: 1px solid var(--color-border-medium);
}

.tgl-group--vertical:has(.tgl-btn--sm) .tgl-group__divider { width: 14px; min-width: 14px; }
.tgl-group--vertical:has(.tgl-btn--lg) .tgl-group__divider { width: 18px; min-width: 18px; }

/* Horizontal (default): round the left edge of the first button, the
   right edge of the last. */
.tgl-group:not(.tgl-group--vertical) .tgl-btn:first-child {
  border-top-left-radius: 999px;
  border-bottom-left-radius: 999px;
}

.tgl-group:not(.tgl-group--vertical) .tgl-btn:last-child {
  border-top-right-radius: 999px;
  border-bottom-right-radius: 999px;
}

/* Vertical: round the top edge of the first button, the bottom of the last.
   A literal 999px here (unlike the horizontal case) rounds only the two
   corners on the WIDE edge, unpaired against a 0 on the narrow left/right
   edges — the border-radius overlap-correction algorithm then lets that
   corner claim nearly the button's full height, ballooning into a blob.
   Use an explicit radius equal to each size's own half-height instead, so
   the cap matches the button's natural pill curvature. */
.tgl-group--vertical {
  flex-direction: column;
  /* .tgl-group's own background (restored so ghost/transparent buttons get
     a visible backdrop) still needs its border-radius to match the child
     buttons' actual corner radius here — otherwise the group's base 999px
     rounds far more aggressively than the buttons' 16/18/20px caps, and
     that wider curve peeks out around the buttons as a mismatched halo. */
  border-radius: 18px;
}

.tgl-group--vertical:has(.tgl-btn--sm) {
  border-radius: 16px;
}

.tgl-group--vertical:has(.tgl-btn--lg) {
  border-radius: 20px;
}

.tgl-group--vertical .tgl-btn:first-child {
  border-top-left-radius: 18px;
  border-top-right-radius: 18px;
}

.tgl-group--vertical .tgl-btn:last-child {
  border-bottom-left-radius: 18px;
  border-bottom-right-radius: 18px;
}

.tgl-group--vertical .tgl-btn--sm:first-child {
  border-top-left-radius: 16px;
  border-top-right-radius: 16px;
}

.tgl-group--vertical .tgl-btn--sm:last-child {
  border-bottom-left-radius: 16px;
  border-bottom-right-radius: 16px;
}

.tgl-group--vertical .tgl-btn--lg:first-child {
  border-top-left-radius: 20px;
  border-top-right-radius: 20px;
}

.tgl-group--vertical .tgl-btn--lg:last-child {
  border-bottom-left-radius: 20px;
  border-bottom-right-radius: 20px;
}

/* Selected buttons inside a group skip the standalone button's selected
   border ring — the segment's own fused edges (plus the divider) already
   delineate it, so an added border there just looks like a stray outline. */
.tgl-group .tgl-btn[aria-pressed="true"]:not(:disabled):not(.is-disabled) {
  border-color: transparent;
}

/* .tgl-group--spaced: an alternate icon-only treatment, opt-in via
   modifier — the default group still fuses icon-only buttons into one
   segmented pill same as text buttons. Spaced keeps each button's own
   full circle, apart with a real gap and no divider, for toolbars where
   the fused look flattens circles into clipped-looking segments. */
.tgl-group--spaced {
  gap: 4px;
  background: transparent;
}

.tgl-group--spaced .tgl-btn {
  border-radius: 999px;
}

.tgl-group--spaced .tgl-group__divider {
  display: none;
}

/* Fill: group stretches to its container, children split the space
   evenly. Horizontal fill stretches width; vertical fill stretches
   height (needs a sized ancestor to have anything to fill). */
.tgl-group--fill {
  display: flex;
}

.tgl-group--fill:not(.tgl-group--vertical) {
  width: 100%;
}

.tgl-group--fill.tgl-group--vertical {
  height: 100%;
}

.tgl-group--fill .tgl-btn {
  flex: 1 1 0;
}

/* ─── Page layout helpers ─────────────────────────────────────────────── */
.tgl-demo { margin-bottom: var(--space-2xl); }

.tgl-demo__header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space-sm);
  margin-bottom: var(--space-lg);
}

.tgl-demo__label {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.tgl-demo__desc {
  font-size: var(--font-size-sm);
  color: var(--color-text-tertiary);
  max-width: 480px;
}

.tgl-state-labels {
  display: grid;
  grid-template-columns: repeat(2, minmax(110px, 1fr));
  gap: 16px;
  max-width: 700px;
  margin-bottom: 8px;
}

.tgl-state-labels span {
  color: var(--color-text-tertiary);
  font-size: 11px;
  text-align: left;
}

.tgl-spec-row {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  align-items: center;
  margin-bottom: 12px;
}

.tgl-spec-row--states {
  display: grid;
  grid-template-columns: repeat(2, minmax(110px, 1fr));
  max-width: 700px;
  align-items: center;
}

.tgl-spec-row--states > * {
  justify-self: start;
}

.tgl-size-label {
  font-size: var(--text-label-xs-size);
  color: var(--color-text-tertiary);
  margin: 20px 0 8px;
}

.tgl-size-label:first-child {
  margin-top: 0;
}

.tgl-spec-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
  font-family: var(--font-base);
  margin-top: 12px;
}

.tgl-spec-table th {
  text-align: left;
  padding: 8px 12px;
  background: var(--color-surface-sunken2);
  color: var(--color-text-secondary);
  font-weight: 500;
  border-bottom: 1px solid var(--color-border-subtle);
}

.tgl-spec-table td {
  padding: 8px 12px;
  border-bottom: 1px solid var(--color-border-subtle);
  color: var(--color-text-primary);
}

.tgl-spec-table code {
  font-family: ui-monospace, monospace;
  font-size: 12px;
  background: var(--color-surface-sunken2);
  padding: 2px 5px;
  border-radius: 4px;
}