CloneCSS-2020 Checkboxes and radio buttons

index.html

<ul>
  <li>
    <input id="c1" type="checkbox">
    <label for="c1">Checkbox</label>
  </li>
</ul>

playground.json

{
  "scripts": [],
  "styles": []
}

style.scss

@import url(https://cdn.jsdelivr.net/npm/inter-ui@3.11.0/inter.min.css);

html {
  box-sizing: border-box;
}

* {
  box-sizing: inherit;

  &::after,
  &::before {
    box-sizing: inherit;
  }
}

html, body {
  height: 100%;
  width: 100%;
}

body {
  margin: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  font-family: Inter;
  background-color: #f6f8ff;
  color: #8a91b4;
  @media(max-width: 800px) {
    flex-direction: column;
  }
}

ul {
  list-style: none;
  margin: 12px;
  padding: 0;
  max-width: 320px;
  width: 100%;
  li {
    margin: 16px 0;
    position: relative;
  }
}

@supports(-webkit-appearance: none) or (-moz-appearance: none) {
  input[type='checkbox'],
  input[type="radio"] {
    --background: #fff;
    --active: #275EFE;
    --active-inner: #fff;
    --focus: 2px rgba(39, 94, 254, .3);
    --border: #BBC1E1;
    --border-hover: #275EFE;
    --disabled: #F6F8FF;
    --disabled-inner: #E1E6F9;
    -webkit-appearance: none;
    -moz-appearance: none;
    cursor: pointer;
    height: 21px;
    margin: 0;
    outline: none;
    position: relative;
    border: 1px solid var(--bc, var(--border));
    background: var(--b, var(--background));
    vertical-align: top;
    transition: background .3s, border-color .3s, box-shadow .2s;

    &::after {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      display: block;
      transition: transform var(--d-t, .3s) var(--d-t-e, ease), opacity var(--d-o, .2s);
    }

    &:checked {
      --b: var(--active);
      --bc: var(--active);
      --d-t: .6s;
      --d-t-e: cubic-bezier(.2, .85, .32, 1.2);
      --d-o: .3s;
    }

    &:not(.switch) {
      width: 21px;

      &::after {
        opacity: var(--o, 0);
      }

      &:checked {
        --o: 1;
      }
    }

    &:hover {
      &:not(:checked) {
        &:not(:disabled) {
          --bc: var(--border-hover)
        }
      }
    }

    &:focus {
      box-shadow: 0 0 0 var(--focus);
    }

    & + label {
      font-size: 14px;
      line-height: 21px;
      vertical-align: top;
      cursor: pointer;
      margin-left: 4px;
    }
  }

  input[type="checkbox"] {
    border-radius: 7px;

    &::after {
      width: 5px;
      height: 9px;
      border: 2px solid var(--active-inner);
      border-top: 0;
      border-left: 0;
      left: 7px;
      top: 4px;
      transform: rotate(var(--r, 20deg));
    }

    &:checked {
      --r: 45deg
    }
  }
}