@switch-btn-size: -2px+@switch-height;
.@{prefix}{
  &switch{
    width: @switch-width;
    height: @switch-height;
    border-radius: 0.5*@switch-height;
    background: @color-light;
    position: relative;
    border:1px @line-color solid;
    transition: background .4s;

  }

  &switch:before{
    content: ' ';
    position: absolute;
    right: 0px;
    top: 0px;
    width: -2px+@switch-height;
    height: -2px+@switch-height;
    border-radius: 0.5*(-2px+@switch-height);
    background: #fff;
    box-shadow: @r*1px @r*1px @r*2px rgba(0, 0, 0, 0.4);
    transition: transform .2s;

    
  }

  &switch-tag{
    width: @switch-width-tag;
    .on, .off{
      text-align: center;
      width: @switch-width-tag - @switch-btn-size;
      line-height: @switch-btn-size;
      font-size: @font-size-sm;
      transition: opacity 0.2s;
    }
    .on{
      color:#fff;
      padding-left: 1px;
      float:left;
    }
    .off{
      color: @font-color-light;
      float: right;
      padding-right: 1px;
    }
  }

  &switch-on{
    background: @color-primary;
    border:1px @color-primary solid;
    &:before{

    }
    .off{
      display: none;
    }
  }

  &switch-off{
    background: @color-light;
    &:before{
      transform: translateX(-@r*20px);
    }
    .on{
      display: none;
    }
  }

  &switch-tag-off{
    background: @color-light;
    &:before{
      transform: translateX(-@r*30px);
    }
    .on{
      display: none;
    }
    .off{

    }
  }
}