.search-box {
  background-color: var(--search-box-background-color, var(--color-midnight-900));
  color: var(--search-box-color, var(--color-white));
  display: grid;
  gap: var(--search-box-gap);
  grid-template-columns: 100%;
  padding-block: var(--search-box-padding-block);
  padding-inline: var(--search-box-padding-inline);

  @include use-responsive-sizing(--search-box-padding-block, responsive-map(xs 3rem, xl 5rem));
  @include use-responsive-sizing(--search-box-padding-inline, responsive-map(xs 2rem, xl 5rem));
  @include use-responsive-sizing(--search-box-gap, responsive-map(xs 2.5rem, xl 4rem));
}

.search-box__search {
  max-inline-size: 80rem;
}

.search-box__suggestions {
  display: grid;
  gap: 2rem;
  grid-template-columns: 100%;
  max-inline-size: 80rem;
}

.search-box__list {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem;
}

.search-box__list-item {
  display: block;
  max-inline-size: 100%;
}

.search-box__tag {
  --_search-box-tag-padding-inline: var(--search-box-tag-padding-inline, 2rem);
  --_search-box-tag-padding-block: var(--search-box-tag-padding-block, 0.8rem);
  --_search-box-tag-line-height: var(--search-box-tag-line-height, 1.15);
  --_search-box-tag-font-size: var(--search-box-tag-font-size, 1.4rem);
  --_search-tag-border-radius: var(--search-tag-border-radius,
  calc(((var(--_search-box-tag-padding-block) * 2) + (var(--_search-box-tag-font-size) * var(--_search-box-tag-line-height))) / 2));

  align-items: stretch;
  background-color: var(--search-box-tag-background-color, var(--color-midnight-700));
  border-radius: var(--_search-tag-border-radius);
  color: var(--search-box-tag-color);
  display: inline-flex;
  font-size: var(--_search-box-tag-font-size);
  line-height: var(--_search-box-tag-line-height);
  max-inline-size: 100%;
  overflow: hidden;
  padding-inline: var(--_search-box-tag-padding-inline);
  transition-duration: var(--duration-fast);
  transition-property: background-color, color;

  &:is(button, :any-link):is(:hover, :focus-visible:not(.u-focus-invisible)) {
    background-color: var(--search-box-tag-background-color--interacted, var(--color-orange));
    color: var(--search-box-tag-background--interacted, var(--color-midnight));
  }
}

.search-box__tag-inner {
  display: flex;
  margin-inline: calc(var(--_search-box-tag-padding-inline) * -1);
  overflow: hidden;
  padding-inline: var(--_search-box-tag-padding-inline);
  transition-property: background-color, color;

  &:is(button, :any-link):is(:hover, :focus-visible:not(.u-focus-invisible)) {
    background-color: var(--search-box-tag-background-color--interacted, var(--color-orange));
    color: var(--search-box-tag-background--interacted, var(--color-midnight));
  }
}

.search-box__tag-prefix {
  flex-shrink: 0;
  opacity: 0.6;
  padding-block: var(--_search-box-tag-padding-block);
}

.search-box__tag-text {
  --underline-color: transparent;
  --underline-color--enter: currentColor;
  --underline-height: 1px;
  --line-clamp: 1;

  font-weight: var(--search-box-tag-prefix-font-weight, var(--font-weight-semibold));
  overflow: hidden;
  padding-block: var(--_search-box-tag-padding-block);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.search-box__tag-action {
  align-items: center;
  background-color: var(--search-box-tag-action-background-color, var(--color-midnight-700));
  border-color: var(--search-tag-action-border-color, var(--color-midnight-500));
  border-inline-start-width: var(--search-tag-action-border-width, 1px);
  border-style: var(--search-tag-action-border-style, solid);
  display: flex;
  flex-shrink: 0;
  justify-content: center;
  margin-inline-end: calc(var(--_search-box-tag-padding-inline) * -1);
  margin-inline-start: calc(var(--_search-box-tag-padding-inline) * 0.75);
  padding-inline-end: calc(var(--_search-box-tag-padding-inline) * 0.75);
  padding-inline-start: calc(var(--_search-box-tag-padding-inline) * 0.6);
  transition-property: background-color, border-color, color;

  &:any-link:is(:hover, :focus-visible:not(.u-focus-invisible)) {
    background-color: var(--search-box-tag-action-background-color--interacted, var(--color-orange));
    border-color: var(--search-tag-action-border-color--interacted, var(--color-orange));
    color: var(--search-box-tag-action-color--interacted, var(--color-midnight));
  }
}

.search-box__toggles {
  border-block-start: 2px solid var(--search-box-line-color, var(--color-midnight-800));
  display: grid;
  padding-block-start: var(--search-box-gap);
  row-gap: calc(var(--search-box-gap) / 2);
}

.search-box__filters {
  --icon-button-background-color: transparent;
  --icon-button-background-color-active: transparent;
  --icon-button-border-color: transparent;
  --icon-button-border-color-active: transparent;
  --icon-button-icon-color: var(--search-box-icon-color, var(--color-orange));
  --icon-button-icon-color-active: var(--search-box-icon-color, var(--color-orange));
  --icon-button-size: 4rem;
  --icon-button-icon-size: 4rem;
  --icon-button-gap: 1.5rem;

  border-block-start: 2px solid var(--search-box-line-color, var(--color-midnight-800));
  display: flex;
  flex-direction: column;
  padding-block-start: calc(var(--search-box-gap) - var(--icon-button-size) / 4);
  row-gap: calc(var(--search-box-gap) / 2);
}