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

.jse-navigation-bar-item {
  position: relative;
  display: flex;

  button.jse-navigation-bar-button {
    font-family: inherit;
    font-size: inherit;
    padding: $padding-half 2px;
    border: none;
    background: transparent;
    color: inherit;
    cursor: pointer;
    outline: none;
    min-width: 2em;
    white-space: nowrap;

    &:focus,
    &:hover {
      background: var(--jse-panel-button-background-highlight);
      color: var(--jse-panel-button-color-highlight);
    }

    &.jse-navigation-bar-arrow {
      padding: 2px $padding 0;

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

  &:last-child {
    padding-right: $padding;
  }
}