@import 'common/variable.scss';
@import 'common/mixins.scss';
.#{$--css-prefix}{
  &checker{
    display:inline-table;
    vertical-align: middle;
    position:relative;
    margin-right:0.1rem;
    margin-bottom:0.1rem;
    min-width: 1rem;
    height: 0.8rem;
    input{
      opacity:0;
      width:100%;
      height:100%;
      position:absolute;
      top:0;
      left:0;
      margin:0;
      z-index:1;
      &:checked+.vx-checker-button{
        @include var-border-color();
        @include var-color();
        &:before{
          @include var-border-color();
        }
      }
    }
    &.is-disabled{
      .vx-checker-button{
        &:before{
          @include _disabled;
          background:#fff;
        }
      }
    }
    &.is-icon{
      &:before{
        position:absolute;
        content:'';
        right:0;
        bottom:0;
        border:0.2rem solid transparent;
        @include var-border-color($--color-border, 'border-right-color');
        @include var-border-color($--color-border, 'border-bottom-color');
      }
      &:after{
        position:absolute;
        content:'';
        right:0;
        bottom:0;
        border: 0.02rem solid #fff;
        border-left: 0;
        border-top: 0;
        content: " ";
        position: absolute;
        width: 0.08rem;
        height: 0.16rem;
        margin-right: 0.07rem;
        margin-bottom: 0.06rem;
        transform: rotate(45deg);
      }
      &.is-checked{
        &:before{
          @include var-border-color($--color-primary, 'border-right-color');
          @include var-border-color($--color-primary, 'border-bottom-color');
        }
      }
    }
    &.is-block{
      display:block;
      margin:0 0 0.2rem 0;
      .vx-checker-button{
        width: 100%;
      }
      .vx-checker-text{
        text-align: left;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        display: block;
      }
    }
    &-button{
      vertical-align: middle;
      @include button();
      @include border-round($--color-border,0);
      min-width:inherit;
      height:100%;
      padding:0 0.15rem;
      text-align:center;
      width:100%;
    }
    &-group{
      user-select: none;
      @include disabled;
    }
  }
}