.toggle {
  input[type="checkbox"] {
    opacity: 0;
    position: absolute;
    -webkit-appearance: none;
    -moz-appearance: none;
    z-index: -1;

    &:checked + .btn {
      color: var(--color-tertiary--contrast);
      border-color: var(--color-tertiary--contrast);
      &.btn--icon::before { filter: var(--colorize-purple); }

      [data-color-scheme="dark"] & {
        color: var(--color-tertiary);
        background-color: var(--color-bg--main);
      }
    }

    &:focus + .btn {
      outline: none;
      box-shadow: 0 0 0 2px var(--color-focus-ring);
    }
  }
}

.toggle--alternative-icons {
  input[type="checkbox"] {
    &:checked + .btn {
      display: none;
    }

    &:not(:checked) + .btn + .btn {
      display: none;
    }
  }
}