<main class="fancy">
  <section class="demo">
    <div class="box">
      <h3>Checkbox <br /><small>(Multi-select)</small></h3>
      <p>
        <label for="Cookies">
          <input id="Cookies" name="yaybox" type="checkbox" value="Cookies" checked />
          <span>Chocolate Chip Cookies</span>
        </label>
      </p>
      <p>
        <label for="Milk">
          <input id="Milk" name="yaybox" type="checkbox" value="Milk" />
          <span>Ice Cold Milk</span>
        </label>
      </p>

      <p>
        <label for="Other">
          <input id="Other" name="yaybox" type="checkbox" value="Other" />
          <span>Raspberry-Lemon Pastry with Cream Cheese Frosting and Graham Cracker Crust</span>
        </label>
      </p>

      <hr />

      <h3>Radio Button <br /><small>(Single-select)</small></h3>
      <p>
        <label for="Chocolate">
          <input id="Chocolate" name="yaydio" type="radio" value="Chocolate" />
          <span>Chocolate Candies</span>
        </label>
      </p>
      <p>
        <label for="Strawberry">
          <input id="Strawberry" name="yaydio" type="radio" value="Strawberry" />
          <span>Strawberry Jelly</span>
        </label>
      </p>
      <p>
        <label for="Vanilla">
          <input id="Vanilla" name="yaydio" type="radio" value="Vanilla" checked />
          <span>Vanilla Ice Cream</span>
        </label>
      </p>
    </div>
  </section>
  
  <section class="controls">
    <div>
      <p>
        <label for="sim">
          <input id="sim" name="sim" type="checkbox" value="sim" checked onchange="toggleTheFancy()" />
          <span>Toggle The Fanciness</span>
        </label>
      </p>
      <p>
        <label for="square">
          <input id="square" name="square" type="checkbox" value="square" onchange="toggleTheShape()" />
          <span>Square Checkboxes</span>
        </label>
      </p>
      <p>
        <small>Change width to force line-<br />wrapping. Notice the text alignment!</small><br />
        <label for="slider">
          <input id="slider" type="range" min="5" max="100" value="100" oninput="setProperty('--demo-width', this.value)" />
        </label>
      </p>
    </div>
  </section>
</main>

.fancy label {
  display: inline-flex;
  align-items: baseline;

  input[type=checkbox],
  input[type=radio] {
    position: relative;
    appearance: none;
    font-size: inherit;
    width: 1em;
    margin: 0;
    color: inherit;
    outline: none;
    font-family: 'Font Awesome 5 Pro';
    transition: 300ms ease-out;

    &::after {
      content: '\f111'; // circle
      display: inline-block;
      text-align: center;
      width: 1em;
    }

    &:checked::after {
      font-weight: 900;
    }
    &:active {
      transform: scale(.6);
    }

    + span {
      margin-left: .35em;
    }
  }
  
  input[type=checkbox]:checked::after {
    content: '\f058'; // check-circle
  }

  input[type=radio]:checked::after {
    content: '\f192'; // dot-circle
  }
}

.fancy.square label {
  input[type=checkbox]:after {
    content: '\f0c8'; // square
  }
  input[type=checkbox]:checked::after {
    content: '\f14a'; // check-square
  }
}









/* demo layout – not relevant to the fanciness */
:root {
  --demo-width: 30;
}

body {
  margin: 0;
  min-height: 100vh;
  font-size: calc(1vmax + .5em);
  line-height: 1.4;
  font-family: sans-serif;
  display: flex;

  main {
    flex: 1;
    display: flex;
    flex-direction: row;
    align-items: baseline;
    padding: 0em;

    section {
      flex: 1;
      padding: 2em;
      display: flex;
      align-items: center;
      justify-content: center;
      
      + section {
        flex: none;
        padding: 1em;
        margin: 2em;
        background: #1fc2f5;
        color: #fff;
        cursor: pointer;
        transition: font-size 100ms ease-out;
        border-radius: .5em;
      }
    }
  }
}

.box {
  position: relative;
  width: calc(var(--demo-width) * 1%);
  border: 1px dashed #ccc;
  padding: 1em;
  margin: -.5em;
  border-radius: .3em;
  &::after {
    font-size: .8em;
    position: absolute;
    top: 0;
    left: 50%;
    transform: translate(-50%, -50%);
    background: #fff;
    border: 1px dashed #ccc;
    padding: 0 .65em;
    border-radius: 1em;
    counter-reset: dw var(--demo-width);
    content: counter(dw) "%";
  }
}

h3 {
  margin: 0 0 .5em 0;
}

p {
  margin: 0 0 1em 0;
}

hr {
  border: 1px dashed #ccc;
  height: 0;
  margin: 1em 0;
}

// Bonus Fanciness! Look at you, digging around here!
// fancy range slider
.fancy label {
  input[type="range"] {
    appearance: none;
    outline: none;
    display: block;
    padding: 0;
    border: 0;
    width: auto;
    height: .25em;
    border-radius: 1em;
    cursor: pointer;
    font-size: inherit;
    // MOZILLA
    &::-moz-range-track {
      appearance: none;
      background: #fff;
      outline: none;
    }
    &::-moz-focus-outer {
      border: 0;
    }
    &::-moz-range-thumb {
      appearance: none;
      width: 1em;
      height: 1em;
      border: none;
      box-shadow: 0 0 0 .2em #1fc2f5;
      border-radius: 1em;
      background: #fff;
      transform: scale(.7);
      transition: .3s ease-out;
    }
    &::-moz-range-thumb:focus,
    &::-moz-range-thumb:active {
      appearance: none;
      transform: scale(1.5);
    }
    // BLINK/WEBKIT
    &::-webkit-slider-thumb {
      appearance: none;
      width: 1em;
      height: 1em;
      border: none;
      box-shadow: 0 0 0 .2em #1fc2f5;
      border-radius: 1em;
      background: #fff;
      transform: scale(.8);
      transition: .3s ease-out;
    }
    &::-webkit-slider-thumb:focus,
    &::-webkit-slider-thumb:active {
      appearance: none;
      transform: scale(1.1);
    }
  }
}

// Simulation controls to illustrate differences
// This is not relevant to the implementing the fanciness
const element = document.querySelector('main')
// slider communication
const setProperty = (property, value) => document.body.style.setProperty(property, value)
// fanciness on/off
const toggleTheFancy = () => element.classList.toggle('fancy')
// shape shifting
const toggleTheShape = () => element.classList.toggle('square')

setProperty('--demo-width', 100)