#search-drawer {
  --_search-form-margin-bottom: 1.5rem;
  --_search-padding: 0.6875rem 0.75rem;
  --_container-template-columns: minmax(0, 1fr);
  --_products-flex-wrap: wrap;
  --swiper-theme-color: var(--theme-color-black);

  *::-webkit-scrollbar,
  *::-webkit-scrollbar-track,
  *::-webkit-scrollbar-thumb {
    display: none;
  }

  .modal__body {
    overflow-y: auto;
  }

  .search-drawer__reset:not(.hidden) {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 1.5rem;
    height: 1.5rem;
    flex-shrink: 0;
  }

  #search-products:has(.swiper-wrapper:empty),
  #search-suggestions:empty {
    display: none;
  }

  #predictive-search-form {
    padding: var(--_search-padding);
    background-color: var(--theme-color-white);
    border-radius: 0.5rem;
    border: 1px solid var(--theme-color-grey-3);
    margin-bottom: var(--_search-form-margin-bottom);

    .icon-search {
      padding-block: 0.3125rem;
    }

    #search-drawer-input {
      &::placeholder {
        color: var(--theme-color-grey-4);
      }
    }
  }

  .drawer--search__container--header,
  .drawer--search__subtitle {
    margin-bottom: 0.75rem;
  }

  #custom-predictive-search {
    display: flex;
    flex-direction: column;
  }

  .drawer-search__products--controls {
    display: none;
  }

  .drawer--search__content {
    display: grid;
    grid-template-columns: var(--_container-template-columns);
    gap: 2rem;
  }

  .drawer--search__suggestions {
    grid-column: 1 / -1;
  }

  .predictive-search__suggestions--list,
  .drawer--search__popular {
    height: auto;
  }

  .drawer--search__popular--item {
    display: contents;
    flex-shrink: 0;

    .drawer--search__popular--link {
      padding: 0.5625rem 0.75rem;
      background-color: var(--theme-color-white);
      border: 1px solid var(--theme-color-grey-2);
      border-radius: 0.25rem;
      transition: all 0.2s ease-in-out;

      &:focus,
      &:hover {
        border-color: var(--theme-color-black);
      }
    }
  }

  &:has(#search-products:empty) {
    #result-products-title,
    .drawer-search__products--controls-results {
      display: none;
    }
  }

  &:not(:has(#search-products .swiper-wrapper:empty)) {
    #featured-products-title,
    #featured-products,
    .drawer-search__products--controls-featured {
      display: none;
    }
  }

  .predictive-search__suggestions--list {
    display: flex;
    gap: 0.75rem;
    align-items: center;
    line-height: 1;
  }

  .swiper-button-disabled {
    visibility: hidden;
  }
}

@media screen and (max-width: 999px) {
  #search-drawer {
    .modal__container {
      overflow-y: auto;
    }

    &:not(:has(#search-suggestions:empty)) {
      #search-popular {
        display: none;
      }
    }

    .drawer--search__products,
    .drawer-search__results {
      width: auto;
      display: flex;
      flex-wrap: var(--_products-flex-wrap);
      align-items: start;
      gap: 0.25rem;
      overflow-x: auto;
      transform: unset !important;
    }

    .product-card__wrapper {
      flex: 1 1 calc(50% - 0.25rem);
      margin-right: 0 !important;
    }

    .predictive-search__suggestions--list-item {
      display: contents;
      flex-shrink: 0;

      .predictive-search__suggestions--list-link {
        padding: 0.5625rem 0.75rem;
        background-color: var(--theme-color-white);
        border: 1px solid var(--theme-color-grey-2);
        border-radius: 0.25rem;
        transition: all 0.2s ease-in-out;

        &:focus,
        &:hover {
          border-color: var(--theme-color-black);
          background-color: var(--theme-color-grey-1);
          background-size: 0;
        }
      }
    }
  }
}

@media screen and (min-width: 1000px) {
  #search-drawer {
    --_container-template-columns: minmax(25rem, 32%) minmax(0, 1fr);
    --_search-padding: 0.4375rem 0.75rem;
    --_products-flex-wrap: nowrap;

    &:has(#search-suggestions:empty) {
      /* PLACEHOLDER MARGIN */
      --_search-form-margin-bottom: 4.625rem;
    }

    .modal__header {
      .modal__close {
        top: calc(100% + 0.75rem);
        left: 0;
        transform: unset;
      }

      .modal__title {
        display: none;
      }
    }

    .modal__body {
      padding-top: 0;
    }

    .predictive-search__suggestions--list,
    .drawer--search__popular {
      flex-wrap: wrap;
    }

    .modal__container {
      max-width: unset;
      width: 100%;
      margin: 0.75rem;
      height: fit-content;
      padding-bottom: 3rem;
    }

    .drawer--search__container {
      &.drawer--search__suggestions {
        display: flex;
        align-items: center;
        gap: 0.75rem;

        .drawer--search__subtitle {
          margin-bottom: 0;
        }
      }

      .drawer-search__products--controls {
        display: flex;
        gap: 0.5rem;

        button.swiper-button {
          background-color: var(--theme-color-white);
          --swiper-navigation-size: 1.5rem;
          position: relative;
          inset: unset;
          margin-top: unset;
        }
      }
    }
  }
}