.search-bar {
  display: none;
  position: absolute;
  left: 0;
  top: 4.125rem; /* 66px */
  height: 100dvh;
  background: var(--c-dark-grey);
  width: 100%;
  z-index: 2;
}

.search-bar__container {
  .search-bar__form-container {
    grid-column: span 8;
    padding-top: var(--spacing-3);
    border-bottom: var(--spacing-1px) solid var(--c-light-grey); /* 1px */
  }

  /* Nesting to ensure this doesn't affect other search forms. */
  form {
    display: flex;
    justify-content: center;
    width: 100%;
    position: relative;
  }

  .form-item--search-api-autocomplete__item {
    width: 100%;
  }

  /* Needed for specificity. */
  .form-element.form-element--api-search-api-autocomplete {
    width: 100%;
    height: 2.5rem;
    appearance: none;
    border: unset;
    background: transparent !important;
    color: var(--c-primary-light);
    border-radius: unset;
  }

  .form-element--api-search-api-autocomplete::placeholder {
    color: var(--c-primary-light);
  }

  .search-form__submit .button__icon {
    color: var(--c-primary-light);
    width: 1.5rem; /* 24px */
    height: 1.5rem; /* 24px */
  }

  .search-bar__close {
    display: none;
  }
}


@media (min-width: 992px) {
  .search-bar {
    top: 4.625rem; /* 74px */
  }

  .search-bar__container {
    .search-bar__form-container {
      grid-column: span 4 / -3;
    }
  }
}

/* Desktop breakpoint. */
@media (min-width: 1200px) {
  .search-bar {
    top: 4.8125rem; /* 77px */
  }

  .search-bar__container {
    padding-top: var(--spacing-20);

    .search-bar__close-container {
      display: flex;
      justify-content: flex-end;
    }

    .search-bar__close {
      display: block;
      color: var(--c-primary-light);

      .button__icon {
        height: 1.5rem; /* 24px */
        width: 1.5rem; /* 24px */
      }
    }
  }
}