.centreToggle {
  display: flex;
  width: calc(var(--switch-width) * 1rem);
  cursor: pointer;
}
.centreToggle:hover {
  background: #e5e5e5;
}
.centreToggle .text {
  font-size: 1em;
  display: inline-block;
  order: 1;
  padding-left: 0.3rem;
  color: #A30031;
  background: inherit;
  width: 100%;
}
.centreToggle .text:before {
  content: "";
  display: inline-block;
  margin-right: 0.5rem;
  width: 1rem;
  height: 1rem;
  border-radius: 50%;
  background: inherit;
  transform: translateY(0.2rem);
  box-shadow: 2px 2px 3px rgba(0, 0, 0, 0.12), 2px 2px 6px rgba(0, 0, 0, 0.05), 2px 2px 10px rgba(0, 0, 0, 0.025), inset -2px -2px 3px rgba(0, 0, 0, 0.05), inset -2px -2px 8px rgba(0, 0, 0, 0.02), inset 1px 3px 3px rgba(255, 255, 255, 0.45), inset 3px 8px 25px rgba(255, 255, 255, 0.35), inset 3px 2px 3px rgba(255, 255, 255, 0.35), inset 3px 2px 5px rgba(255, 255, 255, 0.2), inset 2px 3px 8px rgba(255, 255, 255, 0.085), inset 3px 2px 18px rgba(255, 255, 255, 0.05), inset 2px 3px 25px rgba(255, 255, 255, 0.025), inset 8px 8px 18px rgba(255, 255, 255, 0.1), inset 8px 8px 25px rgba(255, 255, 255, 0.05);
}
.centreToggle input[type=checkbox] {
  display: none;
}
.centreToggle input[type=checkbox] ~ span.off {
  display: block;
  order: 2;
  color: #030303;
  background: inherit;
}
.centreToggle input[type=checkbox] ~ span.on {
  order: 2;
  display: none;
  color: #030303;
  background: inherit;
}
.centreToggle input[type=checkbox]:checked + span.text::before {
  background: #5503B3;
}
.centreToggle input[type=checkbox]:checked ~ span.off {
  display: none;
}
.centreToggle input[type=checkbox]:checked ~ span.on {
  display: block;
}
.centreToggle::before input[type=checkbox]:checked {
  background: red;
}