.checkbox {
  display: inline-flex;
}
.checkbox:hover {
  cursor: pointer;
}
.checkbox input {
  width: 0;
  height: 0;
  position: absolute;
  left: -999rem;
}
.checkbox .checkbox-marker {
  justify-content: center;
  align-items: center;
  display: inline-flex;
}
.checkbox .checkbox-marker span {
  background-color: var(--blue-colour);
  opacity: 0;
  transition: opacity 0.15s;
  display: inline-block;
}
.checkbox .checkbox-marker.checkbox-square {
  border: 1px solid var(--grey-outlines-colour);
  border-radius: 2px;
  width: 0.75rem;
  height: 0.75rem;
  margin-right: 0.375rem;
}
.checkbox .checkbox-marker.checkbox-square span {
  border-radius: 0.75px;
  width: 0.375rem;
  height: 0.375rem;
}
.checkbox .checkbox-marker.checkbox-circle {
  border: 1px solid var(--black-colour);
  border-radius: var(--full-radius);
  width: 0.875rem;
  height: 0.875rem;
  margin-right: .375rem;
}
.checkbox .checkbox-marker.checkbox-circle span {
  border-radius: var(--full-radius);
  width: 0.675rem;
  height: 0.675rem;
}
input:checked + :is(.checkbox .checkbox-marker) span {
  opacity: 1;
}
.checkbox > span:last-child {
  font-weight: 500;
  transition: color 0.15s;
  display: inline-block;
}
.checkbox:hover .checkbox-square ~ :is(.checkbox > span:last-child) {
  color: var(--blue-colour);
}
input:checked ~ .checkbox-square ~ :is(.checkbox > span:last-child) {
  color: var(--blue-colour);
}