@import (reference) '../../../Style/App.less';

.PageHeader {
  // remove the bottom margin on the navbar
  .navbar {
    margin-bottom: 0;

    & .dropdown-menu {
      max-height: 480px;
      overflow-y: auto;
    }

    & .btn.navbar-brand,
    & .dropdown-toggle {
      &:hover,
      &.active {
        background-color: #ddd;
      }

      &:focus {
        outline: 0;
      }
    }
  }

  .navbar-brand {
    font-weight: bold;
  }

  // ensure icons have an appropriate margin against the associated text
  .dropdown-menu li > a > .fa,
  .PageHeader-actionButton > .PageHeader-actionHeaderIcon {
    margin-right: 8px;
  }

  // give action buttons 10px of margin between one another
  .PageHeader-routedActions {
    .PageHeader-actionButton {
      margin-left: 10px;
    }
  }

  // this prevents icons or images from over-extending this block's height
  .PageHeader-appSwitcherMenu,
  .PageHeader-helpMenu,
  .PageHeader-adminMenu,
  .PageHeader-userMenu {
    .dropdown-toggle {
      line-height: 0;
    }
  }

  // fix navbar centering of the icons
  .PageHeader-appSwitcherMenu,
  .PageHeader-helpMenu,
  .PageHeader-adminMenu {
    .dropdown-toggle {
      // this padding fixes the vertical centering of the cog icon
      padding: 11px 13px;
    }
  }

  // fix navbar centering of the profile image or default user icon
  .PageHeader-userMenu {
    .dropdown-toggle {
      &:hover {
        .ProfilePicture {
          background-color: darken(@navbar-default-link-active-bg, 12%);
        }
      }

      // this padding fixes the vertical padding of the profile image
      padding: 10px;

      .ProfilePicture {
        // these ensure the background makes a circular frame
        background-color: @navbar-default-link-active-bg;
        border-radius: 50%;

        // don't display any content outside fo our border radius
        // set the dimensions so that our parent's padding makes sense
        height: 30px;
        overflow: hidden;
        width: 30px;

        // this ensures our icon or image is square
        & > img,
        .fa {
          height: 100%;
          width: 100%;
        }
      }
    }
  }
}

.Sidebar {
  .PageHeader-sidebarSection {
    font-weight: bold;
  }

  .nav {
    // margin navs between one another
    margin: 0 0 20px;
    width: 320px;

    & > li > a > .fa {
      margin-right: 8px;
    }
  }
}