/* Example:
 *<div class="f-checkbox">
 * <input type="checkbox" class="f-slider">
 *</div>
*/

  .f-checkbox .f-slider {
    appearance: none;
    background-color: var(--bgold);
    border-radius: 72px;
    border-style: none;
    flex-shrink: 0;
    height: 20px;
    margin-right: 0.5rem;
    margin-top: 0.6rem;
    position: relative;
    width: 30px;
  }

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

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

  .f-checkbox .f-slider::after {
    background-color: var(--bbrown);
    border-radius: 50%;
    content: "";
    height: 14px;
    left: 3px;
    position: absolute;
    top: 3px;
    width: 14px;
  }

  .f-checkbox input[type=checkbox] {
    cursor: default;
  }

  .f-checkbox .f-slider:hover {
    background-color: var(--bgold-transparent);
    transition-duration: 0s;
  }

  .f-checkbox .f-slider:checked {
    background-color: var(--bpink);
  }

  .f-checkbox .f-slider:checked::after {
    background-color: var(--bbrown);
    left: 13px;
  }

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

  .f-checkbox .f-slider:checked:hover {
    background-color: var(--bpurple);
  }