.horizontal-menu {
  @apply flex flex-wrap items-center gap-y-1;
}

/* Ayırıcı kardeş seçiciyle çizilir: yetkisi olmayan menü DOM'a hiç girmediği için çift çizgi oluşmaz. */
.horizontal-menu-entry + .horizontal-menu-entry {
  @apply relative ltr:pl-px rtl:pr-px;

  &::before {
    content: '';
    @apply absolute top-1/2 -translate-y-1/2 ltr:left-0 rtl:right-0 h-5 w-px bg-gray-300 dark:bg-gray-600;
  }
}

.horizontal-menu-themed .horizontal-menu-entry + .horizontal-menu-entry::before {
  @apply bg-white/25;
}

.horizontal-menu-tab {
  @apply relative mx-0.5 px-2 gap-x-1.5 text-sm;
}

/* Aktif sekme arka planla değil yalnızca alt çizgiyle işaretlenir; renk menü moduna göre koyulaşır. */
.horizontal-menu-tab-active::after {
  content: '';
  @apply absolute inset-x-2 -bottom-1 h-0.5 rounded-full bg-current;
}

.horizontal-menu-light .menu-item.horizontal-menu-tab-active,
.horizontal-menu-transparent .menu-item.horizontal-menu-tab-active {
  @apply text-gray-900 dark:text-gray-100;
}

.horizontal-menu-dark .menu-item.horizontal-menu-tab-active {
  @apply text-gray-100;
}

.horizontal-menu-themed .menu-item.horizontal-menu-tab-active {
  @apply text-opacity-100;
}

/* Açılır menü: genel Dropdown'a dokunmadan yalnızca üst menünün panelleri kapsanır. */
.horizontal-menu .dropdown-menu {
  @apply min-w-[240px] p-1 rounded-lg border border-gray-200 bg-white shadow-xl ring-0
    dark:border-gray-700 dark:bg-gray-800;

  .menu-item {
    @apply px-2.5 gap-x-0 rounded-md text-sm font-normal text-gray-700 dark:text-gray-300;
    height: 2rem !important;
  }

  .menu-item.menu-item-hoverable:hover {
    @apply bg-gray-100 text-gray-900 dark:bg-white/[.06] dark:text-white;
  }

  .dropdown-submenu-item > svg {
    @apply opacity-40;
  }
}

.horizontal-menu-icon {
  @apply inline-flex w-5 shrink-0 justify-center text-base ltr:mr-2.5 rtl:ml-2.5;
}

.horizontal-menu-sub-active {
  @apply font-medium text-gray-900 underline decoration-2 underline-offset-4 dark:text-white;
}