@lonelyplanet/dotcom-core/src/templates/autocomplete/styles.css

This package is meant to house some of our more common UI and shared libs across dotcom applications.

/* Template styles */

@supports (display: grid) {
  .templateAutocomplete {
    grid-template-rows: 50px;
  }

  :global(.lp-global-autocompleteWithResults) .templateAutocomplete {
    grid-template-rows: 50px 1fr;
  }
}

@media (min-width: map(mq, min, 768)) {
  @supports (display: grid) {
    .templateAutocomplete {
      grid-template-rows: 130px;
    }

    :global(.lp-global-autocompleteWithResults) .templateAutocomplete {
      grid-template-rows: 130px 1fr;
    }
  }
}

.templateAreaKeywordsAutocomplete {
  background-color: map(colors, bgPrimary);
  width: 100%;
  z-index: map(zIndex, default);
}

@supports (display: grid) {
  .templateAreaKeywordsAutocomplete {
    grid-column: full;
    grid-row: 1 / 2;
  }
}

@media (max-width: map(mq, max, 768)) {
  .templateAreaKeywordsAutocomplete {
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.1);
    transition: box-shadow map(timing, fast);
  }
}

@media (max-width: map(mq, max, 768)) {
  .templateAreaKeywordsAutocompleteShadow {
    box-shadow: 0 -8px 64px 0 rgba(0, 0, 0, 0.5);
  }
}

.templateAreaResultsAutocomplete {
  grid-column: full;
  grid-row: 2 / 3;
  width: 100%;
}

@media (max-width: map(mq, max, 768)) {
  .templateAreaResultsAutocomplete {
    position: absolute;
    overflow: auto;
    top: 0;
    padding-top: 80px;
    padding-bottom: 72px;
    bottom: 0;
  }
}

/* Target iPhone X and give a bit more space above Safari's toolbar */
@media (max-width: map(mq, max, 768)) and (min-height: 600px) {
  .templateAreaResultsAutocomplete {
    padding-bottom: 112px;
  }
}

@supports (display: grid) {
  .templateAreaDestinationsAutocomplete,
  .templateAreaPoisAutocomplete {
    grid-column: container;
  }
}

@media (min-width: map(mq, min, 1024)) {
  .templateAreaDestinationsAutocomplete,
  .templateAreaPoisAutocomplete {
    float: left;
    width: span(3 fluid);
  }

  @supports (display: grid) {
    .templateAreaDestinationsAutocomplete,
    .templateAreaPoisAutocomplete {
      float: none;
      grid-column-end: span 3;
      grid-row: 2 / 3;
      margin-top: 32px;
      width: 100%;
    }

    .templateAreaDestinationsAutocomplete {
      grid-column-start: column-start 1;
    }

    .templateAreaPoisAutocomplete {
      grid-column-start: column-start 4;
    }
  }
}

@supports (display: grid) {
  .templateAreaNewsAutocomplete,
  .templateAreaCommunityAutocomplete,
  .templateAreaShopAutocomplete {
    grid-column: container;
    grid-row: 3 / 4;
  }
}

@media (min-width: map(mq, min, 1024)) {
  .templateAreaTopics {
    float: left;
    width: span(2 fluid);
  }

  @supports (display: grid) {
    .templateAreaNewsAutocomplete,
    .templateAreaCommunityAutocomplete,
    .templateAreaShopAutocomplete {
      float: none;
      grid-column-end: span 2;
      grid-row: 2 / 3;
      margin-top: 32px;
      width: 100%;
    }

    .templateAreaNewsAutocomplete {
      grid-column-start: column-start 7;
    }

    .templateAreaCommunityAutocomplete {
      grid-column-start: column-start 9;
    }

    .templateAreaShopAutocomplete {
      grid-column-start: column-start 11;
    }
  }
}