pr-autocomplete {
  display: grid;
  position: relative;
  grid-template-rows: 2rem minmax(0, 1fr);
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas: "input" "list";
}
pr-autocomplete input, pr-autocomplete #clearButton {
  grid-area: input;
}
pr-autocomplete #clearButton {
  grid-column: 2;
}
pr-autocomplete ul {
  grid-area: list;
  position: absolute;
  z-index: 2;
  max-height: 50vh;
  background: white;
  width: 100%;
  max-width: 100%;
  overflow: auto;
  border: 1px solid var(--c-border);
  box-shadow: 0 0.125rem 0.5rem var(--c-shadow);
  background: var(--c-surface-bg);
}
pr-autocomplete li {
  cursor: default;
  padding: 0.5rem 1rem;
  line-height: 1.7rem;
  border-bottom: 0.0625rem solid var(--c-border);
}
pr-autocomplete li * {
  pointer-events: none;
}
pr-autocomplete li:hover {
  background: var(--c-hover);
  cursor: pointer;
}
pr-autocomplete a {
  text-decoration: none;
  color: var(--c-text);
}
pr-autocomplete li[aria-selected=true] {
  box-shadow: inset 0 0 0 0.1rem var(--c-focus);
}