/*!
* Ying Yang - Toggle
* Forged by Alvaro Montoro
* https://codepen.io/alvaromontoro/pen/XWvYpLe 
*/

.toggle {
  appearance: none;
  position: relative;
  font-size: 1em;
  box-sizing: content-box;
  height: 1em;
  width: 2em;
  border: max(1.0px, 0.125em) solid;
  display: flex;
  background: linear-gradient(#fff 50%, #000 0);
  border-radius: 1em;
  overflow: hidden;
  margin-left: 12px;
  margin-right: 12px;
  
  
  &::before, &::after {
    content: "";
    width: 1em;
    aspect-ratio: 1;
    background: blue;
    border-radius: 0 0.5em 0 0;
    background:
      radial-gradient(circle at calc(75% - 0.25em) 50%, #fff 25%, #000 calc(25% + 1px));
    transition: width 0.4s;
    width: 1.5em
  }
  
  &::after {
    width: 0.5em;
    border-radius: 0 0 0 0.5em;
    background:
      radial-gradient( circle at calc(25% + 0.25em) 50%, #000 25%, #fff calc(25% + 1px));
  }
  
  &:checked {
    &::before { width: 0.5em; }
    &::after { width: 1.5em; }
  }
  
  &[disabled] {
    opacity: 0.25;
  }
  &:indeterminate {
    &::before { width: 1em; }
    &::after { width: 1em; }
  }
}

@media print {
  .toggle {
    &, &::before, &::after {
      -webkit-print-color-adjust: exact;
      print-color-adjust: exact;
    }
  }
}

@media (prefers-reduced-motion) {
  .toggle {
    &, &::before, &::after {
      transition: none !important;
      animation: none !important;
    }
  }
}