@lonelyplanet/dotcom-core/src/components/searchInput/styles.css

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

.searchInput {
  background-color: map(colors, bgPrimary);
  border: 0;
  display: block;
  height: 50px;
  font-size: map(typography, fontSizeHeading7)px;
  padding: 11px 34px 9px 24px;
  width: 100%;
}

@media (min-width: map(mq, min, 768)) {
  .searchInput {
    border-bottom: 1px solid map(colors, bgPrimary);
    height: auto;
    font-size: map(typography, fontSizeHeading5)px;
    font-weight: map(typography, fontWeightLight);
    min-height: 130px;
    padding-left: 34px;
    padding-right: 56px;
  }
}

@media (min-width: map(mq, min, 768)) {
  :global(.lp-global-autocompleteWithResults) .searchInput {
    border-bottom-color: map(colors, borderPrimary);
  }
}

/* Override normalize.css */
.searchInput[type="search"] {
  appearance: none;
}

.searchInput::-ms-clear {
  display: none;
}

.searchInput:invalid {
  box-shadow: none;
}

.searchInput:focus {
  outline: none;
}

.searchInput::placeholder {
  padding-left: 0;
  margin-left: 0;
  transition: 100ms opacity linear;
}

.searchInput:focus::placeholder {
  opacity: 0.6;
}