@import url('@reach/listbox/styles.css');
@import url('@reach/menu-button/styles.css');

[data-reach-listbox-popover],
[data-reach-menu-list] {
  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);
}

[data-reach-listbox-option],
[data-reach-menu-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;

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

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

[data-reach-listbox-button] {
  border: none;
  cursor: pointer;
  padding: 0;
}