.search-form-container {
  --search-bg-color: var(--white-100);
  --original-price-color: var(--grey-100);
  --sold-out-badge-bg-color: var(--black-200);
  --sale-badge-bg-color: var(--red-100);
  --backdrop-bg-color: var(--transparent-300);
}

body:has(.search-dialog[open]) {
  overflow: hidden;
}

.search-toggle-button {
  display: flex;
  
  &:after {
    mask-image: url("../../assets/icons/search.svg");
    display: block;
  }
}

.search-dialog {
  width: 100%;
  max-width: 100%;
  justify-content: center;
  background-color: var(--search-bg-color);
  border: var(--border-primary);

  
  @supports (transition-behavior: allow-discrete) {
    transition: transform 0.3s, overlay 0.3s, display 0.3s;
    transition-behavior: allow-discrete;
    transform: translateY(-100%);
  }

  &[open] {
    display: flex;

    @supports (transition-behavior: allow-discrete) {
      transform: translateY(0);

      @starting-style {
        transform: translateY(-100%);
      }
    }
  }

  &::backdrop {
    background-color: var(--backdrop-bg-color);
  }
}

.search-form {
  display: flex;
  max-width: var(--page-width);
  flex-direction: column;
  width: 100%;
  padding: 2rem 1rem;
  row-gap: 2rem;

  &[aria-busy="true"] .search-label:before {
    mask-image: url("../../assets/icons/loader.svg");
    animation: spin 1s linear infinite;
  }
}

.search-controls {
  display: flex;
  width: 100%;
  column-gap: 2rem;
  align-items: center;
}

.search-label {
  display: flex;
  width: 100%;
  column-gap: 2rem;
  align-items: center;

  &:before {
    mask-image: url("../../assets/icons/search.svg");
    display: block;
  }
}

.search-form-input {
  width: 100%;
  text-align: left;
  border: none;

  &:focus {
    outline: none;
  }

  &::-webkit-search-cancel-button,
  &::-webkit-search-decoration,
  &::-webkit-search-results-button,
  &::-webkit-search-results-decoration {
    display: none;
  }
}

.search-form-close-button {
  display: flex;

  &:after {
    mask-image: url("../../assets/icons/close.svg");
    display: block;
  }
}

.search-suggestions {
  display: flex;
  align-items: center;
  padding-block: 2rem 0.5rem;
  border-top: var(--border-secondary);
  overflow-x: auto;
  scrollbar-width: thin;
  flex-direction: column;
  row-gap: 2rem;

  &:nth-child(6) {
    display: none;
  }

  @media (width >= 56.25rem) {
    row-gap: 1rem;
  }
}

.search-suggestion {
  display: flex;
  position: relative;
  height: 100%;
  width: 100%;
  flex-direction: column;
  row-gap: 1rem;
}

.search-suggestion-link {
  display: grid;
  grid-template-columns: minmax(0, 7.5rem) 1fr;
  column-gap: 1rem;
  height: 100%;

  &:hover .search-suggestion-image {
    opacity: 0.5;
  }
}

.search-suggestion-image-container {
  position: relative;
  display: flex;
  justify-content: center;
}

.search-suggestion-image {
  aspect-ratio: 1 / 1;
  object-fit: cover;
  transition: opacity 0.3s;
  align-self: center;
  width: 100%;
}

.search-suggestion hgroup {
  row-gap: 0.5rem;
  text-align: center;
  height: 100%;
  text-align: left;
}

.search-suggestion-title {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;  
  -moz-line-clamp: 3;
  -moz-box-orient: vertical;
  line-clamp: 3;
  box-orient: vertical;
  overflow: hidden;
  text-align: left;
}
.search-suggestion-price {
  display: flex;
  column-gap: 0.5rem;
  flex-wrap: wrap;

  &:has(.search-suggestion-sale-price:not(:empty)) .search-suggestion-original-price {
    text-decoration: line-through;
    color: var(--original-price-color);
  }
}

.search-suggestion-sale-price:empty {
  display: none;
}

.search-suggestion[data-pricetype="multiple"] .search-suggestion-from-text {
  display: inline;
}

.search-suggestion-from-text {
  display: none;
}

.search-suggestion[data-stockquantity="0"] .sold-out-badge {
  position: absolute;
  top: 0.5rem;
  left: 0.5rem;
  background-color: var(--sold-out-badge-bg-color);
  padding: 0.1rem 0.25rem;
  display: block;
  z-index: 1;
}

.search-suggestion .sale-badge {
  position: absolute;
  top: 0.5rem;
  right: 0.5rem;
  background-color: var(--sale-badge-bg-color);
  padding: 0.1rem 0.25rem;
  display: block;
  z-index: 1;
}

.search-suggestion[data-stockquantity="0"] .sale-badge {
  display: none;
}

.search-suggestion .sale-badge:empty,
.search-suggestion .sold-out-badge {
  display: none;
}

.search-submit-button {
  display: none;
  margin-inline: auto;
  column-gap: 0.25rem;

  &:after {
    content: "(" attr(data-item-count) ")";
  }
}

.search-form:has(.search-suggestions[data-items="5+"]) .search-submit-button {
  display: flex;
}

.search-suggestions:has(.search-suggestion.template:only-child) {
  display: none;
}

.search-suggestion.template {
  display: none;
}

.search-no-results {
  display: none;
  padding: 2rem;
}

.search-form[aria-busy="false"]:not(.typing):has(.search-suggestion.template:only-child):has(.search-form-input:not(:placeholder-shown)) .search-no-results {
  display: flex;
}