.cbox {
  box-sizing: border-box;
  border-radius: 0.1875rem;
  border-style: solid;
  border-width: .0625rem;
  display: inline-block;
  position: relative;
  height: 1rem;
  width: 1rem;
  transition: none;
}

.cbox::before,
.cbox::after {
  content: "";
  position: absolute;
  left: 0.4375rem;
  top: 50%;
  transform: translate(-50%, -50%);
  transition: inherit;
}

.cbox::before {
  border-radius: 0.1875rem;
  border-style: solid;
  border-width: .0625rem;
  box-sizing: content-box;
  height: .875rem;
  width: .875rem;
}

/* checkline */
.cbox[aria-checked=mixed]::after {
  border-bottom-style: solid;
  border-bottom-width: 0.125rem;
  display: block;
  width: .375rem;
}

/* checkmark */
.cbox[aria-checked=mixed]:enabled:active::after,
.cbox[aria-checked=true]::after {
  border-style: solid;
  border-width: 0 .125rem .125rem 0;
  display: block;
  height: .4rem;
  width: .25rem;
  transform:
    translateY(-65%)
    translateX(-50%)
    rotate(45deg);
}