.graphiql-dropdown-content {
  background-color: hsl(var(--color-base));
  border: var(--popover-border);
  border-radius: var(--border-radius-8);
  box-shadow: var(--popover-box-shadow);
  font-size: inherit;
  max-width: 250px;
  padding: var(--px-4);
  font-family: var(--font-family);
  color: hsl(var(--color-neutral));
  max-height: min(
    calc(var(--radix-dropdown-menu-content-available-height) - 10px),
    400px
  );
  overflow-y: scroll;
}

.graphiql-dropdown-item {
  border-radius: var(--border-radius-4);
  font-size: inherit;
  margin: var(--px-4);
  overflow: hidden;
  padding: var(--px-6) var(--px-8);
  text-overflow: ellipsis;
  white-space: nowrap;
  outline: none;
  cursor: pointer;
  line-height: var(--line-height);

  &[data-selected],
  &[data-current-nav],
  &:hover {
    background-color: hsla(var(--color-neutral), var(--alpha-background-light));
    color: inherit;
  }

  &:not(:first-child) {
    margin-top: 0;
  }
}