.menu {
  @apply p-2;
}
:where(.menu li:empty) {
  @apply bg-base-content opacity-10;
  margin: 0.5rem 1rem;
  height: 1px;
}
.menu :where(li ul) {
  @apply ms-4 ps-2;
  &:before {
    @apply bg-base-content absolute bottom-3 start-0 top-3 w-px opacity-10;
    content: "";
  }
}
.menu :where(li:not(.menu-title) > *:not(ul):not(details):not(.menu-title)),
.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 {
    @apply bg-base-content/10 text-base-content cursor-pointer outline-none;
  }
  @media (hover: hover) {
    &:not(.active):hover {
      @apply cursor-pointer outline-none;
      @supports (color: oklch(0 0 0)) {
        @apply bg-base-content/10;
      }
    }
  }
}

.menu li > *:not(ul):not(.menu-title):not(details):active,
.menu li > *:not(ul):not(.menu-title):not(details).active,
.menu li > details > summary:active {
  @apply bg-neutral text-neutral-content [@media(hover:hover)]:bg-neutral [@media(hover:hover)]:text-neutral-content;
}

.menu li.disabled {
  @apply text-base-content/30;
}
.menu :where(li > details > summary)::-webkit-details-marker {
  @apply hidden;
}
.menu :where(li > details > summary):after,
.menu :where(li > .menu-dropdown-toggle):after {
  @apply justify-self-end;
  display: block;
  margin-top: -0.5rem;
  height: 0.5rem;
  width: 0.5rem;
  transform: rotate(45deg);
  transition-property: transform, margin-top;
  transition-duration: 0.3s;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  content: "";
  transform-origin: 75% 75%;
  box-shadow: 2px 2px;
  pointer-events: none;
}
.menu :where(li > details[open] > summary):after,
.menu :where(li > .menu-dropdown-toggle.menu-dropdown-show):after {
  transform: rotate(225deg);
  margin-top: 0;
}
.menu-title {
  @apply text-base-content/40 px-4 py-2 text-sm font-bold;
}
