.datalist-arrow-options {
  position: fixed;
  z-index: 2147483647;
  box-sizing: border-box;
  max-height: min(240px, 50vh);
  overflow-y: auto;
  background: var(--surface, #fff);
  color: var(--text, #17322d);
  border: 1px solid var(--line, #c9dcd5);
  border-radius: 7px;
  box-shadow: 0 8px 24px rgb(0 0 0 / 12%);
}

.datalist-arrow-option {
  box-sizing: border-box;
  min-height: 34px;
  padding: 7px 11px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  cursor: pointer;
  font-size: inherit;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.datalist-arrow-option small {
  color: var(--muted, #607570);
  font-size: 12px;
}

.datalist-arrow-option:hover,
.datalist-arrow-option.is-active,
.datalist-arrow-option[aria-selected="true"] {
  background: color-mix(in srgb, var(--green, #155c49) 9%, white);
  color: var(--green, #155c49);
}