@use '../../../styles';
@use '../../../themes/defaults';

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

  button.jse-navigation-bar-dropdown-item {
    font-family: defaults.$font-family-mono;
    font-size: defaults.$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: styles.$padding-half 36px;

    &:focus,
    &:hover {
      background: defaults.$navigation-bar-background-highlight;
    }

    &.jse-selected {
      background: defaults.$navigation-bar-dropdown-color;
      color: defaults.$navigation-bar-background;
    }
  }
}