@use "breakpoints";

/**
 * Margin content
 * This is the area to the right of the main content
 * normally covered by the in-page table of contents
 * but if `.margin` classes are present, it shows up to the right in the margin
 * and the in-page TOC is hidden.
 * On narrow screens, margin content behaves like a sidebar
 */

/**
 * Variables for calculating margin widths
 */
// We want our margin content to be 1/3 the width of the main page content
// after factoring in a small margin
$margin-width-relative-to-content: 36%;
$margin-gutter: 3%;
$margin-width-width-gutter: $margin-width-relative-to-content - $margin-gutter;

// re-subtract the gutter width because we want it to leave a white-space
// This is how much to offset the margin content.
$margin-offset: -$margin-width-relative-to-content;

/**
 * This mixin will cause something to "pop out" to the margin on wide screens
 */
@mixin margin-content() {
  // On narrow screens this is the width of margin content
  width: 40%;
  float: right;
  background-color: unset;
  font-size: 0.9em;
  margin-left: 0.5rem;

  // Wide screens and printing should force margin behavior
  @media (min-width: breakpoints.$xl), print {
    width: $margin-width-width-gutter;
    margin: 0 $margin-offset 0 0;

    // Prevent sequential margin content from overlapping
    clear: right;

    p.sidebar-title {
      margin-bottom: -1rem;
      border-bottom: none;
      padding-left: 0px;

      // Content of admonitions has fewer horizontal white space to save space
      ~ * {
        padding-left: 0px;
        padding-right: 0px;
      }
    }
  }

  .sidebar-title:empty {
    display: none;
  }
}

/**
 * Sidenotes and marginnotes
 * over-rides the "footnote" behavior to pop out to the margin instead.
 */
label.margin-toggle {
  margin-bottom: 0em;
  &.marginnote-label {
    display: none;
  }
  sup {
    user-select: none;
  }
  @media (max-width: breakpoints.$xl) {
    cursor: pointer;
    color: rgb(0, 113, 188);
    &.marginnote-label {
      display: inline;
      &:after {
        content: "\2295";
      }
    }
  }
}

input.margin-toggle {
  display: none;
  @media (max-width: breakpoints.$xl) {
    &:checked + .sidenote,
    &:checked + .marginnote {
      display: block;
      float: left;
      left: 1rem;
      clear: both;
      width: 95%;
      margin: 1rem 2.5%;
      position: relative;
    }
  }
}

.qe-page__content {
  span.sidenote,
  span.marginnote {
    z-index: 2;
    position: relative;
    border-left: none;
    sup {
      user-select: none;
    }
    @include margin-content();
    @media (max-width: breakpoints.$xl) {
      display: none;
    }
  }

  aside.sidebar {
    .note {
      // styling for notes inside sidebars
      margin: 1rem;
      padding: 0rem 0rem 1rem 0rem;
    }
    // The titles sticking
    .admonition-title {
      margin: 0rem -1rem 0rem 0rem;
    }
  }

  /**
    * Sidebar content in the margin.
    * This will be added by the `margin` directive or the `sidebar` directive
    */
  aside.sidebar.margin {
    // Margin content can have an empty title so this prevents an empty title block
    // from showing up on mobile
    .sidebar-title:empty {
      display: none;
    }

    // On narrow screens padding is added to all sidebar content
    // This replaces padding w/ margin for admonitions because padding is used
    // for the title background color
    .admonition {
      margin: 0.5rem;
      padding-left: 0;
      padding-right: 0;

      // Remove the title margin so it
      .admonition-title {
        margin-left: 0;
        margin-right: 0;
      }
    }

    @media (min-width: breakpoints.$xl) {
      // No border for margin sidebars on wide screen
      border: none;

      // Admonitions don't need the extra whitespace in the margin
      .admonition {
        margin: 1rem 0rem;
        padding: 0rem 0rem 1rem 0rem;
      }
    }
  }

  div.margin,
  figure.margin,
  aside.margin,
  .margin.docutils.container,
  .cell.tag_popout,
  .cell.tag_margin {
    z-index: 2;
    position: relative;
    @include margin-content();

    // Make cell outputs take up more space if they're in the margin
    div.cell.tag_margin .cell_output {
      padding-left: 0;
    }
  }

  // A few permutations because docutils 0.18 switched to semantic tags
  div.figure.margin-caption p.caption,
  div.figure.margin-caption figcaption,
  figure.margin-caption figcaption {
    z-index: 2;
    position: relative;
    @include margin-content();
  }

  // Margin captions
  .margin-caption figcaption {
    text-align: left;
  }

  /**
    * Full width content
    */

  // Grow 100% by the ratio of the margin to the content width.
  $content-fullwidth-width: 100% + $margin-width-relative-to-content;

  div.cell.tag_full-width,
  div.cell.tag_full_width,
  div.full_width,
  div.full-width {
    z-index: 2;
    position: relative;
    @media (min-width: breakpoints.$xl) {
      max-width: $content-fullwidth-width;
      width: $content-fullwidth-width;
    }
  }
}
