/*
https://moderncss.dev/pure-css-custom-checkbox-style/

<div class="ddpy-custom-checkbox-wrapper">
    <label class="ddpy-custom-checkbox">
        <input type="checkbox" name="{{checkbox_name}}" />
        {{checkbox_label}}
    </label>
</div>
*/

.ddpy-custom-checkbox-wrapper {
    --border-color: #fff;
    --background-color: #404040;
    --background-color-checked: #fff;

    box-sizing: border-box;
    font-family: sans-serif;
    font-size: 1em;
    display: flex;
    gap: 0.5em;
}

    .ddpy-custom-checkbox-wrapper > label.ddpy-custom-checkbox {
        display: flex;
        align-items: center;
        gap: 0.3em;
        cursor: pointer;
    }

    .ddpy-custom-checkbox-wrapper input[type="checkbox"] {
        appearance: none;
        background-color: var(--background-color-checked);
        margin: 0;
        font: inherit;
        color: currentColor;
        width: 1.15em;
        height: 1.15em;
        border: 0.15em solid currentColor;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
    }

        .ddpy-custom-checkbox-wrapper input[type="checkbox"]::before {
            content: "";
            width: 1em;
            height: 1em;
            transform: scale(0);
            transition: 120ms transform ease-in-out;
            box-shadow: inset 1em 1em var(--background-color);
            background-color: var(--background-color-checked);
            transform-origin: center;
            clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%);
        }

        .ddpy-custom-checkbox-wrapper input[type="checkbox"]:checked::before {
            transform: scale(1);
        }

        .ddpy-custom-checkbox-wrapper input[type="checkbox"]:focus {
            outline: 1px solid var(--border-color);
            outline-offset: 1px;
        }