.control {
  cursor: pointer;
  display: block;
  position: relative;
  width: 45px;
  height: 45px;
}
.control input {
  position: absolute;
  z-index: -1;
  opacity: 0;
}

.control_indicator {
  position: absolute;
  top: 0px;
  left: 0px;
  height: 25px;
  width: 25px;
  background: white;
  border: 10px solid black;
  border-radius: 0px;
}

.dark-theme .control_indicator {
  background: black;
  border: 10px solid white;
}

.dark-theme .dark .control_indicator {
  background: black;
  border: 10px solid black;
}

.dark .control_indicator {
  background: white;
  border: 10px solid white;
}

.dark-theme .control_indicator {
  background: black;
  border: 10px solid white;
}

.control input:checked ~ .control_indicator {
  background: black;
}

.dark-theme .control input:checked ~ .control_indicator {
  background: white;
}

.control_indicator:after {
  box-sizing: unset;
  content: "";
  position: absolute;
  display: none;
}

.control input:checked ~ .control_indicator:after {
  display: block;
}

.dark-theme .dark .control input ~ .control_indicator:after {
  display: block;
}

.control-checkbox .control_indicator:after {
  left: 4px;
  top: -5px;
  width: 9px;
  height: 20px;
  border: solid white;
  border-width: 0 8px 8px 0;
  transform: rotate(45deg);
}

.dark .control-checkbox .control_indicator:after {
  border: unset;
}

.dark-theme .control-checkbox .control_indicator:after {
  border: solid black;
}

.dark-theme .dark .control-checkbox .control_indicator:after {
  left: 4px;
  top: -5px;
  width: 9px;
  height: 20px;
  border: solid white;
  border-width: 0 8px 8px 0;
  transform: rotate(45deg);
}