@import '../../styles-new/default';
@import '../../theme/components/switch.less';

@prefixClass: im-switch;

/*********** 外层容器 **********/
.@{prefixClass} {
  position: relative;
  display: inline-block;
  width: 53 * @hd;
  height: 32 * @hd;
  border-radius: 16 * @hd;
  background-color: @switch-fill-close-color;
  border: 1px solid;
  //border-color: #e2d7d7;
  border-color: @switch-border-close-color;

  /********** 圆圈样式 ***********/
  &-dot {
    width: 30 * @hd;
    height: 30 * @hd;
    position: absolute;
    top: 50%;
    left: 1 * @hd;
    transform: translate(0, -50%);
    border-radius: @radius-circle;
    background: @fill-base;
    // box-shadow: 0px 1 * @hd 4 * @hd 0px rgba(0, 0, 0, 0.5);
    box-shadow: @switch-oval-shadow;
    transition: left .15s linear;
  }
}

.@{prefixClass}-checked {
  // background-color: @brand-primary;

  background: @switch-fill-open-color;
  // background: @switch-fill-open-color;


  .@{prefixClass}-dot {
    left: calc(~"100% - " 31*@hd);
    // transition: left .15s linear;
  }
}

.@{prefixClass}-disabled {
  border-color: transparent;
  // background: @switch-fill-close-color-disable;
  // border-color: transparent;
  // background-color: @switch-fill-close-color-disable;
  border-color: @switch-border-close-color-disable;
  background: @switch-fill-close-color-disable;
  //border-color: transparent;
  opacity: 0.8;
  cursor: not-allowed;

  &.@{prefixClass}-checked {
    background: @switch-fill-open-color-disable;
    // background-color: @brand-primary;
    // background: @switch-fill-open-color-disable;
    border-color: @switch-border-open-color-disable;
  }

  .@{prefixClass}-dot {
    background: @switch-oval-close-color-disable;
  }
}

.@{prefixClass}-small {
  width: 40 * @hd;
  height: 24 * @hd;
  border-radius: 12 * @hd;

  .@{prefixClass}-dot {
    width: 22 * @hd;
    height: 22 * @hd;
    // transition: left .15s linear;
  }

  &.@{prefixClass}-checked {
    .@{prefixClass}-dot {
      left: calc(~"100% - " 23*@hd);
    }
  }
}