// Dropdown menus -- Used in module context menus and WF context menus
.dropdown-menu-portal {
  z-index: $zindex-popover; // above <WorkflowNavBar> and <ShareModal>

  .dropdown-menu {
    position: static; // override Bootstrap's position: absolute
    display: block; // always -- if it weren't visible, it wouldn't be in the React tree
    min-width: 12rem; // or wider, if the content is wider
    border: 2px solid $brand-orange;
    border-radius: 5px;
    box-shadow: $overlay-shadow;
    padding: 0.5rem 0;
    background: white;

    .dropdown-item {
      // <a> or <button>
      display: block;
      appearance: none;
      -webkit-appearance: none;
      @include content-1;
      color: $brand-text--darker;
      line-height: 3rem;
      vertical-align: middle;
      border-radius: 0;
      border: 0;
      outline: 0; // <a:focus> shouldn't have a blue outline
      cursor: pointer;

      background-color: white;

      &:disabled {
        // will never have :hover, :focus or :active
        color: $text-muted;
      }
      &:hover,
      &:focus {
        background-color: $dark-accent--soft;
      }
      &:active {
        background-color: $dark-accent--medium;
      }
      &.active {
        background-color: $brand-workspace--medium;
      }
    }

    .dropdown-divider {
      opacity: 0.5;
    }

    i {
      display: inline-block;
      margin-right: 0.75rem;
      text-align: center;
      width: 1.8rem; // BUG in Workbench.woff: "icon-duplicate" has width>1em -- see https://www.pivotaltracker.com/story/show/164803718
      margin-left: -0.25rem; // to counteract BUG in Workbench.woff -- see https://www.pivotaltracker.com/story/show/164803718
      font-size: 1.3rem;
    }
  }
}
