Vue 3 Tailwind PUG Checkbox: How to change the checked checkbox's hover and active properties?

Question

I really didn't think checkboxes could be so sophisticated or something about checkboxes is just not clicking with my peanut-sized brain.

After a ton of researching, sandboxing, and manipulating checkboxes in a Vue 3, Tailwind, and PUG environment, I have hit a wall. PLEASE NOTE: The goal also is to not have any of these changes in a <style> block if at all possible.

I had made a <template> where it will render two custom checkboxes based on the condition of being checked or unchecked. Why am I doing this? I have a design system that has different CSS styling requests for color when hovered or active. Unchecked has two entirely different colors for hover and active than when checked. Let me give the example scenario to help keep track of what is going on.

1. When unchecked:

• The checkbox needs to be gray, then when hovered it needs to be light gray, then when active it needs to be between gray and light gray.

2. When checked: (Spaceballs References, beware)

• The checkbox needs to be "light" dark blue, then when hovered it needs to be "ridiculous" dark blue, then when active it needs to be "ludicrous" dark blue.

So trying to keep this in one rendered checkbox option with the different CSS pseudo-states of hover and active between checked and unchecked was starting to look impossible.

In the checked box, the Tailwind variant checked pseudo-state is becoming "light" dark blue. HOWEVER, if I try applying Tailwind variant hover and active it is doing nothing. The default "normal, regular, lighter" blue (not dark) from the browser default is happening on hover and active.

In the unchecked box, my Tailwind variant hover and active pseudo-states are working just fine, reproducing the 3 different grays mentioned above.

So needless to say I'm lost in how I will achieve "ridiculous" dark blue and "ludicrous" dark blue for the CHECKED box's hover and active states.

This is my code. This is in PUG.

<template lang="pug">
.p-checkbox(v-if="!checked")
  .flex
    input(
      v-model="checked"
      class=[
        'bg-placeholder',
        'rounded-sm',
        'border-2',
        'border-checkbox',
        'shadow-checkbox',
        ]
      :class=`[
        'hover:bg-a',
        'active:bg-b',
        ]`
.p-checkbox(v-if="checked")
  .flex
    input(
      v-model="checked"
      type="checkbox"
      class=[
        'rounded-sm',
        'border-2',
        'shadow-checkbox',
        ]
      :class=`[
        'checked:bg-primary',
        'hover:bg-primary-hover',
        'active:bg-primary-active',
        ]`
</template>
<script>
const props = defineProps({
  checked: {
    type: Boolean,
    default: false,
  },
});
</script>