/*
 * Build: 7E4D1F7C
 *
 * Navigation sidebar: narrower than the MicroEJ theme default (300 px instead of 395 px), and a
 * control to hide and show it, so that wide content such as diagrams gets the room. The control is
 * a "Collapse" button docked at the bottom of the menu; once the menu is hidden it becomes its icon
 * alone at the bottom left of the window, naming itself "Expand" on hover and on keyboard focus.
 * The tooltip is the button's own aria-label, so the word is written once, in js/sidebar.js.
 * The menu itself must be as wide as the sidebar: the theme script scrolls the current entry into
 * view, and a wider menu would scroll sideways and hide its left part.
 * The docked bar sits above the Read the Docs version flyout. That flyout only exists on the
 * published site, where js/versions.js injects it next to .wy-grid-for-nav once the Read the Docs
 * data arrives: the rule below reserves the height of its always-visible strip as soon as the
 * element is there, and js/sidebar.js then measures the real height into --mej-flyout-height.
 * Without a flyout the height stays 0 and the bar sits at the bottom of the window.
 * The hidden state is kept in the browser (localStorage) and applied by the inline script of
 * layout.html before the page paints; js/sidebar.js adds the controls and toggles the state.
 * On phones (under 767 px) the theme has its own menu button and this file does nothing.
 */

/* Height reserved for the version flyout of the published site, refined by js/sidebar.js. */
:root:has(body > .rst-versions) {
  --mej-flyout-height: 44px;
}

@media screen and (min-width: 767px) {
  body .wy-nav-side {
    width: 300px;
    transition: transform 0.2s ease, visibility 0.2s;
  }
  body .wy-side-scroll {
    width: 320px;
    /* Room for the docked bar and the version flyout, so the last entry can be scrolled into view. */
    padding-bottom: calc(var(--mej-flyout-height, 0px) + 56px);
    box-sizing: border-box;
  }
  body .wy-menu-vertical {
    width: 300px;
    padding-bottom: 0;
  }
  body .wy-menu-vertical a,
  body .wy-menu-vertical li.current a,
  body .wy-menu-vertical span.toctree-expand {
    margin-left: 32px;
  }
  body .wy-side-nav-search {
    margin-left: 32px;
    width: 236px;
  }
  body .wy-nav-content-wrap {
    margin-left: 300px;
    transition: margin-left 0.2s ease;
  }
  body > .rst-versions {
    width: 300px;
  }

  /* Bar docked at the bottom of the sidebar, above the version flyout. */
  .mej-sidebar-footer {
    position: fixed;
    left: 0;
    bottom: var(--mej-flyout-height, 0px);
    z-index: 401;
    width: 300px;
    box-sizing: border-box;
    padding: 6px 0;
    border-top: 1px solid #e5e9eb;
    background: #ffffff;
  }
  /* The docked button is one more entry of the menu: same indent, metrics, color and hover band as
     .wy-menu-vertical a, so it reads as part of the list rather than as a control dropped under it. */
  .mej-sidebar-footer button {
    display: block;
    width: 268px;
    box-sizing: border-box;
    margin: 0 0 0 32px;
    padding: 0.4045em 1.618em;
    border: none;
    border-radius: 0;
    background: transparent;
    color: #717d83;
    font: inherit;
    font-size: 90%;
    line-height: 18px;
    text-align: left;
    cursor: pointer;
  }
  /* The icon hangs in the column of the menu's own expanders, which float out of the text column by
     1.2em (.wy-menu-vertical li button.toctree-expand), so both columns line up down the sidebar. */
  .mej-sidebar-footer button .fa {
    display: block;
    float: left;
    margin-left: -1.2em;
    padding: 0;
    line-height: 18px;
    color: #4d4d4d;
  }
  .mej-sidebar-footer button:hover,
  .mej-sidebar-footer button:focus-visible {
    font-weight: bold;
    color: #4b5357;
    background-color: #d6d6d6;
    outline: none;
  }
  .mej-sidebar-footer button:focus-visible {
    box-shadow: inset 0 0 0 2px rgba(238, 80, 46, 0.45);
  }
  .mej-sidebar-footer button:active {
    background-color: #ffffff;
  }
  #mej-sidebar-show .fa {
    color: #717d83;
  }

  /* Collapsed, the control stands alone over the page, with no menu to belong to, so it keeps a
     button of its own: the icon at the bottom left of the window. */
  #mej-sidebar-show {
    position: fixed;
    z-index: 401;
    left: 16px;
    bottom: 24px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    margin: 0;
    padding: 0;
    border: 1px solid #d5dcdf;
    border-radius: 6px;
    background: #ffffff;
    font: 600 15px/1 "Source Sans Pro", Helvetica, Arial, sans-serif;
    cursor: pointer;
    box-shadow: 0 1px 4px rgba(38, 42, 44, 0.12);
    transition: border-color 0.15s ease;
  }
  #mej-sidebar-show:hover,
  #mej-sidebar-show:focus-visible {
    border-color: #ee502e;
    outline: none;
  }
  #mej-sidebar-show:hover .fa,
  #mej-sidebar-show:focus-visible .fa {
    color: #ee502e;
  }
  #mej-sidebar-show:focus-visible {
    box-shadow: 0 0 0 3px rgba(238, 80, 46, 0.35), 0 1px 4px rgba(38, 42, 44, 0.12);
  }
  /* The label the icon dropped, shown on hover and on keyboard focus. */
  #mej-sidebar-show::after {
    content: attr(aria-label);
    position: absolute;
    left: calc(100% + 8px);
    top: 50%;
    transform: translateY(-50%) translateX(-4px);
    padding: 7px 11px;
    border-radius: 6px;
    background: #2b3137;
    color: #ffffff;
    font-size: 13px;
    line-height: 1;
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.12s ease, transform 0.12s ease;
  }
  #mej-sidebar-show:hover::after,
  #mej-sidebar-show:focus-visible::after {
    opacity: 1;
    transform: translateY(-50%) translateX(0);
  }
  html:not(.mej-sidebar-hidden) #mej-sidebar-show {
    display: none;
  }

  html.mej-sidebar-hidden .wy-nav-side {
    transform: translateX(-100%);
    visibility: hidden;
  }
  html.mej-sidebar-hidden .mej-sidebar-footer {
    display: none;
  }
  html.mej-sidebar-hidden .wy-nav-content-wrap {
    margin-left: 0;
  }
  html.mej-sidebar-hidden body > .rst-versions {
    display: none;
  }
}

@media screen and (max-width: 766px) {
  .mej-sidebar-footer,
  #mej-sidebar-show {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  body .wy-nav-side,
  body .wy-nav-content-wrap,
  .mej-sidebar-footer button,
  #mej-sidebar-show,
  #mej-sidebar-show::after {
    transition: none;
  }
}