.checkbox-container {
    --checkbox-color: var(--sccss)
}
.checkbox-container label {
    height: 100%;
    display: flex;
    align-items: center;
}
.checkbox-container label > .checkbox-svg {
    height: 100%;
    cursor: pointer;
}
.checkbox-container input {
    display: none;
}
.checkbox-container input + .checkbox-container label > .checkbox-svg {
    height: 100%;
}
.checkbox-container label .checkbox-svg > .tick-outline {
    fill: none;
    stroke: var(--checkbox-color);
    stroke-width: 3.5;
    transition: stroke 1s ease-in-out;
}
.checkbox-container label .checkbox-svg > .tick-bg {
    fill: var(--bg-color);
    transition: fill linear;
    transition-delay: .25s;
    transition-duration: .5s;
}
.checkbox-container label .checkbox-svg > .tick {
    stroke: var(--bg-color);
    fill: none;
    stroke-width: 3;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-dasharray: 25;
    stroke-dashoffset: 0;
    animation: 0.35s linear forwards;
}
.checkbox-container > input:checked + label > .checkbox-svg.animate > .tick {
    animation-name: tick;
}
.checkbox-container > input:not(:checked) + label > .checkbox-svg.animate > .tick {
    animation-name: untick;
}
.checkbox-container > input:checked + label > .checkbox-svg > .tick-bg {
    fill: var(--checkbox-color);
    transition-delay: 0s;
    transition-duration: 0s;
}
.checkbox-container.disabled {
    pointer-events: none!important;
    cursor: unset!important;
}
.checkbox-container.disabled > :not(.not-valid-tip) {
    opacity: 0.25;
    pointer-events: none;
    touch-action: none;
}
.checkbox-container:not(.disabled) .not-valid-tip {
    display: none;
}
@keyframes tick {
    from {
        stroke-dashoffset: 25;
    }
    to {
        stroke-dashoffset: 0;
    }
}

@keyframes untick {
    from {
        stroke-dashoffset: 0;
    }
    to {
        stroke-dashoffset: 25;
    }
}