.navbar {
  @apply hidden md:block relative bg-secondary text-white w-full z-30 transition duration-500 ease-in-out translate-y-0;
  &.fixed {
    position: fixed;
    @apply opacity-0 transform -translate-y-full;
  }
  &.open {
    @apply opacity-100 translate-y-0;
  }

  margin-top: 9px;

  &__nav {
    @apply flex flex-1;

    &.right-nav {
      @apply flex-none;
    }

    li:hover .navbar__dropdown {
      @apply scale-y-100 visible opacity-100;
    }

    li:hover .navbar-link {
      .icon {
        @apply text-white;
      }
      span + .icon {
        @apply rotate-180;
      }
    }

    .parent {
      @apply relative w-half text-sm lg:text-base;
      height: calc(100% - 57px);
      padding-top: 10px;
      font-size: 18px;
      line-height: 20px;

      li {
        padding-bottom: 22px;
        // line-height: 18px;
      }

      a {
        @apply block text-grayDark;
        display: inline-block;
        border-bottom: 1px solid transparent;
        transition: all 0.5s ease-in-out;
        &:hover {
          border-bottom: 1px solid #000;
          transition: all 0.5s ease-in-out;
          @apply text-black;
        }

        &.active {
          @apply text-primary;
        }
      }

      li:hover .child {
        @apply scale-x-100 visible opacity-100;
      }
    }

    .child {
      @apply overscroll-contain absolute left-full w-full inset-y-0 invisible opacity-0 transform scale-x-0 origin-left transition-opacity duration-100 delay-75 ease-in-out text-xs lg:text-sm;
      columns: 2;
      column-fill: auto;
      column-gap: 20px;
      column-span: all;
      padding-top: 10px;
      font-size: 14px;

      li {
        page-break-inside: avoid;
        break-inside: avoid;
      }

      a {
        @apply text-black;
        // line-height: 20px !important;

        &.active {
          @apply text-primary;
        }
      }
    }
  }

  &__dropdown {
    @apply absolute top-full inset-x-0 bg-white text-black z-50 shadow-xl py-10 invisible opacity-0 transform scale-y-0 origin-top transition-opacity duration-300 delay-75 ease-in-out;
    border-color: #eaa699;

    h3 {
      @apply pb-3 mb-3 border-b;
      border-color: #eaa699;
      font-size: 28px;
      color: #2b2a2a;
      opacity: 0.8;
    }
    .cat-image {
      @apply block w-full rounded-xl mt-2;
    }
  }

  .navbar-link {
    @apply flex items-center text-white py-3 px-1 lg:px-2 text-sm lg:text-base;

    .icon {
      @apply text-pink transition duration-150 ease-in-out w-5 h-5;
    }

    span {
      @apply block whitespace-nowrap;
      padding-left: 10px;
      padding-right: 10px;
      font-size: 18px;
      line-height: 27px;

      & + .icon {
        @apply transform w-3 h-3;
      }
    }

    &:hover,
    &.active {
      .icon {
        @apply text-white;
      }
    }
  }
}

.navbar__nav.right-nav {
  padding-left: 35px;
}


//.loader-wrapper {
//  width: 100%;
//  height: 100%;
//  background: #2b2a2a;
//  z-index: 200;
//  position: absolute;
//  top: 0;
//  left: 0;
//  bottom: 0;
//  right: 0;
//  visibility: hidden;
//  opacity: 0;
//  &.active-loader{
//    visibility: visible;
//    opacity: 1;
//  }
//}
//
//.loader-container {
//  display: flex;
//  justify-content: center;
//  align-items: center;
//  width: 100%;
//  height: 100vh;
//
//}


.loader {
  @apply transition-all ease-in duration-200 opacity-100 visible fixed left-0 right-0 top-0 h-full;

  .loader_icon {
    @apply w-full flex justify-center items-center;
  }

  &.loader_1 {
    @apply bg-black z-30;
    .loader_icon {
      @apply h-full;
    }
  }

  &.loader_category {
    @apply bg-washedPink bg-opacity-90 z-40 absolute;
    border-radius: 10px;
    .loader_icon {
      @apply h-full;
    }
  }
  &.loader_3 {
    @apply bg-washedWhite bg-opacity-100 z-50;

    .loader_icon {
      @apply absolute;
      top: calc(50% - 50px);
    }

    .icon {
      @apply text-red;
    }
  }

  &.loaded {
    @apply invisible opacity-0;
  }
}

.section.checkout {
  padding-top: 0;
}