/* === navbar css start === */
.navbar-header {
  @apply h-[4.5rem] bg-white sticky top-0 py-4 px-6 z-20 dark:bg-dark-2 border-0;
}

.sidebar-toggle,
.sidebar-mobile-toggle {
  @apply leading-[1] text-neutral-900;
}

.sidebar-toggle .icon {
  @apply text-[28px] dark:text-neutral-200;
}

.sidebar-mobile-toggle .icon {
  @apply text-[1.375rem] dark:text-neutral-200;
}

.sidebar-toggle {
  @apply hidden xl:inline-block;
}

.sidebar-toggle.active .icon.non-active {
  @apply hidden;
}

.sidebar-toggle.active .icon.active {
  @apply inline-block;
}

.sidebar-toggle .icon.active {
  @apply hidden;
}

.sidebar-mobile-toggle {
  @apply inline-block xl:hidden;
}

.navbar-search {
  @apply relative hidden lg:inline-block;
}

.navbar-search input {
  @apply w-[24.25rem] h-[2.5rem] bg-neutral-50 border border-neutral-300 rounded-lg py-[0.3125rem] ps-[2.625rem] pe-[1.25rem] text-neutral-900 dark:bg-neutral-800 dark:border-neutral-600 dark:text-white;
}

.navbar-search input:focus {
  @apply border-primary-600;
}

.navbar-search .icon {
  @apply absolute top-1/2 -translate-y-1/2 start-[0.9375rem] text-[1.125rem] text-dark-2 dark:text-neutral-200;
}

[data-theme-toggle] {
  @apply text-[0px] relative after:absolute after:content-["\f1bf"] after:font-[remixicon] after:text-[1.25rem] after:text-neutral-900;
}

[data-theme-toggle][aria-label=dark]::after {
  content: "\ef6f";
  @apply text-white;
}

/* === navbar css end === */