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

:root {
  --inputHeight: 53px;
  --topbarMargin: 94px;
  --bottomBorder: 3px;
  --mobilePredictionTop: calc(var(--topbarMargin) + var(--inputHeight) - var(--bottomBorder));
}

.mobileInputRoot {
  width: 100%;
}

.desktopInputRoot {
  height: var(--topbarHeightDesktop);
}

.mobileIcon {
  margin-left: 24px;
  padding: 11px 0 17px 0;

  /* Borders */
  border-bottom-width: var(--borderRadiusMobileSearch);
}

.mobileInput {
  /* Font */
  @apply --marketplaceH1FontStyles;

  /* Layout */
  margin: 0 24px 0 0;
  padding: 1px 13px 13px 13px;
  height: var(--inputHeight);

  /* Borders */
  border-bottom-width: var(--borderRadiusMobileSearch);
}

.desktopIcon {
  height: var(--topbarHeightDesktop);
  border: none;
  padding-top: 3px;
}

.desktopInput {
  /* Font */
  @apply --marketplaceH4FontStyles;
  height: var(--topbarHeightDesktop);
  border: none;
  padding-top: 0;
  padding-bottom: 0;

  /* Search text gets ellipsis if it's too wide */
  text-overflow: ellipsis;
  overflow-x: hidden;

  &:hover::placeholder,
  &:focus::placeholder {
    color: var(--matterColor);
  }

  /* Placeholder text might be too wide */
  &::placeholder {
    text-overflow: ellipsis;
    overflow-x: hidden;
    font-weight: var(--fontWeightRegular);
    transition: var(--transitionStyleButton);
  }

  margin-top: 0;
  margin-bottom: 0;
  @media (--viewportMedium) {
    margin-top: 0;
    margin-bottom: 0;
    font-weight: var(--fontWeightSemiBold);
  }
}

.mobilePredictions {
  position: absolute;
  top: calc(var(--inputHeight) - var(--bottomBorder));
  left: 0;
  min-height: calc(100vh - var(--mobilePredictionTop));
}

.desktopPredictions {
  margin-top: calc(var(--topbarHeightDesktop) - var(--inputHeight) + var(--bottomBorder));
  max-width: 434px;
}
