ul.checkboxes {
  list-style: none;
  margin-left: 0;
  padding-left: 1em;
}

[role="checkbox"] {
  display: inline-block;
  position: relative;
  padding-left: 1.4em;
  cursor: default;
  margin-left: 15px;
  margin-top: 5px;
  margin-bottom: 5px;
  font-size: 14px;
}

[role="checkbox"]::before,
[role="checkbox"]::after {
  position: absolute;
  top: 50%;
  left: 7px;
  transform: translate(-50%, -50%);
  content: '';
}

[role="checkbox"]::before {
  width: 14px;
  height: 14px;
  border: 1px solid hsl(0, 0%, 66%);
  border-radius: 0.2em;
  background-image: linear-gradient(to bottom, hsl(300, 3%, 93%), #fff 30%);
}

[role="checkbox"]:active::before {
  background-image: linear-gradient(to bottom, hsl(300, 3%, 73%), hsl(300, 3%, 93%) 30%);
}

[role="checkbox"][aria-checked="mixed"]::before,
[role="checkbox"][aria-checked="true"]::before {
  border-color: hsl(216, 80%, 50%);
  background: hsl(217, 95%, 68%);
  background-image: linear-gradient(to bottom, hsl(217, 95%, 68%), hsl(216, 80%, 57%));
}

[role="checkbox"][aria-checked="mixed"]::after {
  display: block;
  width: 8px;
  border-bottom: 0.125em solid #fff;
  transform: translate(-50%, -50%) rotateZ(45deg);
  transform-origin: center center;
}

[role="checkbox"][aria-checked="mixed"]:active::after,
[role="checkbox"][aria-checked="true"]::after {
  display: block;
  width: 0.25em;
  height: 0.4em;
  border: solid #fff;
  border-width: 0 0.125em 0.125em 0;
  transform: translateY(-65%) translateX(-50%) rotate(45deg);
}

[role="checkbox"][aria-checked="mixed"]:active::before,
[role="checkbox"][aria-checked="true"]:active::before {
  background-image: linear-gradient(to bottom, hsl(216, 80%, 57%), hsl(217, 95%, 68%));
}

[role="checkbox"]:focus {
  outline: none;
}

[role="checkbox"]:focus::before {
  width: 16px;
  height: 16px;
  box-sizing: content-box;
  border-color: hsl(216, 94%, 73%);
  border-width: 3px;
  border-radius: calc(0.2em + 3px);
  box-shadow: inset 0 0 0 1px hsl(216, 80%, 50%);
}