.toggle-switch {
  display: none;

  + .toggle-button {
    outline: 0;
    display: block;
    width: 4em;
    height: 2em;
    position: relative;
    cursor: pointer;
    user-select: none;
    margin: 0;

    &::selection {
      background: none;
    }

    &::after,
    &::before {
      position: relative;
      display: block;
      content: '';
      width: 50%;
      height: 100%;
    }

    &::after {
      left: 0;
    }

    &::before {
      display: none;
    }
  }

  &:checked + .toggle-button::after {
    left: 50%;
  }

  &--light {
    + .toggle-button {
      background: #f0f0f0;
      border-radius: 2em;
      padding: 2px;
      transition: all 0.4s ease;

      &::after {
        border-radius: 50%;
        background: set-color(white, base);
        transition: all 0.2s ease;
      }
    }

    &:checked + .toggle-button {
      background: set-color(green, green5);
    }
  }
}