.checkbox-toggle {
  display:flex; 
  align-items:center;
  gap:8px;
  margin-bottom:20px;
}

.checkbox-toggle label {
  margin-bottom:0;
  cursor:pointer;
}

.checkbox-toggle .checkbox {
  cursor:pointer;
  appearance: none;
  background-color: #dfe1e4;
  border-radius: 72px;
  border-style: none;
  flex-shrink: 0;
  height: 20px;
  margin: 0;
  position: relative;
  width: 30px;
}

.checkbox-toggle .checkbox::before {
  bottom: -6px;
  content: "";
  left: -6px;
  position: absolute;
  right: -6px;
  top: -6px;
}

.checkbox-toggle .checkbox,
.checkbox-toggle .checkbox::after {
  transition: all 100ms ease-out;
}

.checkbox-toggle .checkbox::after {
  background-color: #fff;
  border-radius: 50%;
  content: "";
  height: 14px;
  left: 3px;
  position: absolute;
  top: 3px;
  width: 14px;
}

.checkbox-toggle .checkbox:hover {
  background-color: #c9cbcd;
  transition-duration: 0s;
}

.checkbox-toggle .checkbox:checked {
  background-color: var(--forest);
}

.checkbox-toggle .checkbox:checked::after {
  background-color: #fff;
  left: 13px;
}

.checkbox-toggle :focus:not(.focus-visible) {
  outline: 0;
}

.checkbox-toggle .checkbox:checked:hover {
  background-color: var(--forest);
}