@import "./var.less";
.ix-switch{
  display: inline-flex;
  align-items: center;
  vertical-align: middle;
  cursor: pointer;
  >input{display: none}
  .ix-switch_txt_left, .ix-switch_txt_right{
    &.active{
      color: @theme;
    }
  }
  .ix-switch_txt_left{
    margin-right: 10px;
  }
  .ix-switch_txt_right{
    margin-left: 10px;
  }
  .ix-switch_bar{
    border-radius: 50px;
    width: 100%;
    height: 20px;
    position: relative;
    background: #dcdfe6;
    transition: background-color .3s;
    &:after{
      position: absolute;
      left: 2px;
      top: 2px;
      height: 16px;
      width: 16px;
      background: #fff;
      transition: left .3s;
      content: ' ';
      border-radius: 100%;
    }
  }
  &.checked{
    .ix-switch_bar{
      background: @theme;
    }
    .ix-switch_bar:after{
      left: calc(100% - 2px - 16px);
    }
  }
}