// add default box-sizing for this scope
.toggle {
  display: none;
  &,
  &:after,
  &:before,
  & *,
  & *:after,
  & *:before,
  & + .toggle-btn {
    box-sizing: border-box;
    &::selection {
      background: none;
    }
  }

  + .toggle-btn {
    outline: 0;
    display: block;
    width: 3em;
    height: 1.6em;
    position: relative;
    cursor: pointer;
    user-select: none;
    border-radius: 2em;
    padding: 2px;
    transition: all 0.4s ease;
    background: $color-gray-2;
    &:after,
    &:before {
      position: relative;
      display: block;
      content: '';
      width: 50%;
      height: 100%;
    }

    &:after {
      left: 0;
      border-radius: 50%;
      background: white;
      transition: all 0.2s ease;
      box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.1);
    }

    &:before {
      display: none;
    }
  }

  &:checked + .toggle-btn:after {
    left: 50%;
    background: $color-delta;
  }
}