@import 'common/variable.scss';
@import 'common/mixins.scss';
.#{$--css-prefix}{
  &switch{
    &--wrapper{
      position:relative;
      @include disabled;
      display:inline-block;
      vertical-align: middle;
      //height: 32px;
      //width: 50px;
      width: 1.0936rem;
      height: 0.672rem;
      button{
        display: inline-table;
        height:0.672rem;
        border-radius:0.6rem;
        background-color:#fff;
        margin: 0;
        padding: 0;
        transition: all 0.4s $--ease-in-out 0s;
        width:100%;
        position: relative;
        border:1px solid;
        @include var-border-color($--color-border);
        box-sizing: border-box;
        &:before{
          content:'';
          height:100%;
          width:60%;
          border-radius:50%;
          background-color:#fff;
          left:0;
          top:0;
          position:absolute;
          transition:left 0.3s $--ease-in-out;
          box-shadow: 0 0.02rem 0.06rem rgba(0,0,0,0.35);
          display: inline-table;
        }
      }
      input{
        width:100%;
        height:100%;
        z-index:10;
        position:absolute;
        opacity:0;
        padding: 0;
        margin: 0;
        &:checked+button{
          box-shadow:0 0 0 1.2rem $--color-primary inset;
          box-shadow:0 0 0 1.2rem var-value-color($--color-primary) inset;
          @include var-border-color();
          &:before{
            left:40%;
            @include var-border-color();
          }
        }
      }
    }
    &--size{
      &-small{
        width: 0.7427rem;
        height: 0.4616rem;
        button{
          height: 0.4616rem;
        }
      }
    }
  }
}