$curve: cubic-bezier(0.650, 0.000, 0.450, 1.000);
:host{
    --label-color:var(--jb-checkbox-label-color, #535353);
    --check-bg-color:var(--jb-checkbox-check-bg-color, #fff);
    --check-mark-color:var(--jb-checkbox-check-mark-color, #fff);
}
:host(:state(checked)){
    --label-color:var(--jb-checkbox-label-color, #2a2d30);
    --check-bg-color:var(--jb-checkbox-check-bg-color-checked, #00dc55);
    --check-mark-color:var(--jb-checkbox-check-mark-color-checked, #fff);
}
:host(:state(disabled)){
    --check-bg-color:var(--jb-checkbox-check-bg-color-disabled, #d3d3d3);
    // --check-bg-color:var(--jb-checkbox-check-bg-color-disabled, red);
}
.jb-checkbox-web-component{
    display: flex;
    flex-direction: row;
    gap: 8px;
    align-items: center;
    justify-content: start;
    cursor: pointer;
    .label-wrapper{
        display: inline-block;
        font-weight: 400;
        color: var(--label-color);
    }
    .svg-wrapper{
        width: 30px;
        height: 30px;
        margin-left: 8px;
        .check-box-svg{
            width: 30px;
            height: 30px;
            cursor: pointer;
            
            &.--active{
                .checkmark__cube{
                    transition: all 0.3s ease-in-out;
                    rx:58;
                    ry:58;
                    stroke: transparent;
                    
                }
                .checkmark__check{
                    animation: stroke .3s $curve .1s forwards;
                }
            }
            .checkmark__cube{
                fill: var(--check-bg-color);
                transition: all 0.3s ease-in-out;
                stroke: #808080;
                stroke-width: 1px;
            }
            .checkmark__check{
                stroke-width: 5;
                stroke: var(--check-mark-color);
                transform-origin: 50% 50%;
                stroke-dasharray: 48;
                stroke-dashoffset: 48;
                
            }
        }
    }
    @keyframes stroke {
        100% {
          stroke-dashoffset: 0;
        }
      }

}