.search-box__tip {
  padding-block-end: 20px;
}

.search-box .field {
  margin-block: 0;
}

.search-box .field__inner::before {
  box-shadow: inset 0 calc(var(--input-border-thickness) * -1) 0 0 rgb(var(--color-text) / var(--input-border-opacity));
}

.search-box .field__input {
  height: auto;
  font-size: 22px;
  letter-spacing: -1px;
  line-height: 1.3;
  font-weight: 600;
  padding-block: 0.3em;
  padding-inline: 0.3em;
}

.search-box .field__input::placeholder {
  color: rgb(var(--color-text));
  opacity: 0.4;
}

.search-box .field__suffix {
  opacity: 0;
  transition: opacity 0.3s ease;
}

.search-box .field__suffix .icon,
.search-box .field__input:not(:placeholder-shown)~.field__suffix {
  opacity: 1;
}

@media (min-width: 960px) {
  .search-box .field__input {
    font-size: 36px;
    font-weight: 700;
  }
}

.search-box__result-loading {
  inset-block-start: 12px;
  inset-inline-end: 12px;
}

@media (min-width: 960px) {
  .search-box__result-loading {
    inset-block-start: 16px;
    inset-inline-end: 16px;
  }
}

.search-box__result-wrapper.loading .search-box__result-loading {
  display: block;
}

.search-box__result-wrapper.loading .search-box__result-loading .icon {
  animation: animation-circling 0.5s linear infinite;
}

.search-box__result {
  position: relative;
  margin-inline: 0;
  padding-block-start: 40px;
  width: 100%;
}

@media (min-width: 960px) {
  .search-box__result {
    padding-block-start: 60px;
  }
}

.search-box__field {
  background-color: rgb(var(--color-background));
}

.search-box:has(> .search-box__result-wrapper[open]) .search-box__field {
  z-index: calc(var(--z-index-modal) + 2);
}

.search-box__result-suggestions>li:first-child .search-box__result-title {
  padding-block-start: 0;
  border-block-start: 0;
}

.search-box__result-title {
  padding-block-start: 36px;
  padding-block-end: 12px;
  border-block-start: 1px solid rgb(var(--color-border));
}

.search-box__result-list:not(:empty)~.search-box__result-suggestions {
  display: none;
}

.search-box__result:has(.search-box__result-list:empty):has(.search-box__result-suggestions:empty) {
  visibility: hidden;
}

.search-box__result-wrapper.loading .search-box__result:has(.search-box__result-list:empty):has(.search-box__result-suggestions:empty) {
  visibility: visible;
}

.search-box__typed {
  font-size: 22px;
  letter-spacing: -1px;
  line-height: 1.3;
  font-weight: 600;
  padding-block: 0.3em;
  padding-inline: 0.3em;
  background-color: rgb(var(--color-background));
  box-shadow: inset 0 calc(var(--input-border-thickness) * -1) 0 0 rgb(var(--color-text) / var(--input-border-opacity));
}

@media (min-width: 960px) {
  .search-box__typed {
    font-size: 36px;
    font-weight: 700;
  }
}

.search-box__typed .blink {
  animation: blink 0.7s infinite;
}

@keyframes blink {
  0%,
  100% {
    opacity: 1;
  }

  50% {
    opacity: 0;
  }
}