// Switch
// -------------------------
.h5ui-switch{
  padding: 10px 15px;

  .h5ui-switch-text{
    padding: 4px 0;
    margin: 0;
    font-size: 16px;
    text-indent: 0 !important;

    small{
      color: @colorGray;
    }
  }

  > input[type="checkbox"] {
    display: none;
  }

  > label{
    margin-bottom: 0;
  }

  .h5ui-switch_radius {
    position: relative;
    display: inline-block;
    color: @colorWhite;
    width: 50px;
    height: 32px;
    background: #fff;
    border-radius: 100px;
    cursor: pointer;
    box-shadow: inset 0 0 0 1px #e9e9e9;
    -webkit-box-shadow: inset 0 0 0 1px #e9e9e9;
    transition: all 0.40s cubic-bezier(.17,.67,.43,.98);
    -webkit-transition: all 0.40s cubic-bezier(.17,.67,.43,.98);
    float: right;

    &:active{
      box-shadow: inset 0 0 0 1.2em #e9e9e9;
      -webkit-box-shadow: inset 0 0 0 1.2em #e9e9e9;
    }
    &:before {
      width: 30px;
      height: 30px;
      border-radius: 100px;
      transition: margin-left .2s ease 0s;
      -webkit-transition: margin-left .2s ease 0s;
      margin: 1px;
      background: #fff;
      box-shadow: inset 0 0 0 .03em rgba(0,0,0,0.1),0 0 .05em rgba(0,0,0,0.05),0 .1em .2em rgba(0,0,0,0.2);
      -webkit-box-shadow: inset 0 0 0 .03em rgba(0,0,0,0.1),0 0 .05em rgba(0,0,0,0.05),0 .1em .2em rgba(0,0,0,0.2);
    }
    &:before,
    &:after {
      position: absolute;
      content: "";
    }
  }

  > input:checked + label {
    background: @colorPrimary;
    transition: all 0.15s ease-out;
    -webkit-transition: all 0.15s ease-out;
    box-shadow: inset 0 0 0 1.2em @colorPrimary;
    -webkit-box-shadow: inset 0 0 0 1.2em @colorPrimary;
    &:active{
      box-shadow: inset 0 0 0 1.2em @colorPrimary;
      -webkit-box-shadow: inset 0 0 0 1.2em @colorPrimary;
    }
    &:before {
      margin-left: 19px;
    }
  }
}