@import '../../marketplace.css';

:root {
  --inputHeight: 50px;
  --sidePadding: 24px;
  --sidePaddingDesktop: 36px;
  --poweredImageHeight: 18px;
}

.root {
  position: relative;
  display: flex;
}

.icon {
  display: flex;
  width: 24px;
  align-self: stretch;
  border-bottom: 3px solid var(--marketplaceColor);
  background-color: var(--matterColorLight);
}

.iconSvg {
  margin: auto;
}

.iconSvgGroup {
  stroke: var(--marketplaceColor);
}

.input {
  flex-grow: 1;
  height: var(--inputHeight);
  padding-left: 18px;
}

/*
Predictions container can be overriden with new container styles for
size and position, etc.
*/
.predictionsRoot {
  position: absolute;
  width: 100%;
  padding-bottom: 98px;
  top: var(--inputHeight);
  background-color: var(--marketplaceColor);
  border-bottom-left-radius: var(--borderRadius);
  border-bottom-right-radius: var(--borderRadius);
  box-shadow: var(--boxShadowPopup);
  z-index: var(--zIndexPopup + 1);
}

/*
The Google Maps API TOS requires us to show a Powered by Google logo
next to the autocomplete service predictions. It is rendered to the
bottom of the container.
*/
.poweredByGoogle {
  position: absolute;
  bottom: 27px;
  width: 100%;
  height: var(--poweredImageHeight);
  background-image: url(./images/powered_by_google_on_non_white_hdpi.png);
  background-size: auto var(--poweredImageHeight);
  background-position: center;

  @media (--desktopViewport) {
    background-position: center left var(--sidePaddingDesktop);
  }
}

/* List of predictions, with a responsive padding size */
.predictions {
  composes: searchResultsFont from '../../marketplace.css';

  margin: 0;
  padding: 14px 0;

  & li {
    color: var(--matterColorLight);

    /* Assign enough vertical padding to make the element at least 44px high */
    padding: 10px var(--sidePadding);

    @media (--desktopViewport) {
      padding: 10px var(--sidePaddingDesktop);
    }

    &:hover,
    &.highlighted {
      text-decoration: underline;
      cursor: pointer;
    }
  }
}