$switch-prefix-cls: #{$prefix-name}switch;

.#{$switch-prefix-cls} {
    $width: 48px;
    $height: calc($width / 2);
    position: relative;
    user-select: none;
    display: inline-flex;
    transition: all .2s ease-in-out;
    cursor: pointer;
    border: 1px solid #ccc;
    background-color: #ccc;
    width: $width;
    height: $height;
    border-radius: 22px;

    $borderSize: $height - 4;
    $right: 1+$borderSize; 

    &-circle {
        width: $borderSize;
        height: $borderSize;
        border-radius: 50%;
        background-color: #fff;
        position: absolute;
        top: 1px;
        left: 1px;
        cursor: pointer;
        transition: left .2s ease-in-out, width .2s ease-in-out;
        display: flex;
        align-items: center;
        justify-content: center; 
        font-size: 16px;
    } 

    &-checked {
        background-color: $primaryColor;  
    }
    &-checked &-circle {
        left: calc(100% - $right);
    }

    &-loading,
    &-disabled {
        opacity: .4;
    }

    &-disabled {
        cursor: not-allowed;
    }




}