autocomplete.css

* { box-sizing: border-box }

:host {
  all: initial; /* reset styles within Shadow DOM, no inheritance */

  --gray-100: #F3F4F6;
  --gray-300: #D1D5DB;
  --gray-500: #6B7280;
  --gray-900: #111827;
  --blue-600: #3182CE;

  --border-radius: 5px;

  --font-family:
    ui-sans-serif,
    system-ui,
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    Roboto,
    "Helvetica Neue",
    Arial,
    "Noto Sans",
    sans-serif;

  --input-color: var(--gray-900);
  --input-bg: #fff;
  --input-border: 1px solid var(--gray-300);
  --input-height: 47px;
  --input-shadow:
    rgba(0, 0, 0, 0) 0px 0px 0px 0px,
    rgba(0, 0, 0, 0) 0px 0px 0px 0px,
    rgba(0, 0, 0, 0.05) 0px 1px 2px 0px;

  --search-icon-color: var(--gray-500);
  --search-icon-size: 20px;

  --loading-color: var(--gray-500);
  --loading-size:  31px;

  --results-spacing: 10px;
  --results-bg: #fff;
  --results-z-index: 10;
  --results-shadow:
    rgb(255, 255, 255) 0px 0px 0px 0px,
    rgba(0, 0, 0, 0.05) 0px 0px 0px 1px,
    rgba(0, 0, 0, 0.1) 0px 10px 15px -3px,
    rgba(0, 0, 0, 0.05) 0px 4px 6px -2px;

  --result-item-color: var(--gray-900);
  --result-item-border: 1px solid var(--gray-100);
  --result-item-active-color: var(--gray-900);
  --result-item-active-bg: var(--gray-100);
  --result-item-icon-color: var(--gray-500);

  --attribution-color: var(--gray-500);
  --attribution-color-hover: var(--blue-600);

  display: block;
}

.autocomplete {
  position: relative;
  font-size: 16px;
  font-family: var(--font-family);
}

.label {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}

.input {
  font-size: 16px;
  font-family: var(--font-family);
  color: var(--input-color);
  background: var(--input-bg);
  height: var(--input-height);
  display: block;
  width: 100%;
  border: var(--input-border);
  padding:
    13px
    calc(12px + var(--loading-size) + 12px)
    13px
    calc(12px + var(--search-icon-size) + 9px);
  border-radius: var(--border-radius);
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  outline: none;
  box-shadow: var(--input-shadow);
}

.loading {
  position: absolute;
  right: 12px;
  top: calc((var(--input-height) - var(--loading-size)) / 2);
  width: var(--loading-size);
  height: var(--loading-size);
  stroke: var(--loading-color);
}

.search-icon {
  position: absolute;
  color: var(--search-icon-color);
  left: 12px;
  top: calc((var(--input-height) - var(--search-icon-size)) / 2);
  width: var(--search-icon-size);
  height: var(--search-icon-size);
}

.results {
  font-size: 16px;
  position: absolute;
  top: calc(var(--input-height) + var(--results-spacing));
  left: 0;
  margin: 0;
  padding: 0 0 35px 0; /* padding bottom equal to attribution height */
  width: 100%;
  list-style: none;
  border-radius: var(--border-radius);
  background: var(--results-bg);
  overflow: hidden;
  box-shadow: var(--results-shadow);
  z-index: var(--results-z-index);
}

.results-empty {
  display: none;
}

.result-item {
  display: flex;
  align-items: center;
  padding: 13px 12px;
  cursor: default;
  color: var(--result-item-color);
  border-bottom: var(--result-item-border);
}

.result-item-icon {
  color: var(--result-item-icon-color);
  margin-right: 10px;
  width: 20px;
  height: 20px;
  flex: none;
}

.result-item-active {
  color: var(--result-item-active-color);
  background-color: var(--result-item-active-bg);
}

.attribution {
  position: absolute;
  bottom: 0;
  width: 100%;
  padding: 0 12px;
  height: 35px;
  color: var(--attribution-color);
  line-height: 35px;
  font-size: 12px;
  text-align: right;
}

.attribution a {
  color: var(--attribution-color);
  text-decoration: underline;
}

.attribution a:hover {
  color: var(--attribution-color-hover);
}