ul
  each val, index in ['one', 'duos', 'tiga', 'quante', 'lima']
    li(class=`size-${index}`)
      div
        label(for=`switch-${index}`)= `The ${val} checkbox:`
      div.input
        input.switch(id=`switch-${index}`, checked='', type='checkbox')
        label(for=`switch-${index}`) Toggle
  li(class=`size-4`)
    div
      label(for=`switch-55`)= `The long checkbox:`
    div.input
      input.switch(id=`switch-55`, type='checkbox')
      label(
        for=`switch-55`,
        style=`
          --switch-width: 3rem;
          --switch-knob-size: .8rem;
          --switch-knob-color: green;
          --switch-background-active: lightgreen;
        `
        ) Toggle
  li
    div
      label(for='switch-123') Pure sematic markup <code>`label > input`</code>:
    div.input
      label(for='switch-123')
        | Whats's up!
        input.switch(id='switch-123', type='checkbox')
        span.label test
  li(class=`size-2`)
    div
      label(for=`switch-6`)= `The long & tall checkbox:`
    div.input
      input.switch(id=`switch-6`, type='checkbox')
      label(
        for=`switch-6`,
        style=`
          --switch-width: 4rem;
          --switch-background: hotpink;
          --switch-knob-color: hotpink;
        `
        ) Toggle
//- IGNORE BELOW. Just for styling other elements. Not necessary for checkbox switches.
style(type="text/css").
  * {
    box-sizing: border-box;
    margin: 0;
  }
  .local__styles body {
    --scale: 1.25;
    --base-0: 2rem;
    --base-1: calc(var(--base-0) / var(--scale));
    --base-2: calc(var(--base-1) / var(--scale));
    --base-3: calc(var(--base-2) / var(--scale));
    --base-4: calc(var(--base-3) / var(--scale));
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 100vh;
  }
  .size-0 { font-size: var(--base-0); }
  .size-1 { font-size: var(--base-1); }
  .size-2 { font-size: var(--base-2); }
  .size-3 { font-size: var(--base-3); }
  .size-4 { font-size: var(--base-4); }
  .size-5 { font-size: var(--base-5); }
  ul {
    padding: 0;
    width: 25rem;
    max-width: 100%;
    margin-bottom: 1rem;
    display: flex;
    flex-direction: column;
  }
  li {
    display: flex;
    padding: .5em .5rem;
    border-bottom: 1px solid palegoldenrod;
  }
  li > * {
    flex: auto;
  }
  .input {
    text-align: right;
  }

/*
	Author: Vik Ramanujam (piggyslasher@gmail.com)
  Simple, minimal css-only switch input that has nothing hard-coded
  https://codepen.io/piggyslasher/pen/zmLKBN?editors=1100
*/
input.switch[type=checkbox]{
	height: 0; width: 0;
	// visibility: hidden; @TODO -- research accessibility
	position: absolute;
	left: -9999px;
  &, & *, & + label, & + .label {
    cursor: pointer;
  }
}
input.switch + label, label input.switch + .label {
	--switch-background: silver;
  --switch-background-active: lightgreen;
	--switch-width: 3ch;
	--switch-knob-size: calc(var(--switch-width) / 3);
	--switch-knob-offset: calc(50% - (var(--switch-knob-size) / 2));
	--switch-knob-color: var(--switch-background-active);
	--switch-transition-duration: 0.3s;
  --switch-border-width: .25rem;
	
	cursor: pointer;
	text-indent: -100%;
	width: var(--switch-width);
	max-width: 100%;
	display: inline-block;
	overflow: hidden;
	display: inline-block;
	border-radius: var(--switch-width);
	position: relative;
  vertical-align: bottom;
  overflow: visible;
  background: var(--switch-background);
  height: var(--switch-rail-height, var(--switch-knob-size));
  color: transparent;
  user-select: none;
  
	&:after {
		--switch-left: calc(var(--switch-knob-size) / 4);
    
		content: '';
		position: absolute;
		display: inline-block;
		left: var(--switch-left);
		width: var(--switch-knob-size);
		height: var(--switch-height, var(--switch-knob-size));
		top: var(--switch-knob-offset);
		// background: var(--switch-knob-color);
    background: var(--switch-background);
		border-radius: var(--switch-width);
		box-shadow: 0 0 0 var(--switch-border-width) var(--switch-background);
		transition: transform 0.3s, left 0.3s, box-shadow 0.3s, width .2s;
    transition-timing-function: cubic-bezier(0.64, 0.57, 0.67, 1.53);
	}
}
input.switch {	
	&:checked + label, &:checked + .label {
    --switch-background: var(--switch-background-active);
		&::after{
			--switch-left: calc(100% - var(--switch-knob-size) / 4);
          box-shadow: 0 0 0 var(--switch-border-width) var(--switch-knob-color);
      background: var(--switch-knob-color);
			transform: translate3d(-100%, 0, 0);
		}
	}
	
	& + label:active::after, & + .label:active::after {
		width: calc(var(--switch-width) - var(--switch-knob-size) * 2); // faux rubber band effect :)
	}
}