input[type='checkbox'] {
    -webkit-appearance: none;
    appearance: none;
    position: relative;
    width: 20px;
    height: 20px;
    border: 1px solid #9DA2AE;
    border-radius: 4px;
    background: #fff;
    cursor: pointer;
    box-shadow: inset 0 1px 2px rgba(0,0,0,.2);
    transition: border-color .1s, background-color .1s;
    overflow: visible;
}

    input[type='checkbox']::before {
        content: '';
        position: absolute;
        inset: -2px;
        background-color: #5CC87A;
        -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M20 6 L9 17 L4 12' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/></svg>") no-repeat center / 130%;
        mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M20 6 L9 17 L4 12' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/></svg>") no-repeat center / 130%;
        transform: scale(0);
        transition: transform .2s ease-in-out;
    }

    input[type='checkbox']:checked {
        border-color: #5CC87A;
    }

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

    input[type='checkbox']:hover {
        box-shadow: 0 0 0 3px #F1F1F1;
    }

    input[type='checkbox']:focus-visible {
        outline: 2px solid #5CC87A;
        outline-offset: 2px;
    }

@media (prefers-reduced-motion: reduce) {
    input[type='checkbox']::before {
        transition: none;
    }
}