:host {
  display: block;
  font-family: var(--smoothly-font-family);
}

:host > div:nth-child(1) {
  position: absolute;
  display: grid;
  grid-template-columns: auto auto;
  grid-template-rows: auto auto;
  padding: 1em 0.2em 0.2em 0.2em;
  white-space: nowrap;
}
:host > div:nth-child(1) > div:nth-child(1) {
  color: transparent;
  pointer-events: none;
  user-select: none;
  /* Needs to have same font as smoothly-input */
  font-size: 1rem;
  font-family: var(--smoothly-font-family);
}
:host > div:nth-child(1) smoothly-menu-options {
  grid-column-start: 2;
  grid-row-start: 2;
  z-index: 99;
}

:host(:not(:focus-within)) smoothly-menu-options {
  display: none;
}

:host(:not([has-suggestion])) smoothly-menu-options,
:host(:not([show-suggestion])) smoothly-menu-options {
  display: none;
}

:host smoothly-input input {
  /* temporary fix: smoothly does not get colored by global values since it is within a shadowDOM element */
  color: rgb(var(--smoothly-default-contrast));
}