enabled:group-hover has no effect

[SHAGGYER]

I have a custom shadcn button, with the code:

      <Comp
        className={cn(buttonVariants({ variant, size, className }))}
        ref={ref}
        {...props}
      >
        <>
          <span className="absolute inset-0 w-full h-full transition duration-300 transform -translate-x-1 -translate-y-1 bg-purple-800 ease opacity-80 enabled:group-hover:translate-x-0 enabled:group-hover:translate-y-0" />
          <span className="absolute inset-0 w-full h-full transition duration-300 transform translate-x-1 translate-y-1 bg-pink-800 ease opacity-80[ ](enabled:)group-hover:translate-x-0 enabled:group-hover:translate-y-0 mix-blend-screen" />
          <div className="flex gap-2 items-center">
            {loading && (
              <i className="fa-solid fa-spinner fa-spin text-gray-800" />
            )}
            <span className="relative">{children}</span>
          </div>
        </>
      </Comp>

within the spans, i added enabled: modifier, but when the button is not disabled, the effect still takes effect

[andymccray]

Hey @SHAGGYER!

Chaining those modifiers should do the trick. You want to check that the group is enabled, not the child within. E.g. group-enabled:group-hover:translate-x-0.

Tailwind Play example: https://play.tailwindcss.com/t6TdH9LyoR

[SHAGGYER]

Hello @andymccray,,
You were right, this worked! Genius!
Thank you...