[role="radiogroup"] {
  padding: 0;
  margin: 0;
  list-style: none;
}

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

[role="radio"] {
  border: 2px solid transparent;
  border-radius: 5px;
  display: inline-block;
  position: relative;
  padding: 0.125em;
  padding-left: 1.5em;
  padding-right: 0.5em;
  cursor: default;
  outline: none;
}

[role="radio"] + [role="radio"] {
  margin-left: 1em;
}

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

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

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

[role="radio"][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="radio"][aria-checked="true"]::after {
  display: block;
  border: 0.1875em solid #fff;
  border-radius: 100%;
  transform: translate(25%, -50%);
}

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

[role="radio"]:hover::before {
  border-color: hsl(216, 94%, 65%);
}

[role="radio"].focus {
  border-color: hsl(216, 94%, 73%);
  background-color: hsl(216, 80%, 97%);
}

[role="radio"]:hover {
  background-color: hsl(216, 80%, 92%);
}