@import (reference) "rb/css/defs.less";
@import (reference) "rb/css/ui/colors.less";
@import (reference) "rb/css/ui/drawer.less";


/*
 * Defines the color scheme of the top part of the page.
 *
 * Each page's header is designed to fit in with the general color scheme
 * of the page. Through this mixin, those colors can be set.
 *
 * The only required parameter is @topbar-bg. The other colors will be
 * generated based off these. Some pages may wish to alter the others as
 * well, if the generated colors aren't desired.
 */
.page-colors(@topbar-bg,
             @topbar-text-color: @default-text-color,
             @topbar-faded-text-color: #rb-ns-ui.colors[@grey-30],
             @topbar-link-color: @link-color,
             @topbar-border-color: greyscale(darken(@topbar-bg, 30%)),
             @topbar-menu-bg: @topbar-bg,
             @topbar-menu-selected-bg: lighten(@topbar-bg, 10%)) {
  #accountnav {
    li {
      &:hover {
        ul {
          border-color: @topbar-border-color;

          li:hover {
            background: @topbar-menu-selected-bg;
          }

          li.menu-info-box,
          li.menu-info-box:hover {
            /*
             * These are currently only used in RBCommons, but may be useful
             * for future accountnav features.
             */
            background: lighten(@topbar-menu-bg, 5%);
            border-bottom: 1px darken(@topbar-menu-bg, 5%) solid;
            padding: 1em;

            &, * {
              cursor: default;
            }
          }
        }
      }

      ul {
        background: @topbar-menu-bg;
      }
    }
  }

  #page-sidebar {
    #rb-ns-pages.base.on-shell-mobile-mode({
      background: var(--ink-p-header-bg);
      border-right-color: var(--ink-p-header-border-color);
    });
  }

  #rb-ns-ui.drawer.set-colors(@bg: @topbar-bg,
                              @border-color: @topbar-border-color,
                              @text-color: @topbar-text-color);
}
