/* UI Layer Tool bridge — what makes tool-made switches behave like switches. Copied into the game by the
   UI Layer Tool (css/ui-layer-bridge.css); edit it in the tool (bridge/ui-layer-bridge.css). Colours, size
   and place come from the tool's own rules (css/ui-layer-overrides.css), which load after this file.
   The slide switch knob is a real element that sits left when off and slides right when on (aria-pressed
   is kept in sync by js/ui-layer-bridge.js). */
.ui-add--switch,
.ui-add--slide {
  border: 0;
  padding: 0;
  font: inherit;
  cursor: pointer;
}

.ui-add--slide .ui-add-knob {
  position: absolute;
  top: 4px;
  left: 4px;
  height: calc(100% - 8px);
  aspect-ratio: 1;
  border-radius: 50%;
  background: #ffffff;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.25);
  transition: left 150ms ease, translate 150ms ease;
}

.ui-add--slide[aria-pressed="true"] .ui-add-knob {
  left: calc(100% - 4px);
  translate: -100% 0;
}

@media (prefers-reduced-motion: reduce) {
  .ui-add--slide .ui-add-knob { transition: none; }
}