.c-switch {
  --thumb-size: var(--s-xl);
  --thumb: var(--c-grayscale-off-white);
  --thumb-highlight: hsl(0 0% 0% / 25%);
  --track-size: var(--s-5xl);
  --track-padding: var(--s-2xs);
  --track-inactive: var(--c-grayscale-mid);
  --track-active: var(--c-brand);
  --thumb-color: var(--thumb);
  --thumb-color-highlight: var(--thumb-highlight);
  --track-color-inactive: var(--track-inactive);
  --track-color-active: var(--track-active);
  display: flex;
  gap: 2ch;
  align-items: center;
  margin-bottom: 0;
  cursor: pointer;
  -webkit-user-select: none;
          user-select: none;
  -webkit-tap-highlight-color: transparent;
}
.c-switch span {
  flex: 1;
}
.c-switch__bottom-label {
  flex-basis: 100%;
}
.c-switch a {
  color: inherit;
  text-decoration: underline;
}
.c-switch a:hover, .c-switch a:focus {
  color: var(--c-link-hocus);
}
.c-switch a:active {
  color: var(--c-link-active);
}
.c-switch__input {
  --thumb-position: 0%;
  --thumb-transition-duration: 0.25s;
  box-sizing: content-box;
  display: grid;
  flex-shrink: 0;
  grid: [track] 1fr/[track] 1fr;
  align-items: center;
  padding: var(--track-padding);
  cursor: pointer;
  touch-action: pan-y;
  background: var(--track-color-inactive);
  border: none;
  border-radius: var(--track-size);
  outline-offset: 5px;
  transition: background-color 0.25s ease;
  inline-size: var(--track-size);
  block-size: var(--thumb-size);
  appearance: none;
}
.c-switch__input:before {
  --highlight-size: 0;
  grid-area: track;
  pointer-events: auto;
  cursor: pointer;
  content: "";
  background: var(--thumb-color);
  border-radius: 50%;
  box-shadow: 0 0 0 var(--highlight-size) var(--thumb-color-highlight);
  transform: translateX(var(--thumb-position));
  inline-size: var(--thumb-size);
  block-size: var(--thumb-size);
}
@media (--motionOK) {
  .c-switch__input:before {
    transition: transform var(--thumb-transition-duration) ease, box-shadow 0.25s ease;
  }
}
.c-switch__input:not(:disabled):hover:before {
  --highlight-size: 0.2rem;
}
.c-switch__input:checked {
  background: var(--track-color-active);
  --thumb-position: calc(var(--track-size) - 100%);
}
.c-switch__input:indeterminate {
  --thumb-position: calc(((var(--track-size) / 2) - (var(--thumb-size) / 2)) * var(--isLTR));
}
.c-switch__input:disabled {
  cursor: not-allowed;
  --thumb-color: transparent;
}
.c-switch__input:disabled:before {
  cursor: not-allowed;
  box-shadow: inset 0 0 0 2px hsla(0, 0%, 100%, 0.5);
}