Deactivate `:hover` classes for the switch component on small screens

[Lcarv20]

the switch component stays stretched after pressing when deactivated. the fix should be something like:

pub fn sm() -> Attribute(a) {
  class(
-    "[&+div]:text-sm [&+div]:w-9 [&+div]:h-5 [&+div]:after:h-4 [&+div]:after:w-4 [&:enabled+div]:hover:after:w-5 [&:checked:enabled+div]:hover:after:w-4",
+    "[&+div]:text-sm [&+div]:w-9 [&+div]:h-5 [&+div]:after:h-4 [&+div]:after:w-4 lg:[&:enabled+div]:hover:after:w-5 lg:[&:checked:enabled+div]:hover:after:w-4",

  )
}

pub fn md() -> Attribute(a) {
  class(
-    "[&+div]:text-md [&+div]:w-11 [&+div]:h-6 [&+div]:after:h-5 [&+div]:after:w-5 [&:enabled+div]:hover:after:w-6 [&:checked:enabled+div]:hover:after:w-5",
+    "[&+div]:text-md [&+div]:w-11 [&+div]:h-6 [&+div]:after:h-5 [&+div]:after:w-5 lg:[&:enabled+div]:hover:after:w-6 lg:[&:checked:enabled+div]:hover:after:w-5",

  )
}

pub fn lg() -> Attribute(a) {
  class(
-    "[&+div]:text-lg [&+div]:w-[3.25rem] [&+div]:h-7 [&+div]:after:h-6 [&+div]:after:w-6 [&:enabled+div]:hover:after:w-7 [&:checked:enabled+div]:hover:after:w-6",
+    "[&+div]:text-lg [&+div]:w-[3.25rem] [&+div]:h-7 [&+div]:after:h-6 [&+div]:after:w-6 lg:[&:enabled+div]:hover:after:w-7 lg:[&:checked:enabled+div]:hover:after:w-6",
  )
}

[MAHcodes]

The size of a screen doesn't necessarily determine whether it's touch-enabled. This issue will be automatically fixed in TailwindCSS v4 (discussed here: https://github.com/tailwindlabs/tailwindcss/pull/8394). In the meantime, you can enable this behavior with the hoverOnlyWhenSupported future flag:

// tailwind.config.js
module.exports = {
  future: {
    hoverOnlyWhenSupported: true,
  },
  // ...
}