//
//ui-switch
//
.ui-switch {
  position: relative;
  display: inline-block;
  width: 60px;
  height: 30px;
  border-radius: 30px;
  background-color: #17A7FB;
  margin: 0;
  cursor: pointer;

  i{
    &:before,&:after {
      position: absolute;
      background-color: #fff;
      border-radius: 50%;
      content: "";
    }

    &:before {
      top: -1px;
      bottom: -1px;
      left: -1px;
      right: -1px;
      border: 1px solid #f0f0f0;
      background-color:#EAEFF0;
      border-radius: 30px;
      -webkit-transition: all .2s;
      transition: all .2s;
    }

    &:after {
      width: 30px;
      top: 1px;
      bottom: 1px;
      -webkit-transition: margin .3s;
      transition: margin .3s
    }
  }

  input {
    position: absolute;
    opacity: 0;

    &:checked+i {
      &:before {
        top: 50%;
        bottom: 50%;
        left: 50%;
        right: 5px;
        border-width: 0;
        border-radius: 5px
      }

      &:after {
        margin-left: 29px
      }
    }

    &:disabled+i {
      &:after {
        opacity: .5;
      }
      &:before {
        opacity: .5
      }
    }
  }

  &-lg {
    width: 50px;
    height: 30px;
    input:checked+i:after {
      margin-left: 21px
    }
    i:after {
      width: 28px
    }
  }

}