@checkboxCls: ~"@{comps-prefix}-checkbox";

.@{checkboxCls} {
  display: inline-block;
  font-size: @checkbox-font-size;
  line-height: 1;
  margin-right: @checkbox-margin-right;
  -webkit-tap-highlight-color: transparent;
  &-square &-icon {
    display: inline-block;
    width: @checkbox-square-width;
    height: @checkbox-square-height;
    position: relative;
    border: 1px solid @checkbox-square-uncheck-border-color;
    background-color: #fff;
    transition: border-color @transition-duration ease-in-out,
      background-color @transition-duration ease-in-out,
      box-shadow @transition-duration ease-in-out;
    vertical-align: sub;
    &:after {
      content: " ";
      display: block;
      width: 4px;
      height: 8px;
      position: absolute;
      top: 1px;
      left: 4px;
      border: 2px solid #fff;
      border-top: 0;
      border-left: 0;
      transform: rotate(45deg) scale(0);
      transition: all @transition-duration ease-in-out;
    }
    border-radius: @checkbox-square-border-radius;
  }
  &-square&-checked &-icon {
    border-color: @checkbox-square-background-color;
    background-color: @checkbox-square-background-color;
    &::after {
      top: 2px;
      left: 5px;
      transform: rotate(45deg) scale(1);
    }
  }
  &-rect {
    width: @checkbox-rect-width;
    height: @checkbox-rect-height;
    line-height: @checkbox-rect-height;
    background-color: @checkbox-rect-background-color;
    border-radius: @checkbox-rect-border-radius;
    font-size: @checkbox-rect-font-size;
    text-align: center;
    margin-right: @checkbox-rect-margin-right;
    margin-top: @checkbox-rect-margin-top;
  }
  &-rect&-checked {
    background-color: @checkbox-rect-checked-background-color;
    color: #fff;
  }
  &-rect &-icon {
    display: none;
  }
  .check-circle,
  .uncheck-circle {
    display: inline-block;
    line-height: 0;
    vertical-align: middle;
    font-size: @checkbox-circle-icon-size;
    color: @checkbox-circle-icon-color;
  }
}