@import (reference) "lib/css/fontawesome.less";

@import (reference) "rb/css/defs.less";
@import (reference) "rb/css/pages/base.less";
@import (reference) "rb/css/ui/content-header.less";


#rb-ns-ui() {
  .sidebars() {
    @_boxes-vars: #rb-ns-ui.boxes();
    @_colors-vars: #rb-ns-ui.colors();

    @padding: 1em;

    /* NOTE: These are added to @icon-max-size, and should remain pixels. */
    @padding-horiz: 10px;
    @padding-vert: 5px;

    @section-margin: 1em;

    @active-bg: @_colors-vars[@white];
    @active-border-color: @_boxes-vars[@border-color];
    @active-border-radius: 15px;
    @active-shadow: @_boxes-vars[@shadow];
    @active-shadow-extent-y: @_boxes-vars[@shadow-radius] +
                             @_boxes-vars[@shadow-offset-y];

    @hover-bg: lighten(@active-bg, 30%);
    @hover-border-color: lighten(@active-border-color, 30%);

    @connected-border-color: @_boxes-vars[@border-color];

    @value-color: @_colors-vars[@blue-20];
    @value-dimmed-color: @_colors-vars[@grey-60];
    @value-padding-horiz: 8px;
    @value-padding-vert: 0px;

    /* NOTE: These are added to the padding, and should remain pixels. */
    @icon-max-size: 20px;

    .mobile() {
      @animation: 0.3s transform ease-out;
      @slideout-pct: 120%;
    }

    /**
     * Set a special display style for the sidebar.
     *
     * This can be used to alter the display of a sidebar, providing
     * additional visual cues.
     *
     * This currently supports a style of ``connected-right``, which will
     * remove the border radius and border from the right-hand side of
     * active/hovered items, helping to make the sidebar appear connected
     * to a box on the right.
     *
     * Args:
     *     @style (string):
     *         The display style. Currently supports ``connected-right``.
     */
    .set-display-style(@style) {
      @_sidebars-vars: #rb-ns-ui.sidebars();

      & when (@style = connected-right) {
        .rb-c-sidebar__nav-item,
        .rb-c-sidebar__nav-section-header {
          &:hover,
          &[aria-current="page"],
          &.-is-active {
            border-top-right-radius: 0;
            border-bottom-right-radius: 0;
          }

          &:hover,
          &[aria-current="page"],
          &.-is-active {
            /* Ensure the sidebar can overlay the border. */
            border-right: var(--ink-u-border-thin) transparent solid;
          }
        }
      }
    }
  }
}


/**
 * Defines a sidebar on the page.
 *
 * Sidebars allow for navigation between pages or within a page. They're
 * composed of items organized by sections. Each item can display a label,
 * along with an optional icon and value.
 *
 * Pages displaying a sidebar should set the ``-has-sidebar`` class on
 * ``<body>``.
 *
 * Accessibility Notes:
 *     Consumers of this component should generally use either ``<nav>`` or
 *     ``<section>``, in order to define a suitable landmark for the sidebar
 *     content.
 *
 *     Using ``<nav>`` will communicate to screen readers that there are
 *     navigation items available in the sidebar. Using ``<section>`` instead
 *     will communicate a general landmark.
 *
 *     Sidebars should always use an ``aria-label`` to distinguish between
 *     them.
 *
 * DOM Attributes:
 *     aria-label (string):
 *         A label describing this sidebar. This may simply be "Sidebar", but
 *         if the page makes use of multiple sidebars (such as a slide-out
 *         sidebar), there should be distinct labels.
 *
 * Modifiers:
 *     -has-icons:
 *         Items may have icons. This provides sufficient spacing for icons
 *         on the left of all items in the sidebar.
 *
 * Structure:
 *     <nav class="rb-c-sidebar" aria-label="...">
 *      <ul class="rb-c-sidebar__items">
 *       <li class="rb-c-sidebar__section">
 *        ...
 *       </li>
 *       ...
 *      </ul>
 *     </nav>
 *
 *     <section class="rb-c-sidebar" aria-label="...">...</section>
 */
.rb-c-sidebar {
  box-sizing: border-box;
  padding: 0;
  margin: 0;

  a,
  a:link,
  a:visited {
    color: inherit;
    display: block;
    text-decoration: none;
  }
}


/**
 * A list of items/sections in a sidebar's top level or in a section.
 *
 * These should contain a list of ``<li class="rb-c-sidebar__item">`` or
 * ``<li class="rb-c-sidebar__section">`` elements.
 *
 * Two of these can be placed adjacent to each other to create a visual
 * separation within a section.
 *
 * Structure:
 *     <ul class="rb-c-sidebar__items">
 *      {
 *       <li class="rb-c-sidebar__item">...</li>
 *       <li class="rb-c-sidebar__section">...</li>
 *      } [0+]
 *     </ul>
 */
.rb-c-sidebar__items {
  list-style: none;
  margin: 0;

  /*
   * Prevent the shadow from going off the right-hand side (so the overlap
   * onto the content is correct), but ensure it doesn't disappear below the
   * last item in the section.
   */
  padding: 0 0 #rb-ns-ui.sidebars[@active-shadow-extent-y] 0;
  overflow-x: hidden;

  & + & {
    /* New subsection */
    margin-bottom: #rb-ns-ui.sidebars[@section-margin];
  }
}


/**
 * An item in a sidebar.
 *
 * These must contain a ``.rb-c-sidebar__item-label`` child, and may also
 * contain an icon (``.rb-c-sidebar__icon``) and/or value
 * (``.rb-c-sidebar__item-value``).
 *
 * For navigating to a page, the more specific ``.rb-c-sidebar__nav-item``
 * may be used.
 *
 * Structure:
 *     <li class="rb-c-sidebar__item">
 *      <div class="rb-c-sidebar__icon rb-icon rb-icon-edit"></div>
 *      <span class="rb-c-sidebar__item-label">Label</a>
 *      <span class="rb-c-sidebar__item-value">42</span>
 *     </li>
 */
.rb-c-sidebar__item {
  @_sidebars-vars: #rb-ns-ui.sidebars();
  @_padding-vert: @_sidebars-vars[@padding-vert];
  @_padding-horiz: @_sidebars-vars[@padding-horiz];
  @_icon-max-size: @_sidebars-vars[@icon-max-size];

  display: block;
  line-height: @_sidebars-vars[@icon-max-size];
  list-style: none;
  margin: 0;
  position: relative;
  text-align: left;
  word-break: break-all;

  /* Match the border on the active row, to prevent content jumps. */
  border: 1px transparent solid;
}


/**
 * A navigation item in a sidebar.
 *
 * These must contain a ``.rb-c-sidebar__item-label`` child, and may also
 * contain an icon (``.rb-c-sidebar__icon``) and/or value
 * (``.rb-c-sidebar__item-value``).
 *
 * Labels should use an ``<a href="...">`` tag.
 *
 * Modifiers:
 *     -is-active:
 *         This item represents the current page view.
 *
 * Structure:
 *     <li class="rb-c-sidebar__nav-item">
 *      <div class="rb-icon rb-icon-edit"></div>
 *      <a class="rb-c-sidebar__item-label" href="/page/">Label</a>
 *      <span class="rb-c-sidebar__item-value">42</span>
 *     </li>
 */
.rb-c-sidebar__nav-item {
  &:extend(.rb-c-sidebar__item all);
}


/**
 * An icon for an item in the sidebar.
 *
 * This can be an ``<img>``, ``.rb-icon``, or any other class. The size
 * should be 20x20 pixels or smaller.
 *
 * If used, the parent ``.rb-c-sidebar`` or ``.rb-c-sidebar__section`` must
 * use the ``.-has-icons`` modifier.
 *
 * Structure:
 *     <span class="rb-c-sidebar__icon rb-icon rb-icon-edit"></span>
 */
.rb-c-sidebar__icon {
  position: absolute;
  display: inline-block;
  vertical-align: middle;
  left: #rb-ns-ui.sidebars[@padding-horiz];
  pointer-events: none;

  /* This trick will properly center-align our icon. */
  top: 50%;
  transform: translateY(-50%);

  a& {
    pointer-events: all;
  }
}


/**
 * A label for an item in the sidebar.
 *
 * If this is a navigation item, this should be a ``<a href="...">``.
 *
 * Structure:
 *     <a class="rb-c-sidebar__item-label" href="/page/">Label</a>
 */
.rb-c-sidebar__item-label {
  @_sidebars-vars: #rb-ns-ui.sidebars();

  display: block;
  padding: @_sidebars-vars[@padding-vert] @_sidebars-vars[@padding-horiz];
}


/**
 * The value shown in a sidebar item.
 *
 * This can be used to show a short value, such as a number of a boolean,
 * indicating the item's state.
 *
 * If the value is an empty/disabled sort of value (like 0 or false), then
 * this can use the ``.-is-dimmed`` class to dim the appearance.
 *
 * Modifiers:
 *     -is-dimmed:
 *         Dims the display of the value.
 *
 * Structure:
 *     <span class="rb-c-sidebar__item-value">42</span>
 *
 *     <span class="rb-c-sidebar__item-value -is-dimmed">0</span>
 */
.rb-c-sidebar__item-value {
  @_sidebars-vars: #rb-ns-ui.sidebars();

  color: var(--ink-p-blue-800);
  position: absolute;
  right: 2 * @_sidebars-vars[@padding-horiz];
  font-size: 95%;
  padding: @_sidebars-vars[@value-padding-vert]
           0
           @_sidebars-vars[@value-padding-vert]
           @_sidebars-vars[@value-padding-horiz];
  margin-top: -@_sidebars-vars[@value-padding-vert];

  /* Make sure we can click through the value. */
  pointer-events: none;

  /* Vertically-align the value. */
  top: 50%;
  transform: translateY(-50%);

  &.-is-dimmed {
    color: @_sidebars-vars[@value-dimmed-color];
  }
}


/**
 * A section in a sidebar.
 *
 * Sections must have a section header (``.rb-c-sidebar__section-header``)
 * and should have a list of items (``.rb-c-sidebar__items``).
 *
 * Modifiers:
 *     -has-icons:
 *         Items may have icons. This provides sufficient spacing for icons
 *         on the left of all items in the section.
 *
 *     -is-desktop-only:
 *         The section will only be displayed if the page shell is in desktop
 *         mode.
 *
 *     -is-mobile-only:
 *         The section will only be displayed if the page shell is in mobile
 *         mode.
 *
 * Structure:
 *     <li class="rb-c-sidebar__section">
 *      <header class="rb-c-sidebar__section-header">Header</header>
 *      <ul class="rb-c-sidebar__items">
 *       ...
 *      </ul>
 *     </li>
 */
.rb-c-sidebar__section {
  @_sidebars-vars: #rb-ns-ui.sidebars();

  list-style: none;
  margin: 0 0 @_sidebars-vars[@section-margin] 0;

  &.-is-mobile-only {
    #rb-ns-pages.base.on-shell-mobile-mode({
      display: list-item;
    }, @else: {
      display: none;
    });
  }

  &.-is-desktop-only {
    #rb-ns-pages.base.on-shell-mobile-mode({
      display: none;
    }, @else: {
      display: list-item;
    });
  }

  /* Styling for subsections. */
  & .rb-c-sidebar__section {
    @_sidebars-vars: #rb-ns-ui.sidebars();

    .rb-c-sidebar__items {
      padding-left: @_sidebars-vars[@icon-max-size];
    }

    .rb-c-sidebar__section-header {
      font-size: 100%;
      text-transform: none;
    }
  }
}

/**
 * The header for a section.
 *
 * Modifiers:
 *     -is-active:
 *         This section header represents the current page view. This is
 *         used for section headers that double as navigation elements.
 *
 * Structure:
 *     <header class="rb-c-sidebar__section-header">Header</header>
 */
.rb-c-sidebar__section-header {
  @_sidebars-vars: #rb-ns-ui.sidebars();

  &:extend(.rb-c-sidebar__item);
  #rb-ns-ui.content-header.add-title-styles();

  padding-left: @_sidebars-vars[@padding-horiz];
}


/**
 * A section header that works as a navigation item.
 *
 * This allows a header to have the same visuals that a nav item would have,
 * and to shoe as active when it matches the current page.
 *
 * Structure:
 *     <header class="rb-c-sidebar__nav-section-header">
 *      <a href="/page/">Label</a>
 *     </header>
 */
.rb-c-sidebar__nav-section-header {
  @_sidebars-vars: #rb-ns-ui.sidebars();
  @_padding-vert: @_sidebars-vars[@padding-vert];
  @_padding-horiz: @_sidebars-vars[@padding-horiz];

  &:extend(.rb-c-sidebar__section-header);

  display: block;
  padding: @_padding-vert @_padding-horiz @_padding-vert @_padding-horiz;

  &:after {
    &:extend(.rb-c-sidebar__item-value);
    .fa-icon();

    color: inherit;
    content: @fa-var-caret-right;
  }
}


/* Modifier options common to the sidebar and sections. */
.rb-c-sidebar,
.rb-c-sidebar__section {
  &.-has-icons {
    .rb-c-sidebar__item-label {
      @_sidebars-vars: #rb-ns-ui.sidebars();

      padding-left: @_sidebars-vars[@padding-horiz] +
                    @_sidebars-vars[@icon-max-size];
    }
  }
}


/* Navigation visuals for nav items and section headers. */
.rb-c-sidebar__nav-item,
.rb-c-sidebar__nav-section-header {
  @_sidebars-vars: #rb-ns-ui.sidebars();

  cursor: pointer;

  &:hover,
  &[aria-current="page"],
  &.-is-active {
    @_border-radius: @_sidebars-vars[@active-border-radius];

    background: var(--ink-c-data-table-body-bg);
    border: var(--ink-c-data-table-border);
    border-radius: @_border-radius;
    box-shadow: @_sidebars-vars[@active-shadow];
    color: var(--ink-p-fg);
  }

  &[aria-current="page"],
  &.-is-active {
    z-index: @z-index-deco;
  }
}


/****************************************************************************
 * Deprecated styles
 ****************************************************************************/
body.has-sidebar {
  &:extend(body.-has-sidebar all);
}

body.mobile-show-page-sidebar {
  &:extend(body.js-mobile-show-page-sidebar all);
}

#page_sidebar {
  &:extend(.rb-c-sidebar all);

  /*
   * We're using the same basic positioning and styling that we used in 3.0
   * for the legacy page_sidebar, to ensure presentation is correct for any
   * extensions that are setting up their own sidebars. They'll likely base
   * other layout requirements on these values. We don't want to use the
   * modern ones we're defining for a page sidebar, for this reason.
   */
  direction: rtl;  /* Position the scrollbar on the left. */
  position: absolute;
  top: 0;
  bottom: 1px;
  margin: 3em -1px 0 1px;
  padding: 1em 0;
  .scrollable-y();

  .page-sidebar-items {
    &:extend(.rb-c-sidebar__items);
  }

  .page-sidebar-items li {
    &:extend(.rb-c-sidebar__item);

    border: 0;

    &.active,
    &.active.has-url:hover {
      .page-sidebar-row {
        &:extend(.rb-c-sidebar__nav-item.-is-active all);
      }
    }

    &.has-count .label {
      &:extend(.rb-c-sidebar__item.-has-value .rb-c-sidebar__item-label);
    }

    &.has-url {
      &:extend(.rb-c-sidebar__nav-item);

      border: 0;

      &:hover .page-sidebar-row {
        &:extend(.rb-c-sidebar__nav-item:hover all);
      }
    }

    &.new-subsection {
      margin-top: 10px;
    }

    &.section {
      &:extend(.rb-c-sidebar__section);

      & > .page-sidebar-row .label {
        &:extend(.rb-c-sidebar__section-header);
        margin: 0;
      }
    }

    ul {
      &:extend(.rb-c-sidebar__items);

      li {
        .label {
          &:extend(.rb-c-sidebar__section .rb-c-sidebar__item-label);
        }

        .rb-icon {
          &:extend(.rb-c-sidebar__item .rb-icon);
        }
      }
    }

    a {
      &:extend(.rb-c-sidebar__item-label);
    }

    .count {
      &:extend(.rb-c-sidebar__item-value);

      &.count-zero {
        &:extend(.rb-c-sidebar__item-value.-is-dimmed);
      }
    }

    .label {
      border: 0;
    }

    .page-sidebar-row {
      border: 1px transparent solid;
      position: relative;

      &.overview-section-row {
        line-height: normal;
        vertical-align: middle;

        a {
          padding-left: #rb-ns-ui.sidebars[@padding-horiz];
        }

        .label {
          padding-left: 0;
        }
      }
    }

    .rb-icon {
      &:extend(.rb-c-sidebar__icon all);
    }

    .overview-count {
      font-size: 135%;
      padding-right: 0;
    }
  }
}
