SASS: Radio input switch style

radio.html

<div class="col-md-6 radio-input">

  <p class="text-uppercase">Gender</p>
  
  <input type="radio" name="gender" value="M" id="male">
  <label for="male">Male</label>
  
  <input type="radio" name="gender" value="F" id="female">
  <label for="female">Female</label>
  
</div>

radio.sass

.radio-input
  margin: 20px 0

  input
    display: none

    &:checked
      + label:after
        visibility: visible
        opacity: 1

    + label
      position: relative
      padding-left: 25px
      margin-right: 15px

      &:before,
      &:after
        content: ''
        position: absolute
        border-radius: 50%

      &:before
        margin-top: 2px
        left: 0
        height: 16px
        width: 16px
        border: 1px solid $white

      &:after
        transition: all 0.3s
        visibility: hidden
        opacity: 0
        width: 8px
        height: 8px
        left: 4px
        top: 6px
        background-color: $white