/* toggle & input switch */

//toggle switch

div.ui-toggleswitch {

  &:hover, &.ui-state-hover {
    .ui-toggleswitch-slider:before {
      background-color: darken(@btn-background-color, 5%) !important;
    }
  }
  &:focus, &.ui-state-focus {
    .ui-toggleswitch-slider:before {
      background-color: darken(@btn-background-color, 8%) !important;
    }
  }
  &:active, &.ui-state-active {
    .ui-toggleswitch-slider:before {
      background-color: darken(@btn-background-color, 15%) !important;
    }
  }

  &.ui-state-disabled {
    &:hover, &.ui-state-hover {
      .ui-toggleswitch-slider:before {
        background-color: darken(@btn-background-color, 0%) !important;
      }
    }
    &:focus, &.ui-state-focus {
      .ui-toggleswitch-slider:before {
        background-color: darken(@btn-background-color, 0%) !important;
      }
    }
    &:active, &.ui-state-active {
      .ui-toggleswitch-slider:before {
        background-color: darken(@btn-background-color, 0%) !important;
      }
    }
  }


  div.ui-toggleswitch-slider {
    background: #9e9e9e;

    &:before {
      background-color: @btn-background-color;
      -webkit-box-shadow: rgba(0, 0, 0, 0.2) 0px 1px 3px 0px, rgba(0, 0, 0, 0.137255) 0px 1px 1px 0px, rgba(0, 0, 0, 0.117647) 0px 2px 1px -1px;
      -moz-box-shadow: rgba(0, 0, 0, 0.2) 0px 1px 3px 0px, rgba(0, 0, 0, 0.137255) 0px 1px 1px 0px, rgba(0, 0, 0, 0.117647) 0px 2px 1px -1px;
      box-shadow: rgba(0, 0, 0, 0.2) 0px 1px 3px 0px, rgba(0, 0, 0, 0.137255) 0px 1px 1px 0px, rgba(0, 0, 0, 0.117647) 0px 2px 1px -1px;
    }
  }

  &.ui-toggleswitch-checked {

    div.ui-toggleswitch-slider {
      background: @light-blue;
    }

  }

}

//input switch

body div.ui-inputswitch {
  height: 16px;
  width: 38px !important;
  overflow: visible;
  background-color: #9e9e9e;
  border-color: darken(#9e9e9e, 5%);
  padding: 0;
  .border-radius(15px);
  transition: background 0.3s ease;
  vertical-align: middle;
  margin: 0 16px;

  .ui-inputswitch-on, .ui-inputswitch-off {
    visibility: hidden;
  }

  .ui-inputswitch-handle {
    top: -4px;
    background-color: @btn-background-color;
    .btn-interactions(@btn-background-color);
    border: #ddd;
    .border-radius(50%);
    .transition(background-color 0.3s);
    width: 22px !important;
    height: 22px !important;
    -webkit-box-shadow: rgba(0, 0, 0, 0.2) 0px 1px 3px 0px, rgba(0, 0, 0, 0.137255) 0px 1px 1px 0px, rgba(0, 0, 0, 0.117647) 0px 2px 1px -1px;
    -moz-box-shadow: rgba(0, 0, 0, 0.2) 0px 1px 3px 0px, rgba(0, 0, 0, 0.137255) 0px 1px 1px 0px, rgba(0, 0, 0, 0.117647) 0px 2px 1px -1px;
    box-shadow: rgba(0, 0, 0, 0.2) 0px 1px 3px 0px, rgba(0, 0, 0, 0.137255) 0px 1px 1px 0px, rgba(0, 0, 0, 0.117647) 0px 2px 1px -1px;

  }

  &.ui-inputswitch-checked {

    background-color: lighten(@light-blue, 10%);
    border-color: darken(lighten(@light-blue, 10%), 5%);

    .ui-inputswitch-handle {
      .btn-interactions(@light-blue);
      background-color: @light-blue;
      border-color: darken(@light-blue, 5%);
      color: #fff;

      &.ui-state-focus {
        .input-shadow;
      }
    }
  }
}