/* Start::app-header */
.app-header {
  @apply w-full max-w-full h-[3.75rem] z-[100] fixed top-0 start-0 border-b border-b-headerbordercolor dark:border-white/10 transition-all ease-linear duration-[0.1s] bg-white dark:bg-bodybg;

  #mainHeaderProfile {
    @apply text-headerprimecolor;
  }
}

.app-header {
  @apply lg:ps-60;
}

.header-icon-badge {
  @apply absolute py-[0.15rem] px-1 top-3 bottom-[0.45rem] text-[0.625rem];
}

.related-app {
  @apply text-center rounded-md border border-defaultborder dark:border-white/10;

  &:hover {
    @apply bg-light;
  }
}

.header-profile-dropdown {
  @apply min-w-[11rem] top-[15px]!;
}
.dark {
  .dropdown-profile {
    p {
      @apply text-white/70;
    }
    span {
      @apply text-white/70;
    }
  }
}
/* End::app-header */

/* Start::main-header-container */
.main-header-container {
  @apply flex items-stretch justify-between h-full;

  .header-content-left,
  .header-content-right {
    @apply flex items-center!;
  }

  .header-element {
    @apply flex items-stretch;
  }

  .header-link {
    @apply flex items-center py-4 px-[0.65rem];

    &:hover,
    &.show {
      .header-link-icon {
        @apply fill-headerprimecolor  text-headerprimecolor;
      }
    }
  }

  .header-link-icon {
    @apply w-7 h-7 text-xl text-headerprimecolor fill-headerprimecolor transition-all ease-linear duration-[0.05s] flex items-center relative rounded-[50%] p-1;

    &:hover {
      @apply bg-light;
    }
  }

  .dropdown-toggle {
    @apply no-underline;

    &::after {
      @apply content-none;
    }
  }

  .main-profile-user {
    .dropdown-menu {
      @apply w-52;
    }

    .dropdown-item {
      @apply font-normal text-[0.8125rem] text-defaulttextcolor py-5 px-4 h-[2.375rem] flex items-center;

      &:hover {
        @apply text-primary;

        i {
          @apply text-primary opacity-[1];
        }
      }
    }
  }

  .main-header-dropdown {
    @apply top-[-3px] shadow-[0rem_0.25rem_0.625rem_rgba(20,20,20,0.1)];

    &.header-shortcuts-dropdown {
      @apply w-[22rem];
    }

    .dropdown-item {
      @apply p-[0.65rem] border-b border-b-defaultborder dark:border-b-white/10;

      &:last-child {
        @apply border-b-0;
      }
    }
  }

  .cart-dropdown .main-header-dropdown {
    @apply w-[22rem]!;
  }

  .notifications-dropdown .main-header-dropdown {
    @apply w-[22rem];
  }
}

// @keyframes slideIn {
//   0% {
//     @apply opacity-0 translate-y-24;
//   }

//   100% {
//     @apply opacity-[1];
//   }

//   0% {
//     @apply opacity-0 translate-y-24;
//   }
// }

[dir="rtl"] {
  .sidemenu-toggle {
    .open-toggle {
      @apply rotate-180;
    }
  }
}

/* End::main-header-container */

/* Start::Header-dropdown */
.header-product-item {
  @apply ps-0 flex;

  li {
    @apply relative list-none text-[0.75rem] font-normal text-textmuted pe-[0.938rem];
  }

  li:nth-child(2),
  li:nth-child(3),
  li:nth-child(4) {
    @apply before:absolute before:start-[-0.438rem] before:w-px before:top-1 before:h-2.5 before:bg-textmuted before:opacity-[0.1];
  }
}

.header-cart-remove {
  .ti {
    @apply p-1 rounded-sm text-[0.85rem] ms-3 text-danger;
  }

  &:hover {
    .ti {
      @apply bg-danger/10;
    }
  }
}

/* End::Header-dropdown */

/* Start::header-search */
#searchModal {
  .form-control {
    @apply relative;
  }

  .input-group {
    @apply border-[2px] border-primary rounded-sm;

    i {
      @apply text-textmuted;
    }
  }
}

.search-tags {
  @apply text-[0.75rem] text-defaulttextcolor border border-defaultborder rounded-sm bg-light py-0.5 px-[0.55rem] leading-[1.2] inline-flex items-center cursor-default font-normal m-1;

  .tag-addon:last-child {
    @apply rounded-md;
  }

  a.tag-addon {
    @apply no-underline cursor-pointer inline-block py-0 px-2  bg-light me-[-0.4rem] ms-2 text-center min-w-[1.5rem];

    i {
      @apply align-middle my-0 -mx-[0.25rem] leading-6 text-[var(--font-size-defaultsize)];
    }
  }

  i {
    @apply text-[var(--font-size-defaultsize)];
  }
}

/* End::header-search */

/* Start::header-country-selector */
.country-selector {
  .header-link img {
    @apply w-5 h-5;
  }

  .dropdown-menu {
    img {
      @apply w-4 h-4;
    }
  }
}

/* End::header-country-selector */

/* Start:header dropdowns scroll */
#header-shortcut-scroll,
#header-notification-scroll,
#header-cart-items-scroll {
  @apply max-h-80;
}

/* End:header dropdowns scroll */

/* Start::header badge pulse */
.pulse {
  @apply block cursor-pointer animate-pulse;

  &.pulse-secondary {
    @apply shadow-[0rem_0rem_0rem_rgba(35,183,229,0.4)];
  }
}

@-webkit-keyframes pulse-secondary {
  0% {
    @apply shadow-[0_0_0_0_secondary/40];
  }

  70% {
    @apply shadow-[0_0_0_0_secondary/0];
  }

  100% {
    @apply shadow-[0_0_0_0_secondary/0];
  }
}

// @keyframes pulse-secondary {
//   0% {
//     @apply shadow-[0_0_0_0_secondary/40];
//   }

//   70% {
//     @apply shadow-[0_0_0_0_secondary/0];
//   }

//   100% {
//     @apply shadow-[0_0_0_0_secondary/0];
//   }
// }

/* End::header badge pulse */

/* Start::Header theme-mode icon style */
[class="light"] {
  .layout-setting .dark-layout {
    @apply hidden;
  }

  .layout-setting .light-layout {
    @apply block;
    display: block;
  }
}

.layout-setting .dark-layout {
  @apply hidden;
}

.layout-setting .light-layout {
  display: block;
}

.dark {
  .layout-setting .light-layout {
    @apply hidden;
  }

  .layout-setting .dark-layout {
    @apply block;
  }
}

/* End::Header theme-mode icon style */

/* Start::Header fullscreen responsive */
@media (max-width: 767.98px) {
  .header-element.header-fullscreen {
    @apply hidden;
  }
}

/* End::Header fullscreen responsive */

/* Start::Responsive header dropdowns */
@media (max-width: 575.98px) {
  .app-header {
    .dropdown-menu {
      @apply w-full;
    }
  }
}

/* End::Responsive header dropdowns */

/* Start::toggle */
.animated-arrow.hor-toggle {
  @apply text-center w-8 text-[1.2rem] relative m-[0.3125rem] me-[0.625rem];
}

.animated-arrow {
  @apply absolute start-0 top-0 z-[50] cursor-pointer p-[0.3125rem] mt-[0.375rem] mb-0 ms-2 me-0 transition-all ease-in-out duration-[0.05s];
}

.animated-arrow.hor-toggle span {
  @apply align-middle;
}

.animated-arrow span {
  @apply cursor-pointer h-0.5 w-3 bg-headerprimecolor dark:bg-white/60 absolute block content-[""] transition-all ease-in-out duration-[0.05s];
}

.animated-arrow span:before,
.animated-arrow span:after {
  @apply transition-all ease-in-out duration-[0.05s];
}

.animated-arrow span {
  @apply before:top-[-0.375rem] before:w-[1.4375rem];
}

.animated-arrow span {
  @apply after:bottom-[-0.375rem] after:w-60;
}

.animated-arrow span:before,
.animated-arrow span:after {
  @apply cursor-pointer h-0.5 w-[1.0625rem] bg-headerprimecolor dark:bg-white/60 absolute block content-[""];
}
[data-toggled="icon-overlay-close"],
[data-toggled="close-menu-close"],
[data-toggled="icon-text-close"],
[data-toggled="detached-close"],
[data-toggled="menu-click-closed"],
[data-toggled="menu-hover-closed"],
[data-toggled="icon-click-closed"],
[data-toggled="icon-hover-closed"],
[data-toggled="double-menu-close"] {
  .animated-arrow span {
    @apply bg-transparent! bg-none! ;
  }

  .animated-arrow span {
    @apply before:!rotate-45 before:!bottom-0 ;
  }

  .animated-arrow span {
    @apply before:!top-0;
  }

  .animated-arrow span {
    @apply after:!-rotate-45;
  }

  .animated-arrow span {
    @apply after:!w-[1.0625rem] after:!top-0;
  }
}

/* End::toggle */

/* Start::header notification dropdown */
.header-notification-text {
  @apply max-w-[14.5rem];
}

/* Start::header notification dropdown */
.header-icon {
  @apply text-[1.125rem] leading-[1.75rem] text-headerprimecolor;
}

.badge {
  @apply py-[0.25rem] px-[0.45rem] font-[600] rounded-sm leading-none text-center;
}

.avatar.avatar-sm {
  @apply w-[1.75rem]! h-[1.75rem]! leading-[1.75rem]! text-[0.65rem]! ;
}

.dropdown-divider {
  @apply m-0 border-defaultborder dark:border-defaultborder/10 border-t;
}
.dark {
  .app-header {
    @apply bg-bodybg! border-b! border-b-white/10!;
  }
}
@media (max-width: 575.98px) {
  .main-header-container .header-element > button,
  .main-header-container .header-element > a {
    @apply py-4!;
  }
}
@media (max-width: 991.98px) {
  .app-header .horizontal-logo .header-logo img {
    @apply h-8 leading-8;
  }
}