Checkbox input sass

_checkbox-input.sass

.checkbox-input
  display: block
  position: relative
  background-color: rgba(#000, 0.2)
  border-bottom: 1px solid rgba(#fff, 0.2)
  overflow: hidden

  &__input
    display: none

    &:checked + .checkbox-input__label
      &:before
        opacity: 1

      &:after
        opacity: 1

  &__label
    display: block
    position: relative
    padding: rem(26px) rem(20px) rem(21px) rem(60px)
    font:
      size: rem(16px)
      weight: 400
    line-height: 1

    &:after
      @extend %icon
      content: map-get($icons, check)
      position: absolute
      top: 37%
      left: rem(26px)
      transition: 0.2s
      opacity: 0

    &:before
      content: ''
      position: absolute
      top: 50%
      left: rem(20px)
      width: rem(24px)
      height: rem(24px)
      transform: translateY(-50%)
      border: 1px solid #fff
      border-radius: rem(3px)
      transition: 0.3s
      opacity: 0.6