/**
 * Content Menu
 * This is assumed to be an unordered list-of-lists that will contain the
 * Hugo-generated menu for the given project.
 * 1. Override the default <ul> styles.
 * 2. Only add a shadow to the top of the first level of list items. We only
 *    want to visually separate the items without a parent.
 * 3. Menus are closed and invisible by default. Only show them once they've
 *    been "opened".
 *    NB. These settings are made redundant by `style="display: *` attributes
 *    set on the .content-menu HTML elements. JQuery's .slideUp() and
 *    .slideDown() functions manipulate the element's `style` attribute --
 *    rather than the calculated CSS -- and so we need to give that attribute a
 *    starting point for JQuery to transition from, and we need to rely on it
 *    being changed -- rather than the calculated CSS.
 * 4. This covers an edge case without impacting in the menu's positioning or
 *    size. When the first element of a list that is being closed is the
 *    selected item, the box-shadow from the selected item (which flows over the
 *    top of the <ul>) will be immediately hidden unless we have a large enough
 *    padding-top. This 0.3rem padding will be animated away during the
 *    `slideUp()` call, and which will give the box-shadow time to fade, rather
 *    than disappearing in a single frame.  
 *    NB. This is unecessary for the top-level menu item, and will actually
 *    shift the entire __menu-continer upward by the margin-top.
 */
.content-menu {
  display      : none;     /* 3 */
  margin       : 0;        /* 1 */
  padding-left : 0;        /* 1 */
  list-style   : none;     /* 1 */

  margin-top   : -0.3rem;  /* 4 */
  padding-top  :  0.3rem;  /* 4 */

  &.content-menu--depth-0 {
    margin-top  : 0;       /* 4 */
    padding-top : 0;       /* 4 */
  }

  &.content-menu--open {
    display : block;       /* 3 */
  }

  &.content-menu--depth-0 > li {  /* 2 */
    box-shadow : 0  -0.2rem 0.7rem -0.2rem $shadow-color-light;
  }
}



/**
 * Menu Item Insets
 * Menu items will be shifted farther and farther to the right the deeper in the
 * menu structure they live. Depending on whether we're displaying a full screen
 * menu, the insets will start smaller and scale differently.
 * If the menu item is currently selected, the inset will be slightly adjusted
 * to make the item appear offset and physically above the other items.
 * NB. For --depth-0 menus, the on-selected inset is reduced by changing the
 * margin-left of the __icon-container, and will be applied below.
 */
.content-menu__link--depth-1   { padding-left : 1.75rem;   @include wide-from('md') { padding-left : 1.125rem; } }
.content-menu__link--depth-2   { padding-left : 2.50rem;   @include wide-from('md') { padding-left : 1.625rem; } }
.content-menu__link--depth-3   { padding-left : 3.25rem;   @include wide-from('md') { padding-left : 2.125rem; } }
.content-menu__link--depth-4   { padding-left : 4.00rem;   @include wide-from('md') { padding-left : 2.625rem; } }
.content-menu__link--depth-5   { padding-left : 4.75rem;   @include wide-from('md') { padding-left : 3.125rem; } }



/**
 * Download entry
 * We want the download menu entry to be visually distinct from other entries,
 * but behave the same as the rest of the nav. To do this we give the <li>
 * (rather than the __item) a different background and :hover color without
 * changing how it interacts with the rest of the rules in this file.
 */
.content-menu__download-entry {
  background : $brand-primary-lightest;

  transition : background 500ms ease;

  @include on-event {
    background : $brand-primary-light;
  }
}



/**
 * Blank Entry
 * The last element of the Content Menu is going to be an empty, almost
 * height-less element that will act as a blank card to interact w/ the last
 * populated menu entry.
 */
.content-menu__blank-entry {
  margin-top    :  0.25rem;
  height        :  1rem;
  margin-bottom : -1rem
}



/* This padding-top value is shared among a number of elements, all of which
 * need to be pushed to the same vertical height. A similar padding-bottom
 * variable is NOT USED because setting a uniform padding-bottom across the menu
 * item text, icon container, and menu toggle breaks the menu expanding /
 * collapsing animations.
 * I do not know why....
 */
$menu-item-padding-top : 0.60rem;

/**
 * Content Menu Item
 * These can be top level items, or sub-items.
 * 1. Apply a border-right to anchor child-elements who are siblings of
 *    .content-menu__menu-toggle s.t. menu items with wrapped text get a border
 *    the full height of the title, but those borders are only applied when a
 *    menu toggle exists to visually separate.
 * 2. The color of text is going to be largely defined by setting `color` on
 *    encapsulating <div>, and allowing <a>s to `inherit` the given color. This
 *    is because of a quirk of reboot.css that I couldn't find a truly clean way
 *    of resolving.
 *    TODO: Past-Drew, next time you hit one of these quirks, write down what
 *    the quirk did and how this work around avoids it. You don't remember what
 *    the root cause was anymore, nor if this fix is still necessary. Best;
 *    Future-Drew.
 */
.content-menu__item {
  margin-left  : 0;
  margin-right : 0;

  color   : $light-font;     /* 2 */

  @include on-event {
    color : $light-font-em;  /* 2 */
  }


  a {
    padding-top    : $menu-item-padding-top;
    padding-bottom : 0.65rem;

    color           : inherit;            /* 2 */
    text-decoration : none;
  }


  > .content-menu__menu-toggle + a > .content-menu__item__right-border {
    width         : 100%;
    padding-right : 0.5rem;
    border-right  : 1px solid $gray-90;  /* 1 */
  }
}

/**
 * Currently selected Content Menu Items
 * 1. Override :hover on selected items.
 */
.content-menu__item--selected {
  background : $brand-secondary-light;
  color      : $inverted-font;

  @include on-event {
    color    : $inverted-font;  /* 1 */
  }

  box-shadow : 0  0  1rem -0.2rem $shadow-color-dark;

  > .content-menu__menu-toggle + a {
    border-right-color : $inverted-font;
  }
}

/**
 * Container for a docs-icon iconograph.
 * 1. Padding to the left of the iconograph.
 * 2. Padding between the iconograph and the '|'
 * 3. Padding the the right of the '|'
 * 4. Normalize widths of the iconographs.
 * 5. Inherit the color of the __item s.t. this element transitions on hover.
 */
.content-menu__icon-container {
  text-align : right;

  margin-left  : 1rem;    /* 1 */
  margin-right : 0.25rem; /* 3 */

  padding-top    : $menu-item-padding-top;
  padding-bottom : 0.2rem;

  color         : inherit;  /* 5 */
  transition    : color 500ms ease;

  &:before {
    display       : inline-block;
    width         : 1.25rem; /* 4 */
    padding-right : 0.5rem;  /* 2 */
  }
}

/**
 * Chevron toggle for showing the possibility of opening / closing a menu.
 * 1. Target width for sm-down screens is 3.5rem. Cut that down by 1/2 of the
 *    margins applied to .content-menu__item (0.6rem + 0.4rem), and apply a
 *    padding-left equal to the margin-right to center the chevron.
 *    Simple, right?
 * 2. Target width for md-up screens is 2.2rem. Cut that down by 1/2 of the
 *    margins applied to .content-menu__item (0.5rem + 0.2rem), and apply a
 *    padding-left equal to the margin-right to center the chevron.
 *    Still simple, yeah?
 */
.content-menu__menu-toggle {
  width        : 3.0rem;               /* 1 */
  padding-left : 0.4rem;               /* 1 */
  text-align   : center;

  padding-top    : $menu-item-padding-top;
  padding-bottom : 0.2rem;

  cursor       : pointer;

  @include wide-from('md') {
    width        : 1.85rem;            /* 2 */
    padding-left : 0.20rem;            /* 2 */
  }


  /* Rules for adding and manipulating the chevron.
   * 1. We need any `content` in the :after element for the chevron to render.
   * 2. When part of a selected item, shift the color.
   * 3. When the menu is open, point the chevron upward.
   *    NB. Because of the way this selector has to be constructed, we can't use
   *    a when-inside clause. We have to construct it by wrapping the --open
   *    modifier between the current selector (&) and the :after pseudo-element.
   * 4. When rendering at a wider width, decrease the size of the arrows.
   * NB. The primary colors in use below want to be softer than $light-font, and
   *     flash darker than light-font-em. I'm not sure there's value in giving
   *     such colors names, so we're going to stick with descriptive colors.
   */
  &:after {
    display : inline-block;
    content : "";  /* 1 */

    transition : border-color 500ms ease;


    @include downward-arrow(p2r(14px), $gray-60, $gray-15);      /* baseline */

    @include when-inside('.content-menu__item--selected') {
      @include downward-arrow(p2r(14px), $gray-95, $gray-15);    /* 2 */
    }
  }

  &.content-menu__menu-toggle--open:after {
    @include upward-arrow(p2r(14px), $gray-60, $gray-15);        /* 3 */

    @include when-inside('.content-menu__item--selected') {
      @include upward-arrow(p2r(14px), $gray-95, $gray-15);      /* 2, 3 */
    }
  }


  @include wide-from('md') {
    &:after {
      @include downward-arrow(p2r(10px), $gray-60, $gray-15);    /* 4 */

      @include when-inside('.content-menu__item--selected') {
        @include downward-arrow(p2r(10px), $gray-95, $gray-15);  /* 4, 2 */
      }
    }

    &.content-menu__menu-toggle--open:after {
      @include upward-arrow(p2r(10px), $gray-60, $gray-15);      /* 4, 3 */

      @include when-inside('.content-menu__item--selected') {
        @include upward-arrow(p2r(10px), $gray-95, $gray-15);    /* 4, 2, 3 */
      }
    }
  }
}


/**
 * Fixed-Bottom Menu Overrides
 * 1. The Content Menu in the __fixed-bottom portion of the content nav has no
 *    expandable elements, so always display the menu, and get rid of the
 *    box-shadow work-around.
 * 2. The menu-item's box shadows will not have a distinct shape, but they
 *    should be darken to make them stand out against the __fixed-bottom's
 *    darker background.
 * 3. Each __fixed-bottom content-menu__item is assumed to have a line of
 *    <sub>script text, a <br>, and then a line of <strong> text. Set the
 *    __item's padding-top to 0 to make the spacing work with the upper <sub>.
 * 4. The __fixed-bottom has a reduced font-size, so reduce the space between
 *    the icons and the left side of the menu to accommodate.
 */
.content-nav__fixed-bottom {

  .content-menu {
    display      : block;  /* 1 */
    padding-top  : 0;      /* 1 */
    margin-top   : 0;      /* 1 */

    > li {
      box-shadow : 0  -0.2rem 0.7rem -0.2rem $shadow-color-mid;  /* 2 */
    }
  }

  .content-menu__item {
    color : $inverted-font-soft;

    @include on-event {
      color : $inverted-font;
    }

    a {
      padding-top    : 0;       /* 3 */
      padding-bottom : 0.5rem;
    }
  }

  .content-menu__icon-container {
    margin-left : 0.5rem;       /* 4 */
  }
}
