/********************************************************* {COPYRIGHT-TOP} ***
* Licensed Materials - Property of IBM
* 5725-Z22, 5725-Z63, 5725-U33, 5725-Z63
*
* (C) Copyright IBM Corporation 2017
*
* All Rights Reserved.
* US Government Users Restricted Rights - Use, duplication or disclosure
* restricted by GSA ADP Schedule Contract with IBM Corp.
********************************************************** {COPYRIGHT-END} **/
.apim
  .pill
    background-color: $apim-pill-bg-color
    border-radius: 5rem
    color: $apim-pill-color
    font-size: .8rem
    margin-right: .5rem
    padding: .2rem .5rem

  a:hover .pill
    background-color: $apim-pill-hover-bg-color
    color: $apim-pill-hover-color

  .dropdown-menu li[role=menuitem] a:hover
    background-color: $apim-dropdown-menuitem-bg-color

  // add scrollbar to first level of files
  .filepicker
    .tree-container
      display: flex

    .primary-tree
    .secondary-tree
      flex: 1 0 0
      width: 100%

      > .node-tree > ul
        border: 1px solid $apim-filepicker-files-border
        height: 100%
        max-height: 60vh
        overflow: auto
        padding: 1rem 0

    footer
      display: block
      margin-top: 1rem
      text-align: right

    &.add-existing
      .primary-tree
        margin-right: 1rem
        width: 50%

      .secondary-tree
        width: 50%

        .node-item a
          display: flex
          justify-content: space-between
          padding-left: 1rem

          em
          span
            font-style: normal

          em
            color: $apim-filepicker-project-label-color

  .node-tree
    .node-item
      white-space: nowrap

      &.selected
        background: $apim-filepicker-selected-bg-color

        .node-tree
          background: $apim-filepicker-bg-color

      a
        color: inherit
        display: inline-block
        padding: .5rem 1rem .5rem 0

        &.arrow-link
          padding: .5rem 0 .5rem 1rem

        &:hover
          text-decoration: none

        i
          color: $apim-filepicker-files-icon-color
          font-size: 1.4rem
          vertical-align: middle

        .pill
          background-color: $apim-pill-bg-color

      &.loopback-app .arrow-link
        visibility: hidden

    .node-tree
      display: none

      &.isOpen
        display: block

  .navigationMenu
    li
      .navHeader
        .material-icons
          font-size: 16px
          margin-left: 6px
          margin-right: 6px
          vertical-align: text-bottom

  .mainBanner nav.subBanner md-icon
    fill: #44489
    height: 15px
    margin-right: 5px
    min-height: 15px
    min-width: 15px
    width: 15px

  &.bluemix
    md-sidenav
      width: 400px

md-sidenav
  .navItem a
    display: inline-block
    padding: 8px 5px 8px 25px
    width: 100%

  .navHeader
    .navItem
      a:hover
        text-decoration: none

  .mainBanner
    .navigationMenu
      .navHeader h5:hover
      .navItem:hover a
        background-color: rgba(0, 0, 0, .05)

    md-sidenav
      ul ul // @stylint ignore colons
        padding: 0

      &.md-locked-open
        padding-bottom: 3rem
        position: fixed