input[type="checkbox"] {
    @apply border-md rounded-sm w-5 h-5 ring-0;
    transition: border 150ms ease-in-out,
                outline 150ms ease-in-out,
                background 150ms ease-in-out,
                box-shadow 200ms ease-out;
    color: var(--checkbox-color);
    border-color: var(--checkbox-color);
    --checkbox-color: var(--color-primary);

    &:focus {
        outline: 2px solid transparent;
        outline-offset: 2px;
        box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--checkbox-color), var(--tw-shadow);
    }
}

label.checkbox-label {
    @apply flex flex-row items-center gap-2;
}