.p-megamenu {
  @apply relative flex items-center gap-2 rounded-md border border-surface-200 bg-surface-0 text-surface-700 dark:border-surface-700 dark:bg-surface-900 dark:text-surface-0;
}

.p-megamenu-start,
.p-megamenu-end {
  @apply flex items-center;
}

.p-megamenu-root-list {
  @apply m-0 flex list-none flex-wrap items-center gap-2 p-0 outline-none;
}

.p-megamenu-root-list > .p-megamenu-item > .p-menumegamenubar-item-content {
  @apply rounded-md;
}

.p-megamenu-root-list > .p-megamenu-item > .p-megamenu-item-content > .p-megamenu-item-link {
  @apply px-3 py-2;
}

.p-megamenu-item-content {
  @apply rounded-sm text-surface-700 transition-colors duration-200 dark:text-surface-0;
}

.p-megamenu-item-link {
  @apply relative flex cursor-pointer select-none items-center gap-2 overflow-hidden px-3 py-2 text-inherit no-underline outline-none;
}

.p-megamenu-item-icon {
  @apply text-surface-400 dark:text-surface-500;
}

.p-megamenu-submenu-icon {
  @apply ms-auto h-[0.875rem] w-[0.875rem] text-sm text-surface-400 dark:text-surface-500;
}

.p-megamenu-item.p-focus > .p-megamenu-item-content {
  @apply bg-surface-100 text-surface-800 dark:bg-surface-800 dark:text-surface-0;
}

.p-megamenu-item.p-focus > .p-megamenu-item-content .p-megamenu-item-icon {
  @apply text-surface-500 dark:text-surface-400;
}

.p-megamenu-item.p-focus > .p-megamenu-item-content .p-megamenu-submenu-icon {
  @apply text-surface-500 dark:text-surface-400;
}

.p-megamenu-item:not(.p-disabled) > .p-megamenu-item-content:hover {
  @apply bg-surface-100 text-surface-800 dark:bg-surface-800 dark:text-surface-0;
}

.p-megamenu-item:not(.p-disabled) > .p-megamenu-item-content:hover .p-megamenu-item-icon {
  @apply text-surface-500 dark:text-surface-400;
}

.p-megamenu-item:not(.p-disabled) > .p-megamenu-item-content:hover .p-megamenu-submenu-icon {
  @apply text-surface-500 dark:text-surface-400;
}

.p-megamenu-item-active > .p-megamenu-item-content {
  @apply bg-surface-100 text-surface-800 dark:bg-surface-800 dark:text-surface-0;
}

.p-megamenu-item-active > .p-megamenu-item-content .p-megamenu-item-icon {
  @apply text-surface-500 dark:text-surface-400;
}

.p-megamenu-item-active > .p-megamenu-item-content .p-megamenu-submenu-icon {
  @apply text-surface-500 dark:text-surface-400;
}

.p-megamenu-overlay {
  @apply absolute start-0 z-10 hidden w-auto min-w-full rounded-md border border-surface-200 bg-surface-0 text-surface-700 shadow-[0_4px_6px_-1px_rgba(0,0,0,0.1),0_2px_4px_-2px_rgba(0,0,0,0.1)] dark:border-surface-700 dark:bg-surface-900 dark:text-surface-0;
}

.p-megamenu-root-list > .p-megamenu-item-active > .p-megamenu-overlay {
  @apply block;
}

.p-megamenu-submenu {
  @apply m-0 flex min-w-52 list-none flex-col gap-[2px] p-1;
}

.p-megamenu-submenu-label {
  @apply bg-transparent px-3 py-2 font-semibold text-surface-500 dark:text-surface-400;
}

.p-megamenu-separator {
  @apply border-t border-surface-200 dark:border-surface-700;
}

.p-megamenu-horizontal {
  @apply items-center px-3 py-2;
}

.p-megamenu-horizontal .p-megamenu-root-list {
  @apply flex flex-wrap items-center gap-2;
}

.p-megamenu-horizontal .p-megamenu-end {
  @apply ms-auto self-center;
}

.p-megamenu-vertical {
  @apply inline-flex min-w-52 flex-col items-stretch p-1;
}

.p-megamenu-vertical .p-megamenu-root-list {
  @apply flex-col items-stretch gap-[2px];
}

.p-megamenu-vertical .p-megamenu-root-list > .p-megamenu-item-active > .p-megamenu-overlay {
  @apply start-full top-0;
}

.p-megamenu-vertical
  .p-megamenu-root-list
  > .p-megamenu-item
  > .p-megamenu-item-content
  .p-megamenu-submenu-icon {
  @apply ms-auto;
}

.p-megamenu-grid {
  @apply flex;
}

.p-megamenu-col-2,
.p-megamenu-col-3,
.p-megamenu-col-4,
.p-megamenu-col-6,
.p-megamenu-col-12 {
  @apply flex-shrink-0 flex-grow-0 basis-auto p-2;
}

.p-megamenu-col-2 {
  @apply w-1/6;
}

.p-megamenu-col-3 {
  @apply w-1/4;
}

.p-megamenu-col-4 {
  @apply w-1/3;
}

.p-megamenu-col-6 {
  @apply w-1/2;
}

.p-megamenu-col-12 {
  @apply w-full;
}

.p-megamenu-button {
  @apply relative hidden h-7 w-7 cursor-pointer items-center justify-center rounded-full border-none bg-transparent text-surface-500 transition-colors duration-200 hover:bg-surface-100 hover:text-surface-600 focus-visible:outline focus-visible:outline-1 focus-visible:outline-offset-2 focus-visible:outline-primary dark:text-surface-400 dark:hover:bg-surface-800 dark:hover:text-surface-300;
}

.p-megamenu-mobile {
  @apply flex;
}

.p-megamenu-mobile .p-megamenu-button {
  @apply flex;
}

.p-megamenu-mobile .p-megamenu-root-list {
  @apply absolute start-0 top-full z-10 hidden w-full flex-col gap-[2px] border border-surface-200 bg-surface-0 p-1 shadow-[0_4px_6px_-1px_rgba(0,0,0,0.1),0_2px_4px_-2px_rgba(0,0,0,0.1)] dark:border-surface-700 dark:bg-surface-900;
}

.p-megamenu-mobile-active .p-megamenu-root-list {
  @apply flex;
}

.p-megamenu-mobile .p-megamenu-root-list .p-megamenu-item {
  @apply static w-full;
}

.p-megamenu-mobile .p-megamenu-overlay {
  @apply static rounded-none border-none shadow-none;
}

.p-megamenu-mobile .p-megamenu-grid {
  @apply max-h-[90%] flex-wrap overflow-auto;
}

.p-megamenu-mobile
  .p-megamenu-root-list
  > .p-megamenu-item
  > .p-megamenu-item-content
  .p-megamenu-submenu-icon {
  @apply ms-auto transition-transform duration-[200ms];
}

.p-megamenu-mobile
  .p-megamenu-root-list
  > .p-megamenu-item-active
  > .p-megamenu-item-content
  .p-megamenu-submenu-icon {
  @apply -rotate-180;
}
