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

  @apply block;
  /* transition: all 0.5s;
  transition-timing-function: cubic-bezier(0, 0.51, 0.23, 0.99); */

  &[mobile-closed] {
    @apply hidden;
  }

  &[mobile-closing] {
    /* animation: translate-out 400ms forwards cubic-bezier(0, 0.51, 0.23, 0.99),
      fade-out 800ms forwards ease-in; */
    animation: translate-out 800ms forwards ease-in, fade-out 600ms forwards ease-in;
  }
  &[mobile-opened] {
    animation: translate-in 700ms forwards cubic-bezier(0, 0.51, 0.23, 0.99),
      fade-in 600ms forwards ease-out;
  }

  &__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 {
      box-sizing: border-box;
      @apply block max-w-full w-full flex-grow !py-4  !border-neutral-500 px-4 focus-visible:ring-primary focus-visible:ring-2;
      @apply border rounded-full md:rounded-r-none;
      outline: none !important;
      /* border-right: none;
      border-top-left-radius: 999px;
      border-bottom-left-radius: 999px;
      border: 1px solid; */

      /* box-shadow: 0 0 1px 0px white inset, 0 0 1px 0px white; */
    }
    button[type='submit'] {
      @apply bg-secondary text-white  shrink-0 flex justify-center items-center gap-3 rounded-full md:rounded-l-none px-4 py-3 focus-visible:ring-primary focus-visible:ring-2;
      max-width: 300px;
      outline: none !important;
      transform: translateX(-1px);
      .search_icon {
        @apply invert;
      }
    }
  }
  &__searchbar-group {
    @apply w-full flex flex-col md:flex-row gap-y-4;
  }
  &__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;
        word-break: break-word;
      }
    }
  }
}
