.tickpath{
    fill: none;
    stroke-width: 0px;
    stroke-linecap: round;
    stroke: inherit;
    stroke-dasharray: 40;
    stroke-dashoffset: 40;
}[dir=ltr] .tickpath{
    animation: tickAnimate 0.3s ease forwards;
}[dir=rtl] .tickpath{    
    animation: tickAnimate 0.3s ease forwards;
}
.boxpath{
    position: absolute;
}
[dir=ltr] .boxpath{
    left: 0;
}
[dir=rtl] .boxpath{
    right: 0;
}
.tickbox{
    fill: none;
    stroke-width: 2px;
    stroke-linecap: round;
    stroke: inherit;
}
.tick{
    position: absolute;
}
.checkbox{
    position: relative;
    font-size: 0;
    display: block;
    stroke: #788190;
}
[dir=ltr] .label{
    margin-left: 6px;
}
[dir=rtl] .label{
    margin-right: 6px;
}
.input{
    width: inherit;
    height: inherit;
    opacity: 0;
}
.checked,.checkbox:hover,.indeterminate{
    stroke: var(--stroke_color);
}
.checked .tickpath{
    stroke-width: 2px;
}
.base{
    display: inline-flex;
    align-items: center;
    cursor: pointer;
}
.size_sm{
    width: 13px;
    height: 13px;
}
.size_md{
    width: 16px;
    height: 16px;
}
.size_lg{
    width: 20px;
    height: 20px;
}
.size_sm .tick{
    top: calc(3px * -1);
    height: 18px;
    width: 18px;
}
[dir=ltr] .size_sm .tick{
    left: calc(1px * -1);
}
[dir=rtl] .size_sm .tick{
    right: calc(1px * -1);
}
.size_md .tick{
    top: calc(2px * -1);
    height: 20px;
    width: 20px;
}
[dir=ltr] .size_md .tick{
    left: 0;
}
[dir=rtl] .size_md .tick{
    right: 0;
}
.size_lg .tick{
    top: 1px;
    height: 22px;
    width: 22px;
}
[dir=ltr] .size_lg .tick{
    left: -1px;
}
[dir=rtl] .size_lg .tick{
    right: -1px;
}
.primary{
    --stroke_color:var(--lib_primary_border_color);
}
.danger{
    --stroke_color:var(--lib_danger_border_color)
}
.linepath{
    transform-origin: center;
}
[dir=ltr] .linepath{
    animation: lineAnimate 0.3s ease forwards;
}
[dir=rtl] .linepath{
    animation: lineAnimate 0.3s ease forwards;
}
.disabled{
    /* pointer-events: none; */
    cursor: not-allowed;
}
.disabled .checkbox:hover{
    stroke: #788190
}
@keyframes tickAnimate{
    0%{stroke-dashoffset:40;}
    100%{stroke-dashoffset: 0;}
}
@keyframes lineAnimate{
    0%{transform: scaleX(0);}
    100%{transform: scaleX(1);}
}