@import '../../../styles';

.jse-navigation-bar-dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 3; // above the floating ContextMenuButton
  background: var(--jse-navigation-bar-background);
  color: var(--jse-navigation-bar-dropdown-color);
  box-shadow: var(--jse-controls-box-shadow);
  display: flex;
  flex-direction: column;
  max-height: 300px;
  overflow: auto;
  min-width: 80px;

  button.jse-navigation-bar-dropdown-item {
    font-family: var(--jse-font-family-mono);
    font-size: var(--jse-font-size-mono);
    border: none;
    background: transparent;
    color: inherit;
    cursor: pointer;
    outline: none;
    text-align: left;
    white-space: nowrap;
    box-sizing: border-box;
    // FIXME: must align exactly with the text in the navigation bar, how to ensure that?
    padding: $padding-half 36px;

    &:focus,
    &:hover {
      background: var(--jse-navigation-bar-background-highlight);
    }

    &.jse-selected {
      background: var(--jse-navigation-bar-dropdown-color);
      color: var(--jse-navigation-bar-background);
    }
  }
}