@mixin tbd($color: red) {

position: relative;
padding: 0 .3em;
border: 1px dashed lighten($main-font-color, 70);

&:after {
  position: absolute;
  left: 100%;
  content: "TBD";
  color: lighten($main-font-color, 70);
  font-size: .6em;
  line-height: 1;
  padding: .05em .4em;
}

}

@mixin wide-container() {

@media screen and (min-width: $bigscreen-breakpoint) {
  padding: 0 2em;
  width: $bigscreen-breakpoint - $gutter * 8;
}
@media screen and (min-width: $widescreen-breakpoint) {
  width: $widescreen-breakpoint - $gutter * 8;
}

}

@mixin padded-code-snippet() {

padding: .2em .5em;
margin: 0 .2em;

font-size: 15px;

background: $code-listing-background-color;

border-color: $code-listing-border-color;
border-width: 0 1px 0 1px;
border-style: dashed;
border-radius: 0;

}

@mixin padded-code-snippet–reset() {

padding: 0;
margin: 0;
background: transparent;
border: 0;
border-radius: 0;

}

@mixin code-snippet-container() {

overflow-x: scroll;
overflow-y: hidden;
line-height: 1.2;

@include padded-code-snippet();
padding-top: .5em;
padding-bottom: .5em;

border-width: 0 0 0 1px;
border-radius: 0 .25em .25em 0;

margin-top: 1em;
margin-bottom: 1em;

margin-left: -.1em;

> code {
  // Avoid bad formatting in case of <code> element nested
  // inside a <pre>
  @include padded-code-snippet--reset();
}

}

@mixin code-snippet() {

color: lighten($main-font-color, 24);

@include padded-code-snippet();
margin-top: -1px;
margin-bottom: -1px;

font-family: $font-family-source;

code {
  // Avoid bad formatting in case of <code> elements nested
  // into each other (possible with adoc output)
  @include padded-code-snippet--reset();
}

}

@mixin cta-button($bgcolor, $color) {

font-weight: 800;
font-size: 18px;
padding: 12px 32px;
display: inline-block;
margin-right: 10px;
transition: box-shadow .2s ease-out;

.icon {
  margin-right: 10px;
  font-weight: 400;
  position: relative;
  top: 2px;
  font-size: 120%;
}

&, &:link, &:visited {
  color: $color;
  background-color: $bgcolor;
}

&:hover {
  box-shadow: 0 0 0 4px rgba(black, 0.2);
}

}

@mixin cta-button-mini($bgcolor, $color) {

@include cta-button($bgcolor, $color);
font-size: 14px;
padding: 6px 16px;

}

@mixin hoverable-card($base-y, $base-blur, $color) {

$hovered-y: $base-y * 2;
$hovered-blur: $base-blur * 2;

box-shadow: 0px $base-y $base-blur $color;

transition: box-shadow .17s ease, transform .17s ease;

&:hover {
  transform: translateY(-1px);
  box-shadow: 0px $hovered-y $hovered-blur $color;
}

}

@mixin reset-list() {

list-style: none;
margin: 0;
padding: 0;

}

@mixin static-link-color($color) {

&:link, &:hover, &:visited {
  color: $color;
}

}

@mixin asciidoc-markup($highlight-color) {

h1, h2, h3, h4, h5, h6 {
  // Header highlight when in-page navigation links are used
  &.highlighted {
    &:before {
      content: "→";
      margin-right: .5em;
    }
  }
}

// Small text
span.small {
  font-size: 80%;
}

// Callouts
.conum {
  color: $primary-dark-color;
  font-family: $font-family;
  opacity: 0.7;
  transition: opacity .4s ease-out;

  &:hover {
    opacity: 1;
  }
}
.colist {
  ol {
    list-style: none;
    counter-reset: item;
    padding-left: 1.5em;

    li {
      counter-increment: item;
      display: flex;
      flex-flow: row nowrap;
      align-items: flex-start;

      &:before {
        margin-left: -1.5em;
        flex-shrink: 0;
        width: 1.75em;
        height: 1.75em;
        margin-right: .25em;
        margin-top: -.1em;

        border-radius: 100%;
        padding: .1em;
        line-height: 1.8;

        content: counter(item);
        font-size: 100%;
        font-weight: bold;
        text-align: center;
        background-color: $primary-dark-color;
        font-family: monospace;
        color: white;
        transform: scale(0.8);
      }
    }
  }
}

// Generic title
// Used for e.g. code listing headings and tip block labels
.title {
  text-transform: uppercase;
  font-size: 12px;
  border-radius: .25em;
  background-color: $main-font-color;
  color: white;
  font-weight: bold;
  padding: .3em .6em;
}

// Blocks

.admonitionblock {
  > table {
    display: flex;
    flex-flow: column nowrap;

    tbody {
      display: flex;
      flex-flow: column nowrap;

      tr {
        display: flex;
        flex-flow: column nowrap;

        @media screen and (min-width: $bigscreen-breakpoint) {
          flex-flow: row nowrap;
        }

        td.content {
          overflow-x: hidden;
        }
      }
    }
  }
}

.admonitionblock,
.listingblock {
  margin: 1em 0;
}

.admonitionblock.warning {
  td.icon .title {
    background-color: $warning-color;
  }
}
.admonitionblock.important {
  td.icon .title {
    background-color: $important-color;
  }
}

.imageblock {
  .title {
    background-color: $accent-color;
    color: white;
  }
}

.listingblock {
  display: flex;
  flex-flow: column nowrap;

  .title {
    align-self: flex-start;
    background-color: $code-listing-border-color;
    color: white;
    border-radius: 0;
  }

  .content {
    align-self: stretch;

    position: relative;
    button.listing-clipboard-button {
      position: absolute;
      right: 0;
      top: .25em;
      padding: .3em .3em;
      font-size: 80%;
      transform: translateX(100%);
      color: $code-listing-border-color;
      background: $code-listing-background-color;
      border: 0;
      cursor: pointer;
    }

    pre {
      margin: 0;
    }
  }
}

.admonitionblock {
  padding-left: .5em;
  background-color: rgba(black, 0.03);

  @media screen and (min-width: $bigscreen-breakpoint) {
    overflow-x: scroll;
  }

  > table:first-child {
    margin-top: 0;
  }
  > table:last-child {
    margin-bottom: 0;
  }

  td.icon {
    vertical-align: top;
    padding-left: 0;
    font-size: 90%;
  }

  .title {
    background-color: $primary-dark-color;
    color: white;
  }

  .content {
    font-size: 90%;

    .title {
      background: transparent;
      color: $main-font-color;
      padding-left: 0;
    }

    .listingblock pre {
      font-size: 100%;
    }

    > div:first-child {
      > :first-child {
        margin-top: 0;
      }
    }
    > div:last-child {
      > :last-child {
        margin-bottom: 0;
      }
      &.ulist {
        li:first-child > :first-child {
          margin-top: 0;
        }
        li:last-child > :last-child {
          margin-bottom: 0;
        }
      }
    }
  }
}

}

@mixin item-external-links($onDark: false) {

ul.nav-items {
  @include reset-list();
}

> .nav-items > li {
  flex-basis: 50%;
  width: 50%;
  max-width: 200px;

  &:first-child {
    a {
      margin-left: 1px;
    }
  }

  > a {
    @if $onDark == true {
      @include static-link-color(white);
      background-color: rgba(black, 0.7);
    } @else {
      @include static-link-color(#444);
      background-color: rgba(black, 0.08);
    }

    display: block;
    font-weight: bold;
    padding: .5em 1em .5em 1.5em;

    margin: 1px 1px 1px 0;

    display: flex;
    flex-flow: row nowrap;

    .lbl {
      white-space: nowrap;
      text-overflow: ellipsis;
      overflow: hidden;
      flex: 1;
    }
    .ico {
      flex-shrink: 0;
      width: 32px;
    }
    .ico-ext {
      flex-shrink: 0;
      text-align: right;
      width: 32px;
    }
  }

  &.featured {
    > a {
      @if $onDark == true {
        @include static-link-color($primary-color);
        background-color: white;
      } @else {
        @include static-link-color(white);
        background-color: $primary-dark-color;
      }
    }
  }
}

}

@mixin item-nav-toc() {

// Used for ToC on software item’s landing and elsewhere,
// (though not in docs sidebar)

ul.nav-items {
  @include reset-list;
  font-size: 15px;
}

> ul.nav-items > li {
  > .item-title {
    font-size: 18px;
    font-weight: bold;
    margin: 0;
    line-height: 1.8;
  }
  ul {
    line-height: 2;
  }
}

}

@mixin docs-page($primary-dark-color) {

.leaflet-pane {
  // To ensure leaflet does not obscure navigation sidebar
  z-index: 3;
}
.leaflet-top, .leaflet-bottom {
  // To ensure leaflet buttons get covered by expandable top menu
  z-index: 5;
}

> header.documentation-header,
> section.documentation {
  align-self: stretch;
  width: auto;
}

> header.documentation-header {
  display: flex;
  flex-flow: row nowrap;
  align-items: center;
  padding: 0 0 0 2em;
  position: fixed;
  right: 0;
  z-index: 4;

  transition: background .1s linear, border-bottom .1s linear, transform .1s linear;

  .nav-header {
    padding: 10px 2em 10px 2em;
    display: flex;
    flex-flow: row nowrap;
    align-items: center;
    transition: background .6s $easeOutCirc;

    .title {
      white-space: nowrap;
      line-height: 1;
      font-weight: normal;
      font-size: 15px;
      text-transform: uppercase;
      letter-spacing: 0.08em;

      a {
        @include static-link-color(#444);
      }

      .nav-toggle-icon {
        cursor: pointer;
      }
    }

    .logo-container {
      $logoSize: 32px;

      margin-right: 10px;
      height: $logoSize;
      width: $logoSize;

      .logo > :only-child {
        width: $logoSize;
        height: $logoSize;
      }
    }

    .nav-toggle-icon {
      margin-left: 1em;

      > .close { display: none; }
      > .open { display: block; }
    }
  }

  &.nav-expanded {
    .nav-header {
      background-color: #f7f7f7;
    }
    .nav-header .nav-toggle-icon {
      > .open { display: none; }
      > .close { display: block; }
    }
  }

  .item-type {
    display: none;
    margin-right: 10px;
  }

  &.headroom--not-top {
    background: rgba(white, 0.9);
    box-shadow: rbga(white, 0.9) 0 20px 30px;
  }

  &.unpinned {
    .item-type, .subsection {
      display: inline-block;
    }
  }
}

> section.documentation {
  flex: 1;

  @media screen and (min-width: $bigscreen-breakpoint) {
    display: flex;
    flex-flow: column nowrap;
  }

  overflow-x: auto; // on narrow screens, code snippets & tables may overflow width

  .docs-nav {
    $navFlexShare: 20%;

    background: transparent;
    flex-basis: 20%;

    transition: flex-basis .6s $easeOutCirc;

    > section {
      margin-bottom: 15px;
    }

    // New style: Nav with nested items
    > ul.nav-items {
      $sidePadding: 1em;

      @include reset-list;

      position: fixed;
      overflow-y: auto;
      bottom: 0;
      right: 0;
      left: 0;

      @media screen and (min-width: $bigscreen-breakpoint) {
        left: unset;
      }

      padding: .75em $sidePadding;

      z-index: 5;
      background: #f7f7f7;
      box-shadow: rgba(black, 0.7) -30px 0px 60px -60px;

      transition:
        // Collapsing of header when scrolling (w/headroom):
        top .1s linear,
        // Toggling sidebar open/closed
        transform .6s $easeOutCirc,
        opacity .6s $easeOutCirc,
        box-shadow .6s $easeOutCirc;

      @media screen and (min-width: $bigscreen-breakpoint) {
        max-width: calc(#{$navFlexShare} - #{$sidePadding});
      }

      li {
        font-size: 15px;
        font-weight: normal;

        > .item-title {
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
        }

        &.selected {
          > .item-title {
            background-color: #f0f0f0;
            margin-left: -2em;
            padding-left: 2em;
          }

          span {
            font-weight: bold;
          }
        }
        a { @include static-link-color(#444); }
      }

      > li {
        > .item-title {
          font-size: 20px;
          margin: 0;
          line-height: 1.8;
        }
        > ul {
          margin-left: .75em;
          padding-left: 0;
          line-height: 2;
          margin-bottom: .5em;
        }

        ul {
          margin-left: 1.25em;
          padding-left: 0;
        }

        ul.in-page-toc {
          padding: .25em .25em .25em0;
          margin-left: 0;
          margin-bottom: .5em;
          border-radius: 0 0 0 1em;

          &, ul {
            list-style: none;
          }
          ul {
            padding: 0;
          }
          li {
            font-size: 13px;
            line-height: 1.5;

            &.highlighted > .item-title {
              a:link, a:visited {
                font-weight: bold;
              }
            }
          }
        }
      }
    }
  }

  > article {
    @extend .main-article;

    .body {
      font-size: 17px;
      line-height: 1.6;
    }

    margin: 0 auto;
    flex: 1;

    background: white;
    z-index: 1;

    > header, > footer {
      [role=toolbar] {
        line-height: 1;

        button, a {
          border: 0;
          padding: 0;
          margin-right: 1em;

          font-family: inherit;
          font-size: 80%;
          font-weight: bold;

          background: white;
          color: $primary-dark-color;
          cursor: pointer;

          text-decoration: none;

          &:last-child {
            margin-right: 0;
          }

          .ico-ext {
            margin-left: .5em;
          }
        }
      }
    }

    > header {
      > [role=toolbar] {
        margin-top: -2em;
        margin-bottom: 4em;
      }
      > .title {
        @media screen and (min-width: $bigscreen-breakpoint) {
          display: flex;
          flex-flow: row nowrap;
        }

        padding-top: 70px;

        > .logo-container {
          margin-right: 22px;

          > :only-child {
            width: 58px;
            height: 58px;
          }
        }

        .text {
          flex: 1;
          font-size: 36px;

          margin: 0;
          font-weight: 500;
        }
      }
      .lead {
        font-weight: normal;
        font-size: 20px;
      }
    }

    > .body {
      @include asciidoc-markup($primary-dark-color);
    }
  }

  .docs-nav,
  &.docs-landing > article > header {
    .external-links {
      @include item-external-links();
    }
  }

  .docs-nav {
    .external-links {
      margin-bottom: .5em;

      > .nav-items > li {
        flex-basis: unset;
        width: 100%;
        a {
          padding: 0;
          background: none;
        }
        &.featured {
          a {
            background: none;
            @include static-link-color($main-font-color);
          }
        }
      }
    }
  }

  &.docs-landing > article {
    > header {
      .external-links {
        margin-bottom: 2em;

        > .nav-items > li {
          width: unset;
        }
      }
      > .title {
        border-bottom-width: 0;
        padding-bottom: 0;
      }
    }

    @include item-nav-toc();
  }

  @media screen and (min-width: $bigscreen-breakpoint) {
    flex-flow: row nowrap;
    flex-direction: row-reverse;

    > article {
      flex: 2;
    }

    > .docs-nav {
      padding: 70px 0 0 0;
    }

    &.docs-landing {
      flex-direction: column-reverse;

      > article {
        border-left-width: 0;

        .external-links {
          > .nav-items {
            display: flex;
            flex-flow: row wrap;
          }
        }

        > header,
        > .body {
          margin-left: 0;
        }

        @media screen and (min-width: $bigscreen-breakpoint) {
          > .body {
            padding-top: 20px;
          }
        }
      }
    }

    &.with-collapsed-toc {
      > article {
        > header, > .body {
          margin-right: 0;
        }
      }
    }
  }

  &.with-collapsed-toc {
    position: relative;

    > .docs-nav {
      flex-basis: 0;

      .nav-items {
        transform: translateX(100%);
        opacity: 0;
      }
    }
  }
}

}