/* ==========================================================================
   Component: Toggle Pill (locked Pattern 5 + Pattern 6)
   The universal icon-toggle chip used on every Element editor's toolbar.
   Promoted verbatim from the Pattern 21 q-and-a-finals locked mockup.

     • .toggle-pill            — base chip (OFF state, dashed neutral border)
     • .toggle-pill--on        — selected state (accent border + accent-subtle bg)
     • .toggle-pill--config    — Pattern 6 modal-trigger variant
     • .toggle-pill__tune      — trailing tune icon, only inside --config
   ========================================================================== */

.toggle-pill {
  /* position: relative is REQUIRED — anchors the visually-hidden
     <input> inside the pill (see below). See DS Conventions →
     "Visually-hidden form inputs" at /a/design-system/contribute. */
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px 4px 8px;
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  line-height: 1;
  user-select: none;
  cursor: pointer;
  color: var(--text-secondary);
  background: var(--surface-base);
  border: 1px dashed var(--border-default);
  border-radius: var(--radius-full);
}

.toggle-pill--on,
.toggle-pill:has(input:checked) {
  color: var(--accent-primary);
  background: var(--accent-subtle);
  border: 1px solid var(--accent-primary);
}

/* Form-submitting variant: hidden inputs inside the label drive selection. */
.toggle-pill input[type="checkbox"],
.toggle-pill input[type="radio"] {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
}

.toggle-pill .material-symbols-rounded {
  font-size: 14px;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.toggle-pill--config .toggle-pill__tune {
  font-size: 12px;
  opacity: 0.7;
  margin-left: 2px;
}

/* Pattern 13 — vertical hairline that separates None from the curated
   chart options inside a .viz-pills cluster (a .cs-row reusing toggle-pill
   chips as a single-select radio group). */
.viz-pills__divider {
  display: inline-block;
  width: 1px;
  height: 18px;
  background: var(--border-subtle);
  margin: 0 var(--space-1);
  align-self: center;
  flex-shrink: 0;
}