////
///Placeholder for Copyright ///
////

// ----------------------------------------------------------------------------
// Rules
// ----------------------------------------------------------------------------

// Content area
.md-content {
  flex-grow: 1;
  // Hack: we must use `overflow: hidden`, so the content area is capped by
  // the dimensions of its parent. Otherwise, long code blocks might lead to
  // a wider content area which will break everything. This, however, induces
  // margin collapse, which will break scroll margins. Adding a large enough
  // scroll padding seems to do the trick, at least in Chrome and Firefox.
  overflow: hidden;
  scroll-padding-top: px2rem(1024px);

  // Content wrapper
  &__inner {
    margin: 0 px2rem(16px) px2rem(24px);
    padding-top: px2rem(12px);

    // [screen +]: Adjust spacing between content area and sidebars
    @include break-from-device(screen) {

      // Sidebar with navigation is visible
      .md-sidebar--primary:not([hidden]) ~ .md-content > & {
        margin-left: px2rem(24px);

        // Adjust for right-to-left languages
        [dir="rtl"] & {
          margin-right: px2rem(24px);
          margin-left: px2rem(16px);
        }
      }

      // Sidebar with table of contents is visible
      .md-sidebar--secondary:not([hidden]) ~ .md-content > & {
        margin-right: px2rem(24px);

        // Adjust for right-to-left languages
        [dir="rtl"] & {
          margin-right: px2rem(16px);
          margin-left: px2rem(24px);
        }
      }
    }

    // Hack: add pseudo element for spacing, as the overflow of the content
    // container may not be hidden due to an imminent offset error on targets
    &::before {
      display: block;
      height: px2rem(8px);
      content: "";
    }

    // Adjust spacing on last child
    > :last-child {
      margin-bottom: 0;
    }
  }

  // Button inside of the content area - these buttons are meant for actions on
  // a document-level, i.e. linking to related source code files, printing etc.
  &__button {
    float: right;
    margin: px2rem(8px) 0;
    margin-left: px2rem(8px);
    padding: 0;

    // [print]: Hide buttons
    @media print {
      display: none;
    }

    // Adjust for right-to-left languages
    [dir="rtl"] & {
      float: left;
      margin-right: px2rem(8px);
      margin-left: initial;

      // Flip icon vertically
      svg {
        transform: scaleX(-1);
      }
    }

    // Adjust default link color for icons
    .md-typeset & {
      color: var(--md-default-fg-color--lighter);
    }

    // Align with body copy located next to icon
    svg {
      display: inline;
      vertical-align: top;
    }
  }
}
