:root {
    --line-width: 2px;
    --line-color: black;

    --color: black;
    --background: white;

    --color-hover: white;
    --background-hover: #111;

    --font-family: 'Virgil', sans-serif;
}

* {
    box-sizing: border-box;
    min-width: 0;
}

@font-face {
    font-family: 'Virgil';
    src: url('https://salteadorneo.github.io/wireframes/fonts/Virgil.woff2') format('woff2'),
        url('https://salteadorneo.github.io/wireframes/fonts/Virgil.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

label {
    font-family: var(--font-family);
    color: var(--line-color, black);
    display: flex;
    gap: 5px;

    input[type="checkbox"] {
        -webkit-appearance: none;
        appearance: none;
        background-color: var(--background);
        margin: 0;

        font: inherit;
        color: currentColor;
        width: 1.15em;
        height: 1.15em;
        border: 0.15em solid currentColor;

        display: grid;
        place-content: center;
    }

    input[type="checkbox"]::before {
        content: "";
        width: 0.65em;
        height: 0.65em;
        clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%);
        transform: scale(0);
        transform-origin: bottom left;
        box-shadow: inset 1em 1em var(--form-control-color);
        /* Windows High Contrast Mode */
        background-color: var(--line-color, white);
    }

    input[type="checkbox"]:checked::before {
        transform: scale(1);
    }

    input[type="checkbox"]:disabled {
        --form-control-color: var(--form-control-disabled);

        color: var(--form-control-disabled);
        cursor: not-allowed;
    }
}