/* ---------- GlassToggle.css (ручка двигается left, как в GlassToggle.tsx) ---------- */
/* Перемикач за еталоном glass27 Toggle (iOS 26/27): доріжка 63×28, ручка-капсула 37×24,
   при натисканні ручка роздувається у скляну лінзу. CIGI Glass: доріжка — темне скло
   (blur + dim + ::before rim), увімкнено — напівпрозорий тінт, не суцільна заливка. */
.cigi-toggle {
  --tint-rgb: var(--cigi-accent-rgb);
  position: relative;
  flex: none;
  width: 63px;
  height: 28px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  cursor: pointer;
  background: rgba(255, 255, 255, 0.06);
  -webkit-backdrop-filter: blur(var(--glass-blur)) var(--glass-dim);
  backdrop-filter: blur(var(--glass-blur)) var(--glass-dim);
  box-shadow: var(--glass-shadow);
  transition: background-color 350ms var(--spring);
  -webkit-tap-highlight-color: transparent;
}
.cigi-toggle--success { --tint-rgb: var(--positive-rgb); }

.cigi-toggle::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: var(--glass-border);
  background: var(--rim-white);
  -webkit-mask: var(--rim-mask);
  mask: var(--rim-mask);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  opacity: 1;
  pointer-events: none;
}
/* увімкнено: доріжка — легкий тон, колір несе ручка (Борис 15.10) */
.cigi-toggle.is-on { background: rgba(var(--tint-rgb), 0.2); }
.cigi-toggle.is-on::before {
  background: linear-gradient(var(--rim-a), rgba(var(--tint-rgb), 0.9) 0%, rgba(var(--tint-rgb), .34) 25%, rgba(var(--tint-rgb), .34) 75%, rgba(var(--tint-rgb), 0.9) 100%);
  opacity: 1;
}

.cigi-toggle__knob {
  --_sx: 1;
  --_sy: 1;
  position: absolute;
  top: 2px;
  left: 2px;
  width: 37px;
  height: 24px;
  border-radius: 999px;
  /* ручка = скло круглої кнопки ДС (еталон round-glass-button, Борис 15.10): вимкнено — біле напівпрозоре,
     увімкнено — у колір тінту; кромка ::before — та сама conic .75px з бліком 315°/135° */
  --rim-rgb: 255, 255, 255;
  background: rgba(255, 255, 255, 0.72);
  -webkit-backdrop-filter: blur(8px) saturate(1.3);
  backdrop-filter: blur(8px) saturate(1.3);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12), 0 1px 3px rgba(0, 0, 0, 0.3);
  /* left/width веде GlassToggle.tsx (ручка-крапля) */
  transform: scale(var(--_sx), var(--_sy));
  transition: left 320ms cubic-bezier(.34,1.3,.64,1), transform 600ms cubic-bezier(0.34, 1.56, 0.64, 1), background-color 350ms var(--spring), box-shadow 150ms ease;
  transition:
    transform 600ms cubic-bezier(0.34, 1.56, 0.64, 1),
    background-color 350ms var(--spring),
    box-shadow 150ms ease;
  pointer-events: none;
}

.cigi-toggle__knob::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: .75px;
  background: conic-gradient(rgba(var(--rim-rgb), .22) 0deg, rgba(var(--rim-rgb), .03) 45deg, rgba(var(--rim-rgb), .22) 95deg, rgba(var(--rim-rgb), .8) 135deg, rgba(var(--rim-rgb), .22) 175deg, rgba(var(--rim-rgb), .03) 225deg, rgba(var(--rim-rgb), .3) 275deg, rgba(var(--rim-rgb), 1) 315deg, rgba(var(--rim-rgb), .3) 355deg, rgba(var(--rim-rgb), .22) 360deg);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  mix-blend-mode: screen;
  pointer-events: none;
}
.cigi-toggle.is-on .cigi-toggle__knob { background: rgba(var(--tint-rgb), 0.85); }

/* Натискання: ручка — прозора лінза зі світловим обідком усередині (без світіння назовні). */
.cigi-toggle:active:not(:disabled) .cigi-toggle__knob {
  --_sx: 1.45;
  --_sy: 1.5;
  background: rgba(255, 255, 255, 0.28);
  box-shadow:
    inset 0 0 0 0.5px rgba(0, 0, 0, 0.14),
    inset 0 1px 1px rgba(255, 255, 255, 0.9),
    inset 0 -1px 1px rgba(255, 255, 255, 0.45),
    0 4px 10px rgba(0, 0, 0, 0.35);
  -webkit-backdrop-filter: blur(1px) saturate(160%);
  backdrop-filter: blur(1px) saturate(160%);
}

.cigi-toggle:disabled { opacity: 0.45; cursor: default; }
.cigi-toggle:focus-visible { outline: 2px solid rgba(var(--cigi-accent-rgb), 0.6); outline-offset: 2px; }

@media (prefers-reduced-motion: reduce) {
  .cigi-toggle, .cigi-toggle__knob { transition-duration: 0.01ms; }
  .cigi-toggle:active .cigi-toggle__knob { --_sx: 1; --_sy: 1; }
}


/* общий тумблер DS (iOS 26/27): ручка едет и на нажатии раздувается в каплю-линзу; положение — классом is-on */
.cigi-toggle .cigi-toggle__knob { left: 2px; transition: left 320ms cubic-bezier(.34,1.3,.64,1), transform 600ms cubic-bezier(0.34, 1.56, 0.64, 1), background-color 350ms var(--spring), box-shadow 150ms ease; }
.cigi-toggle.is-on .cigi-toggle__knob { left: 24px; }
.cigi-toggle.tg-blue { --tint-rgb: 59, 130, 246; }