/*
  T O G G L E   S W I T C H

  <label class="switch" >
    <span class="slider" > </span >
    <span >Master Plan</span >
  </label >

*/


.switch {
  flex-direction: row;
  margin: .25rem;
  cursor: pointer;
}

.switch .slider {
  position: relative;
  height: 2ch;
  width: 4ch;
  background: var(--compare);
  border-radius: var(--circle);
  box-shadow: var(--concave-sm);
  align-items: center;
  justify-content: flex-start;
  margin-right: 1rem;
  transition: all .2s;
  flex-shrink: 0;
}

.switch .slider::after {
  content: "";
  position: absolute;
  height: 2ch;
  width: 2ch;
  background: var(--compare-less);
  border-radius: var(--circle);
  box-shadow: var(--convex-sm);
  transition: all .2s;
}

input:checked + .slider,
.switch.active .slider {
  background-color: var(--color-2);
}

input:checked + .slider::after,
.switch.active .slider::after {
  transform: translateX(2ch);
  background: var(--color-7);
}