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

  animation: translate-in 700ms forwards cubic-bezier(0, 0.51, 0.23, 0.99),
    fade-in 600ms forwards ease-out;

  @keyframes translate-in {
    from {
      transform: translateY(calc(100% - 100px));
    }
    to {
      transform: translateY(100%);
    }
  }

  @keyframes fade-in {
    from {
      opacity: 0;
    }
    to {
      opacity: 1;
    }
  }

  @keyframes fade-out {
    from {
      opacity: 1;
    }
    to {
      opacity: 0;
    }
  }
  @keyframes translate-out {
    from {
      transform: translateY(100%);
    }
    to {
      transform: translateY(calc(100% - 100px));
    }
  }

  &[closed] {
    @apply hidden;
  }

  &[closing] {
    animation: translate-out 800ms forwards ease-in, fade-out 600ms forwards ease-in;
  }

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

  a {
    @apply text-white;
  }
  input::placeholder {
    @apply !text-white;
  }
  &__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-neutral-500 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-white px-4 !pl-12 focus-visible:ring-primary focus-visible:ring-2;
      @apply border rounded-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-primary hidden  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 relative;
    &:before {
      @apply content-[''] absolute inset-0  bg-contain bg-center bg-no-repeat w-6 h-6 left-4 top-1/2 -translate-y-1/2;
      background-image: url('../resources/img/icons/carhop-rechercher.svg');
      filter: invert(1);
    }
  }
  &__suggestions {
    @apply pt-4;
    .suggestion-item {
      @apply underline underline-offset-4 block w-full mb-2 font-light text-base;
      word-break: break-word;
      text-decoration-thickness: 1px;
    }
  }
}

body:has(.search-module[opened]) main {
  filter: blur(2px) brightness(0.8);
}