From ac6076227960ac5d0771807ec1b263b4aaf16448 Mon Sep 17 00:00:00 2001
From: Pouya Saadeghi <pouya.saadeghi@gmail.com>
Date: Tue, 13 Feb 2024 19:37:23 +0300
Subject: [PATCH] fix: don't apply menu item styles to `btn` is inside menu

---
 src/components/styled/menu.css   | 18 +++++++++---------
 src/components/unstyled/menu.css |  2 +-
 src/utilities/styled/menu.css    |  8 ++++----
 3 files changed, 14 insertions(+), 14 deletions(-)

diff --git a/src/components/styled/menu.css b/src/components/styled/menu.css
index 061b1b7ce93..da9adca3d64 100644
--- a/src/components/styled/menu.css
+++ b/src/components/styled/menu.css
@@ -13,21 +13,21 @@
     content: "";
   }
 }
-.menu :where(li:not(.menu-title) > *:not(ul):not(details):not(.menu-title)),
+.menu :where(li:not(.menu-title) > *:not(ul, details, .menu-title, .btn)),
 .menu :where(li:not(.menu-title) > details > summary:not(.menu-title)) {
   @apply rounded-btn px-4 py-2 text-start transition duration-200 ease-out;
   text-wrap: balance;
 }
 
-:where(.menu li:not(.menu-title):not(.disabled) > *:not(ul):not(details):not(.menu-title)),
-:where(.menu li:not(.menu-title):not(.disabled) > details > summary:not(.menu-title)) {
-  &:not(summary):not(.active).focus,
-  &:not(summary):not(.active):focus,
-  &:is(summary):not(.active):focus-visible {
+:where(.menu li:not(.menu-title, .disabled) > *:not(ul, details, .menu-title)),
+:where(.menu li:not(.menu-title, .disabled) > details > summary:not(.menu-title)) {
+  &:not(summary, .active, .btn).focus,
+  &:not(summary, .active, .btn):focus,
+  &:is(summary):not(.active, .btn):focus-visible {
     @apply bg-base-content/10 text-base-content cursor-pointer outline-none;
   }
   @media (hover: hover) {
-    &:not(.active):hover {
+    &:not(.active, .btn):hover {
       @apply cursor-pointer outline-none;
       @supports (color: oklch(0 0 0)) {
         @apply bg-base-content/10;
@@ -36,8 +36,8 @@
   }
 }
 
-.menu li > *:not(ul):not(.menu-title):not(details):active,
-.menu li > *:not(ul):not(.menu-title):not(details).active,
+.menu li > *:not(ul, .menu-title, details, .btn):active,
+.menu li > *:not(ul, .menu-title, details, .btn).active,
 .menu li > details > summary:active {
   @apply bg-neutral text-neutral-content [@media(hover:hover)]:bg-neutral [@media(hover:hover)]:text-neutral-content;
 }
diff --git a/src/components/unstyled/menu.css b/src/components/unstyled/menu.css
index 5b7e87109cb..2f5b24badaf 100644
--- a/src/components/unstyled/menu.css
+++ b/src/components/unstyled/menu.css
@@ -3,7 +3,7 @@
   :where(li ul) {
     @apply relative whitespace-nowrap;
   }
-  :where(li:not(.menu-title) > *:not(ul):not(details):not(.menu-title)),
+  :where(li:not(.menu-title) > *:not(ul, details, .menu-title, .btn)),
   :where(li:not(.menu-title) > details > summary:not(.menu-title)) {
     @apply grid grid-flow-col content-start items-center gap-2;
     grid-auto-columns: minmax(auto, max-content) auto max-content;
diff --git a/src/utilities/styled/menu.css b/src/utilities/styled/menu.css
index 5ea229b948b..0fe9ec0f022 100644
--- a/src/utilities/styled/menu.css
+++ b/src/utilities/styled/menu.css
@@ -18,7 +18,7 @@
 }
 
 .menu-xs {
-  :where(li:not(.menu-title) > *:not(ul):not(details):not(.menu-title)),
+  :where(li:not(.menu-title) > *:not(ul, details, .menu-title)),
   :where(li:not(.menu-title) > details > summary:not(.menu-title)) {
     @apply rounded px-2 py-1 text-xs;
   }
@@ -27,7 +27,7 @@
   }
 }
 .menu-sm {
-  :where(li:not(.menu-title) > *:not(ul):not(details):not(.menu-title)),
+  :where(li:not(.menu-title) > *:not(ul, details, .menu-title)),
   :where(li:not(.menu-title) > details > summary:not(.menu-title)) {
     @apply rounded-btn px-3 py-1 text-sm;
   }
@@ -36,7 +36,7 @@
   }
 }
 .menu-md {
-  :where(li:not(.menu-title) > *:not(ul):not(details):not(.menu-title)),
+  :where(li:not(.menu-title) > *:not(ul, details, .menu-title)),
   :where(li:not(.menu-title) > details > summary:not(.menu-title)) {
     @apply rounded-btn px-4 py-2 text-sm;
   }
@@ -45,7 +45,7 @@
   }
 }
 .menu-lg {
-  :where(li:not(.menu-title) > *:not(ul):not(details):not(.menu-title)),
+  :where(li:not(.menu-title) > *:not(ul, details, .menu-title)),
   :where(li:not(.menu-title) > details > summary:not(.menu-title)) {
     @apply rounded-btn px-6 py-3 text-lg;
   }