/* Squish Switch — the surface for squish-switch.js.
 *
 * The track and the thumb are the whole skin. Everything the component needs
 * to know about the control arrives as a custom property, so a site can re-tone
 * the switch with two lines and none of the geometry is duplicated here.
 *
 *   <link rel="stylesheet" href="/squish-switch.css">
 *   <script src="/squish-switch.js" defer></script>
 *
 * Tokens a host can set on the button (or on any ancestor):
 *
 *   --ss-track          track, off          (default #d7dad2)
 *   --ss-track-on       track, on           (default #157a4a)
 *   --ss-thumb-color    thumb fill          (default #fff)
 *   --ss-focus          focus ring colour   (default currentColor)
 *
 * Written by the script, never by the page: --ss-x, --ss-sx, --ss-sy.
 */

.squish-switch {
  --ss-track: #d7dad2;
  --ss-track-on: #157a4a;
  --ss-thumb-color: #fff;
  --ss-focus: currentColor;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  max-width: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  font-size: var(--ss-font, 13px);
  line-height: 1.2;
  text-align: left;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  touch-action: pan-y;
}

.squish-switch__track {
  position: relative;
  flex: none;
  display: block;
  width: var(--ss-w, 52px);
  height: var(--ss-h, 28px);
  border-radius: 999px;
  background: var(--ss-track, #d7dad2);
  transition: background-color 220ms cubic-bezier(0.22, 0.61, 0.36, 1);
}

.squish-switch[aria-checked='true'] .squish-switch__track,
.squish-switch[aria-pressed='true'] .squish-switch__track,
.squish-switch[data-on='true'] .squish-switch__track,
.squish-switch.on .squish-switch__track,
.squish-switch.active .squish-switch__track,
.squish-switch__input:checked + .squish-switch__track,
label:has(> .squish-switch__input:checked) .squish-switch__track {
  background: var(--ss-track-on, #157a4a);
}

.squish-switch__thumb {
  position: absolute;
  top: 50%;
  left: var(--ss-inset, 3px);
  width: var(--ss-thumb, 22px);
  height: var(--ss-thumb, 22px);
  margin-top: calc(var(--ss-thumb, 22px) / -2);
  border-radius: 999px;
  background: var(--ss-thumb-color, #fff);
  box-shadow: 0 1px 2px rgb(0 0 0 / 0.28), 0 0 0 0.5px rgb(0 0 0 / 0.08);
  transform: translate3d(var(--ss-x, 0px), 0, 0) scale(var(--ss-sx, 1), var(--ss-sy, 1));
  transform-origin: 50% 50%;
  will-change: transform;
}

.squish-switch__label {
  min-width: 0;
}

.squish-switch:hover .squish-switch__track {
  filter: brightness(0.97);
}

.squish-switch:focus-visible {
  outline: none;
}

.squish-switch:focus-visible .squish-switch__track {
  outline: 2px solid var(--ss-focus);
  outline-offset: 3px;
}

.squish-switch[disabled],
.squish-switch[aria-disabled='true'] {
  opacity: 0.5;
  cursor: not-allowed;
}

/* A switch that replaces an icon: the track is the whole control, so any
   glyph the button used to carry is hidden rather than wrapped. */
.squish-switch--bare {
  gap: 0;
}

.squish-switch--bare > :not(.squish-switch__track) {
  display: none;
}

/* A native checkbox adopted in place: the input keeps the form behaviour and
   the keyboard order of the label, and only the paint is ours. */
.squish-switch__input {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* Presets, so a host does not need to invent a colour pair. */
.squish-switch[data-ss-tone='dark'] {
  --ss-track: #2b302b;
  --ss-track-on: #35b877;
  --ss-thumb-color: #f4f4f1;
}

.squish-switch[data-ss-tone='light'] {
  --ss-track: #dcded6;
  --ss-track-on: #171a17;
  --ss-thumb-color: #fff;
}

@media (prefers-reduced-motion: reduce) {
  .squish-switch__track {
    transition: none;
  }
}