jb-checkbox/lib/jb-checkbox.css

checkbox web component

:host {
    cursor: pointer;
}

:host(:state(disabled)) {
    cursor: not-allowed;
}

.jb-checkbox-web-component {
    display: grid;
    grid-template-columns: var(--size) max-content;
    grid-template-rows: max-content max-content;
    grid-template-areas: "check label" "check message";
    justify-content: center;
    gap: 0 0.5rem;
    align-items: center;
    justify-content: start;
    &:focus{
        outline: none;
    }
    &:focus-visible {
        outline: none;

        .svg-wrapper {
            outline: 2px solid var(--jb-checkbox-focus-ring-color, Highlight);
            outline-offset: 2px;
            border-radius: 5px;
        }
    }

    .label-wrapper {
        grid-area: label;
        display: inline-block;
        font-weight: 400;
        color: var(--label-color);
        text-box-trim: trim-both;
        text-box-edge: ex alphabetic;
        font-size: var(--label-font-size);
    }

    &:has(.message-box:empty) {
        grid-template-areas: "check label" "check label";
    }

    .message-box {
        grid-area: message;
        font-size: var(--message-font-size);
        color: var(--message-color);
        display: var(--jb-checkbox-message-box-display, block);
        text-box-trim: trim-both;
        text-box-edge: cap alphabetic;

        &:empty {
            padding: 0;
            display: none;
        }
    }

    .svg-wrapper {
        width: var(--size);
        height: var(--size);
        grid-area: check;
        display: block;

        .check-box-svg {
            width: 100%;
            height: 100%;

            &.--active {
                .checkmark__cube {
                    transition: all 0.3s ease-in-out;
                    rx: 58px;
                    ry: 58px;
                    stroke: transparent;

                }

                .checkmark__check {
                    animation: stroke .3s cubic-bezier(0.650, 0.000, 0.450, 1.000) .1s forwards;
                }
            }

            .checkmark__cube {
                fill: var(--check-bg-color);
                transition: all 0.3s ease-in-out;
                stroke: var(--check-border-color);
                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;
    }
}