@import 'common/variable.scss';
@import 'common/mixins.scss';
.#{$--css-prefix}{
  &checkbox{
    display:block;
    position:relative;
    @include disabled;
    overflow:hidden;
	  padding:0.25rem 0;
    &-group{
      user-select: none;
      @include disabled;
      .#{$--css-prefix}checkbox{
          padding:0.25rem 0.15rem;
      }
      &.is-divider{
        .#{$--css-prefix}checkbox{
          @include divider;
          &:first-child{
            background-image:none;
          }
        }
      }
    }
    input{
      position:absolute;
      top:0;
      left:0;
      width:100%;
      height:100%;
      z-index:1;
      opacity:0;
      padding:0;
      margin:0;
    }
    &--icon{
      width:0.4rem;
      height:0.4rem;
      border-radius:50%;
      //transition:all 0.2s $--ease-in-out;
      margin-right:0.08rem;
      text-align: center;
      @include border-round(darken($--color-border,10%),200px);
      position:absolute;
      top:50%;
      margin-top:-0.2rem;
      display:inline-table;
      &.is-checkbox{
        margin-top:-0.18rem;
        @include border-round(darken($--color-border,10%),3px);
        position: absolute;
        width:0.36rem;
        height:0.36rem;
      }
    }
    &.is-icon-position-right{
      .#{$--css-prefix}checkbox{
        &--icon{
          right:0.15rem;
          left:auto;
        }
        &--text{
          padding-left:0;
          padding-right:0.6rem;
        }
      }
    }
    &--text{
      display:block;
      padding-left:0.6rem;
      @include lineClamp;
    }
    &.is-checked{
      .vx-checkbox--icon{
        &:before{
          @include var-background-color();
          @include var-border-color();
        }
        &:after{
          border: 0.04rem solid #fff;
          border-left: 0;
          border-top: 0;
          content: " ";
          top: 50%;
          left: 50%;
          position: absolute;
          width: 0.08rem;
          height: 0.16rem;
          margin-left: -0.06rem;
          margin-top: -0.12rem;
          transform: rotate(45deg);
        }
      }
    }
    &.is-inline{
      display:inline-block;
      vertical-align: middle;
      padding: 0.05rem 0;
      margin-right:0.4rem;
      .vx-checkbox-text{
        padding-left:0.5rem;
      }
      &:last-child{
        margin-right:0;
      }
    }
  }
}