<div class="container">  
  <div class="toggie">
     <input type="checkbox" id="monetization"/>
     <label for="monetization"><span></span></label>    
   </div>

  <div class="radio">
    <input type="radio" id="sord"/>
    <label for="sord"><span></span></label>
  </div>
</div>

$color-blue_1: #1e88e5;
$color-blue_2: #7ab9f0;

$color-grey_1: #1a1a1a;
$color-grey_2: #808080;

input[type="checkbox"],
input[type="radio"] {
  display: none;

  & + label {
    position: relative;
    display: block;
    cursor: pointer;
    
    &::before {
      content: "";
      position: relative;
      display: block;
    }

    span {
      position: absolute;
      display: block;
    }
  }
  
  &:checked + label {
    span {
      background-color: $color-blue_1;
    }
  }
}

.toggie, .radio {
  display: inline-block;
}

.toggie {
  label {
    &::before {
      top: 3px;
      left: 3px;
      width: 35px;
      height: 15px;
      border-radius: 15px;
      background-color: $color-grey_2;
      transition: background-color .2s ease;
    }
  
    span {
      top: 0;
      left: 0;
      width: 20px;
      height: 20px;
      border-radius: 10px;
      background-color: white;
      transition:
        all .2s ease,
        background-color .15s ease;
    }
  }

  input:checked + label {
    &::before {
      background-color: $color-blue_2;
    } 
    span {
      transform: translateX(20px);
    }
  }
}

.radio {
  width: 20px;
  label {
    &::before {
      box-sizing: border-box;
      width: 20px;
      height: 20px;
      top: 0;
      left: 0;
      border-radius: 20px;
      border: 2px solid white;
      transition: border .2s ease;
    }

    span {
      top: 4px;
      left: 4px;
      width: 12px;
      height: 12px;
      border-radius: 15px;
      transition: background-color .2s ease;
    }
  }

  input:checked + label {
    &::before {
      border: 2px solid $color-blue_2;
    } 
  }
}

.container {
  padding: 100px;
  background-color: black;
}