assets/css/toggle-switch.scss
/* Support toggle switch with checkbox input */

label.ToggleSwitch {
  display: inline-flex;
}

.ToggleSwitch input[type="checkbox"] {
  visibility: hidden;
  width: 0;
  height: 0;
}

.ToggleSwitch:not(.ToggleSwitch--statusAtEnd) {
  flex-direction: row;
}

.ToggleSwitch--statusAtEnd {
  flex-direction: row-reverse;
}

.ToggleSwitch {
  align-items: center;
  gap: var(--controlStack-medium-gap-condensed);
}

.ToggleSwitch:not(.pl-ToggleSwitch--loading) input[type="checkbox"]:not(:disabled) ~ * {
  cursor: pointer;
}

.ToggleSwitch.pl-ToggleSwitch--loading {
  pointer-events: none;
}

.ToggleSwitch input[type="checkbox"]:checked ~ .pl-ToggleSwitch__status-label-container > .ToggleSwitch-statusOn {
  height: auto;
  visibility: visible;
}

.ToggleSwitch input[type="checkbox"]:checked ~ .pl-ToggleSwitch__status-label-container > .ToggleSwitch-statusOff {
  height: 0;
  visibility: hidden;
}

.ToggleSwitch-track {
  -webkit-appearance: none;
  appearance: none;
  background-color: var(--controlTrack-bgColor-rest);
  border: var(--borderWidth-thin) solid var(--controlTrack-borderColor-rest);
  border-radius: var(--borderRadius-medium);
  display: block;
  height: var(--control-medium-size);
  overflow: hidden;
  padding: 0;
  position: relative;
  text-decoration: none;
  transition-duration: 80ms;
  transition-property: background-color, border-color;
  transition-timing-function: cubic-bezier(0.5, 1, 0.89, 1);
  -webkit-user-select: none;
  user-select: none;
  width: var(--base-size-64, 64px);
}

.ToggleSwitch-track:focus,
.ToggleSwitch-track:focus-visible {
  outline-offset: 1px;
}

.ToggleSwitch-circleIcon,
.ToggleSwitch-lineIcon {
  flex: 1 0 50%;
  line-height: 0;
  transition-duration: 80ms;
  transition-property: transform;
  display: flex;
  justify-content: center;
}

.ToggleSwitch-circleIcon svg,
.ToggleSwitch-lineIcon svg {
  fill: currentColor;
}

.ToggleSwitch-circleIcon {
  color: var(--controlTrack-fgColor-rest);
  transform: translateX(0);
}

.ToggleSwitch-knob {
  background-color: var(--controlKnob-bgColor-rest);
  border: var(--borderWidth-thin) solid var(--controlKnob-borderColor-rest);
  border-radius: var(--borderRadius-medium);
  bottom: 0;
  box-shadow: var(--shadow-resting-medium), var(--button-default-shadow-inset);
  position: absolute;
  top: 0;
  transition-duration: 80ms;
  transition-property: transform;
  transition-timing-function: cubic-bezier(0.5, 1, 0.89, 1);
  width: 50%;
  z-index: 1;
}

@media (prefers-reduced-motion) {
  .ToggleSwitch-knob {
    transition: none;
  }
}

.ToggleSwitch-status {
  display: block;
  font-weight: normal;
  color: var(--fgColor-default);
  font-size: var(--text-body-size-medium);
  line-height: 1.5;
  position: relative;
  text-align: right;
}

.ToggleSwitch input[type="checkbox"]:disabled ~ .pl-ToggleSwitch__status-label-container .ToggleSwitch-status,
.ToggleSwitch.pl-ToggleSwitch--loading input[type="checkbox"] ~ .pl-ToggleSwitch__status-label-container .ToggleSwitch-status {
  color: var(--fgColor-muted);
}

.ToggleSwitch-statusIcon {
  display: flex;
  margin-top: 0.063rem;
  width: var(--base-size-16, 16px);
}

.ToggleSwitch--small .ToggleSwitch-status {
  font-size: var(--primer-text-body-size-small, 12px);
}

.ToggleSwitch--small .ToggleSwitch-track {
  height: var(--control-xsmall-size);
  width: var(--base-size-48, 48px);
}

.ToggleSwitch-statusOn {
  height: 0;
  visibility: hidden;
}

.ToggleSwitch-statusOff {
  height: auto;
  visibility: visible;
}

.ToggleSwitch--statusAtEnd .ToggleSwitch-status {
  text-align: left;
}

@media (hover: hover) {
  .ToggleSwitch-track:hover {
    background-color: var(--controlTrack-bgColor-hover);
  }
}

.ToggleSwitch-track:active {
  background-color: var(--controlTrack-bgColor-active);
}

@media (pointer: coarse) {
  .ToggleSwitch-track:before {
    content: "";
    height: 100%;
    left: 50%;
    min-height: 44px;
    position: absolute;
    top: 50%;
    transform: translateX(-50%) translateY(-50%);
    width: 100%;
  }
}

@media (prefers-reduced-motion) {
  .ToggleSwitch-track,
  .ToggleSwitch-track * {
    transition: none;
  }
}

.ToggleSwitch input[type="checkbox"]:checked:disabled ~ .ToggleSwitch-track {
  background-color: var(--controlTrack-bgColor-disabled);
  border-color: #0000;
  color: var(--control-checked-fgColor-disabled);
}

.ToggleSwitch input[type="checkbox"]:checked ~ .ToggleSwitch-track {
  background-color: var(--control-checked-bgColor-rest);
  border-color: var(--borderColor-transparent);
}

@media (hover: hover) {
  .ToggleSwitch input[type="checkbox"]:checked:not(:disabled) ~ .ToggleSwitch-track:hover {
    background-color: var(--control-checked-bgColor-hover);
  }
}

.ToggleSwitch input[type="checkbox"]:checked:not(:disabled) ~ .ToggleSwitch-track:active {
  background-color: var(--control-checked-bgColor-active);
}

.ToggleSwitch input[type="checkbox"]:checked:not(:disabled) ~ .ToggleSwitch-track .ToggleSwitch-knob {
  background-color: var(--controlKnob-bgColor-checked);
  border-color: var(--controlKnob-borderColor-checked);
}

@if $scoped {
  html:not([dir="rtl"]) .__AMP__ {
    .ToggleSwitch input[type="checkbox"]:checked ~ .ToggleSwitch-track .ToggleSwitch-knob {
      transform: translateX(100%);
    }
  }

  html[dir="rtl"] .__AMP__ {
    .ToggleSwitch input[type="checkbox"]:checked ~ .ToggleSwitch-track .ToggleSwitch-knob {
      transform: translateX(-100%);
    }
  }
} @else {
  html:not([dir="rtl"]) .ToggleSwitch input[type="checkbox"]:checked ~ .ToggleSwitch-track .ToggleSwitch-knob {
    transform: translateX(100%);
  }

  html[dir="rtl"] .ToggleSwitch input[type="checkbox"]:checked ~ .ToggleSwitch-track .ToggleSwitch-knob {
    transform: translateX(-100%);
  }
}

.ToggleSwitch input[type="checkbox"]:checked ~ .ToggleSwitch-track .ToggleSwitch-lineIcon {
  transform: translateX(0);
}

@if $scoped {
  html:not([dir="rtl"]) .__AMP__ {
    .ToggleSwitch input[type="checkbox"]:checked ~ .ToggleSwitch-track .ToggleSwitch-circleIcon {
      transform: translateX(100%);
    }
  }

  html[dir="rtl"] .__AMP__ {
    .ToggleSwitch input[type="checkbox"]:checked ~ .ToggleSwitch-track .ToggleSwitch-circleIcon {
      transform: translateX(-100%);
    }
  }
} @else {
  html:not([dir="rtl"])
    .ToggleSwitch input[type="checkbox"]:checked ~ .ToggleSwitch-track .ToggleSwitch-circleIcon {
    transform: translateX(100%);
  }

  html[dir="rtl"]
    .ToggleSwitch input[type="checkbox"]:checked ~ .ToggleSwitch-track .ToggleSwitch-circleIcon {
    transform: translateX(-100%);
  }
}

.ToggleSwitch input[type="checkbox"]:disabled ~ .ToggleSwitch-track {
  background-color: var(--controlTrack-bgColor-disabled);
  border-color: rgba(0, 0, 0, 0);
  cursor: not-allowed;
  transition-property: none;
}

.ToggleSwitch input[type="checkbox"]:disabled ~ .ToggleSwitch-track .ToggleSwitch-knob {
  border-color: var(--controlTrack-bgColor-disabled);
  box-shadow: none;
}

.ToggleSwitch input[type="checkbox"]:disabled ~ .ToggleSwitch-track .ToggleSwitch-circleIcon,
.ToggleSwitch input[type="checkbox"]:disabled ~ .ToggleSwitch-track .ToggleSwitch-lineIcon {
  color: var(--controlTrack-fgColor-disabled);
}

.ToggleSwitch-icons {
  align-items: center;
  display: flex;
  height: 100%;
  overflow: hidden;
  width: 100%;
}

.ToggleSwitch-lineIcon {
  color: var(--control-checked-fgColor-rest);
}

@if $scoped {
  html:not([dir="rtl"]) .__AMP__ {
    .ToggleSwitch-lineIcon {
      transform: translateX(-100%);
    }
  }

  html[dir="rtl"] .__AMP__ {
    .ToggleSwitch-lineIcon {
      transform: translateX(100%);
    }
  }
} @else {
  html:not([dir="rtl"]) .ToggleSwitch-lineIcon {
    transform: translateX(-100%);
  }

  html[dir="rtl"] .ToggleSwitch-lineIcon {
    transform: translateX(100%);
  }
}
