.tickpath{
  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,.tickpath{
  fill: none;
  stroke-width: var(--lib_size_2);
  stroke-linecap: round;
  stroke: inherit;
}
.tick{
  position: absolute;
}
.checkbox{
  position: relative;
  font-size: 0;
  display: block;
  width: inherit;
  height: inherit;
  stroke: var(--lib_base_checkbox_checkbox_stroke);
}
[dir=ltr] .label{
  margin-left: var(--lib_size_6);
}
[dir=rtl] .label{
  margin-right: var(--lib_size_6);
}
.input{
  width: inherit;
  height: inherit;
  opacity: 0;
}
.checked,.checkbox:hover,.indeterminate{
  stroke: var(--stroke_color);
}
.checked .tickpath{
  stroke-width: var(--lib_size_2);
}
.base{
  display: inline-flex;
  align-items: center;
  cursor: pointer;
}
.size_sm{
  width: var(--lib_size_13);
  height: var(--lib_size_13);
}
.size_md{
  width: var(--lib_size_16);
  height: var(--lib_size_16);
}
.size_lg{
  width: var(--lib_size_20);
  height: var(--lib_size_20);
}
.size_sm .tick{
  top: calc(3px * -1);
  height: var(--lib_size_18);
  width: var(--lib_size_18);
}
[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: var(--lib_size_20);
  width: var(--lib_size_20);
}
[dir=ltr] .size_md .tick{
  left: 0;
}
[dir=rtl] .size_md .tick{
  right: 0;
}
.size_lg .tick{
  top: -5px;
  height: var(--lib_size_28);
  width: var(--lib_size_28);
}
[dir=ltr] .size_lg .tick{
  left: -1px;
}
[dir=rtl] .size_lg .tick{
  right: -1px;
}
.primary{
  --stroke_color:var(--lib_base_checkbox_primary_stroke);
}
.danger{
  --stroke_color:var(--lib_base_checkbox_danger_stroke)
}
.primary.focusVisible{
  outline: 1px solid var(--lib_base_checkbox_primary_outline);
  outline-offset: var(--lib_size_3)
}
.danger.focusVisible{
  outline: 1px solid var(--lib_base_checkbox_danger_outline);
  outline-offset: var(--lib_size_3)
}
.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: var(--lib_base_checkbox_disabled_stroke)
}
.filled .tickbox{
  fill: var(--stroke_color);
  stroke: var(--lib_base_checkbox_filled_tickbox_stroke);
}
.filled .tickpath{
  stroke: var(--lib_base_checkbox_filled_tickepath_stroke);
}
.contained .tick,.filled .tick{
  top:0
}
[dir=ltr] .contained .tick, [dir=ltr] .filled .tick{
  left:-4px
}
[dir=rtl] .contained .tick, [dir=rtl] .filled .tick{
  right:-4px
}

@keyframes tickAnimate{
  0%{stroke-dashoffset:40;}
  100%{stroke-dashoffset: 0;}
}
@keyframes lineAnimate{
  0%{transform: scaleX(0);}
  100%{transform: scaleX(1);}
}