.search-module {
  @apply w-full absolute  
	bg-white
	left-0 
	bottom-0
	px-16
	py-6
	transform translate-y-full;

  &__wrapper-container {
    @apply max-w-screen-xl mx-auto;
  }
  &__search-form {
    @apply flex flex-wrap;

    &__title {
      @apply block font-bold text-lg w-full;
    }
    &__separator {
      @apply mt-2 mb-8 bg-gray-dark border-none opacity-50 w-full;
      height: 1px;
    }
    &__input {
      @apply block max-w-full flex-grow py-3 border border-black rounded-tl-3xl rounded-bl-3xl px-4;
    }
    button[type='submit'] {
      @apply bg-secondary text-white w-1/6 flex justify-center items-center gap-3 rounded-tr-3xl rounded-br-3xl px-4 py-3;
      max-width: 300px;
      .search_icon {
        @apply invert;
      }
    }
  }
  &__suggestions {
    @apply flex flex-wrap gap-x-3 pt-4;
    &__navlist {
      @apply flex flex-wrap gap-x-3;

      .suggestion-item {
        @apply font-bold underline underline-offset-4;
      }
    }
  }
}

.search-module {
  @apply block;
  transition: all 0.5s;
  transition-timing-function: cubic-bezier(0, 0.51, 0.23, 0.99);
}
.search-module[aria-hidden='true'] {
  @apply hidden;
}

.search-module-closed {
  /* transition: all 0.3s ease-in-out; */
  @apply transform translate-y-1/2 opacity-0 pointer-events-none;
  z-index: -1;
}
.search-module-open {
  /* transition: all 0.3s ease-in-out; */

  @apply transform translate-y-full;
  z-index: 20;
}