.@{css-prefix}switch {
  display: inline-block;
  vertical-align: middle;
  line-height: 0;
  &-md,&-lg{
    .bui-switch{
      .switch(@switch-md-loading-width; @switch-md-width; @switch-md-height; @switch-handle-md-width;@switch-md-border-radius;);
    }
  }
  &-sm,&-xs {
    .bui-switch {
      .switch(@switch-sm-loading-width; @switch-sm-width; @switch-sm-height; @switch-handle-sm-width;@switch-md-border-radius;);
    }
  }
  &-xl {
    .bui-switch {
      .switch(@switch-xl-loading-width; @switch-xl-width; @switch-xl-height; @switch-handle-xl-width;@switch-xl-border-radius;);
    }
  }
}
.switch(@switch-loading-width; @switch-width; @switch-height; @switch-handle-width;@switch-border-radius:@switch-md-border-radius;){
  cursor: pointer;
  position: relative;
  display: inline-block;
  vertical-align: middle;
  width: @switch-width;
  height: @switch-height;
  background-color: @switch-bg;
  border-radius: @switch-border-radius;
  transition: all .36s;
  &:before{
    content: "";
    .setPosition(@switch-handle-width; @switch-height;);
    width: @switch-handle-width;
    height: @switch-handle-width;
    background-color: @switch-handle-bg;
    border-radius: 50%;
    box-shadow: @switch-md-shadow;
    transition: all .36s cubic-bezier(.78,.14,.15,.86);
  }
  &.bui-switch-disabled,
  &.bui-switch-loading {
    background-color: @switch-disabled-bg;
    cursor: not-allowed;
    & when (@theme = dark) {
      opacity: 0.4;
      background-color: @switch-bg;
      .set-bui-switch-loading-icon(@switch-loading-icon-color; @switch-checked-bg; @switch-height; @switch-loading-width;);
      &.bui-switch-checked {
        background-color: @switch-checked-bg;
        .set-bui-switch-loading-icon(@switch-bg; @switch-checked-bg; @switch-height; @switch-loading-width;);
      }
    }
    & when not (@theme = dark) {
      background-color: @switch-disabled-bg;
      .set-bui-switch-loading-icon(@switch-loading-icon-color; @switch-checked-disabled-bg; @switch-height; @switch-loading-width;);
      &.bui-switch-checked {
        background-color: @switch-checked-disabled-bg;
        .set-bui-switch-loading-icon(@switch-disabled-bg; @switch-checked-disabled-bg; @switch-height; @switch-loading-width;);
      }
    }
    &.bui-switch-secondary {
      & when (@theme = dark) {
        .set-bui-switch-loading-icon(@switch-loading-icon-color; @switch-checked-bg-secondary; @switch-height; @switch-loading-width;);
        &.bui-switch-checked {
          background-color: @switch-checked-bg-secondary;
        .set-bui-switch-loading-icon(@switch-bg; @switch-checked-bg-secondary; @switch-height; @switch-loading-width;);
        }
      }
      & when not (@theme = dark) {
        .set-bui-switch-loading-icon(@switch-loading-icon-color; @switch-checked-disabled-bg-secondary; @switch-height; @switch-loading-width;);
        &.bui-switch-checked {
          background-color: @switch-checked-disabled-bg-secondary;
          .set-bui-switch-loading-icon(@switch-disabled-bg; @switch-checked-disabled-bg-secondary; @switch-height; @switch-loading-width;);
        }
      }
    }
  }
  &.bui-switch-checked {
    background-color: @switch-checked-bg;
    &:before{
      left: 100%;
      margin-left: -(@switch-height +  @switch-handle-width)/2;
    }
    &.bui-switch-loading {
      .bui-switch-loading-icon {
        left: 100%;
        margin-left: -(@switch-height +  @switch-handle-width - (@switch-loading-width/3))/2;
      }
    }
    &.bui-switch-secondary {
      background-color: @switch-checked-bg-secondary;
    }
  }
}
.set-bui-switch-loading-icon(@default-color; @checked-color; @switch-height; @switch-loading-width;) {
  .bui-switch-loading-icon {
    position: absolute;
    left: (@switch-height - @switch-loading-width)/2;
    top: (@switch-height - @switch-loading-width)/2;
    width: @switch-loading-width;
    height: @switch-loading-width;
    .bui-icon-loading {
      position: absolute;
      margin: auto;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
    }
    .bui-loading-group-default {
      .bui-loading-group {
        stroke: @default-color;
      }
    }
    .bui-loading-group-active {
      .bui-loading-group {
        stroke: @checked-color;
      }
    }
  }
}
.setPosition(@switch-handle-width; @switch-height;) {
  position: absolute;
  left: (@switch-height - @switch-handle-width)/2;
  top: (@switch-height - @switch-handle-width)/2;
}