// Switch button
.ju-switch-button {
  float: right;
  margin-left: calcRem(10px);
  margin-right: calcRem(30px);

  .switch {
    position: relative;
    display: inline-block;
    width: calcRem(50px);
    height: calcRem(30px);
    margin: calcRem(10px);
    @include boxShadow(unset);
    input {
      display: none;
    }
    select {
      display: none;
    }

    .slider {
      position: absolute;
      cursor: pointer;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background-color: #ccc;
      margin: 0;
      @include transition(.4s);
      @include borderRadius(#{calcRem(40px)});

      &:before {
        position: absolute;
        content: '';
        height: calcRem(27px);
        width: calcRem(27px);
        left: calcRem(2px);
        bottom: calcRem(2px);
        background-color: $white-color;
        @include transition(.4s);
        @include borderRadius(50%);
      }
    }

    input:checked {
      + .slider {
        background-color: $lime-color;

        &:before {
          @include transform(translateX(#{calcRem(20px)}));
        }
      }
    }
  }
}