/* THEME SPECIFIC STYLES */

.v-main .contents {
  color: mc("grey", "800");
  padding: 0.5rem 0 50px;
  position: relative;

  > div > *:first-child {
    margin-top: 0;
  }

  @at-root .theme--dark & {
    color: mc("grey", "300");
  }

  // ---------------------------------
  // LINKS
  // ---------------------------------

  a {
    color: mc("blue", "700");

    &.is-internal-link.is-invalid-page {
      color: mc("red", "700");

      @at-root .theme--dark & {
        color: mc("red", "200");
      }
    }

    &.is-external-link {
      padding-right: 3px;

      &::after {
        font-family: "Material Design Icons", sans-serif;
        font-size: 24px/1;
        padding-left: 3px;
        display: inline-block;
        content: "\F03CC";
        color: mc("grey", "500");
        text-decoration: none;
      }
    }

    @at-root .theme--dark & {
      color: mc("blue", "200");
    }
  }

  // ---------------------------------
  // HEADERS
  // ---------------------------------

  h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
    position: relative;

    &:first-child {
      padding-top: 0;
    }

    &:hover {
      .toc-anchor {
        display: block;
      }
    }

    .toc-anchor {
      display: none;
      position: absolute;
      right: 1rem;
      bottom: 0.5rem;
      font-size: 1.25rem;
      text-decoration: none;
      color: mc("grey", "500");
    }

    & + h2,
    & + h3,
    & + h4,
    & + h5,
    & + h6 {
      margin-top: 8px;
    }

    & + hr.footnotes-sep {
      display: none;
    }
  }

  h1 {
    padding: 0;
    color: mc("blue", "800");
    margin-top: 2rem;
    position: relative;

    @at-root .theme--dark & {
      color: mc("grey", "300");
    }

    &::after {
      content: "";
      position: absolute;
      bottom: 0;
      left: 0;
      width: 100%;
      height: 2px;
      background: linear-gradient(to right, mc("theme", "primary"), rgba(mc("theme", "primary"), 0));
      border-radius: 3px;

      @at-root .theme--dark & {
        background: linear-gradient(to right, mc("blue", "300") 0%, mc("blue", "500") 10%, rgba(mc("blue", "900"), 0) 100%);
      }

      @at-root .is-rtl & {
        background: linear-gradient(to left, mc("theme", "primary"), rgba(mc("theme", "primary"), 0));
      }
      @at-root .theme--dark.is-rtl & {
        background: linear-gradient(to left, mc("grey", "600"), rgba(mc("grey", "600"), 0));
      }
    }
  }
  h2 {
    margin: 1rem 0 0 0;
    color: mc("grey", "800");
    position: relative;

    @at-root .theme--dark & {
      color: mc("grey", "400");
    }

    &::after {
      content: "";
      position: absolute;
      bottom: 0;
      left: 0;
      width: 100%;
      height: 1px;
      background: linear-gradient(to right, mc("grey", "700"), rgba(mc("grey", "700"), 0));

      @at-root .theme--dark & {
        background: linear-gradient(to right, mc("grey", "300"), rgba(mc("grey", "700"), 0));
      }

      @at-root .is-rtl & {
        background: linear-gradient(to left, mc("grey", "700"), rgba(mc("grey", "700"), 0));
      }
      @at-root .theme--dark.is-rtl & {
        background: linear-gradient(to left, mc("grey", "300"), rgba(mc("grey", "700"), 0));
      }
    }
  }
  h3 {
    margin: 8px 0 0 0;
    color: mc("grey", "700");
    position: relative;

    @at-root .theme--dark & {
      color: mc("grey", "600");
    }

    &::after {
      content: "";
      position: absolute;
      bottom: 0;
      left: 0;
      width: 100%;
      height: 1px;
      background: linear-gradient(to right, mc("grey", "500"), rgba(mc("grey", "500"), 0) 90%);
    }
  }
  h4,
  h5,
  h6 {
    font-size: 1rem;
    margin: 8px 0 0 0;
    color: mc("grey", "700");
    position: relative;

    @at-root .theme--dark & {
      color: mc("grey", "600");
    }

    &::after {
      content: "";
      position: absolute;
      bottom: 0;
      left: 0;
      width: 100%;
      height: 1px;
      background: linear-gradient(to right, mc("grey", "500"), rgba(mc("grey", "500"), 0) 70%);
    }
  }
  h5 {
    &::after {
      background: linear-gradient(to right, mc("grey", "500"), rgba(mc("grey", "500"), 0) 50%);
    }
  }
  h6 {
    &::after {
      background: linear-gradient(to right, mc("grey", "500"), rgba(mc("grey", "500"), 0) 30%);
    }
  }

  // ---------------------------------
  // PARAGRAPHS
  // ---------------------------------

  p {
    padding: 1rem 0 0 0;
    margin: 0;

    @at-root .contents > div > p:first-child {
      padding-top: 0;
    }

    @at-root .v-application & {
      margin-bottom: 0;
    }
  }

  hr {
    margin: 1rem 0;
    height: 1px;
    border: none;
    background-color: mc("grey", "400");

    @at-root .theme--dark & {
      background-color: mc("grey", "700");
    }
  }

  .emoji {
    height: 1.25em;
    margin: 0 1px -4px;
  }

  .text-huge {
    font-size: 1.8em;
  }
  .text-big {
    font-size: 1.4em;
  }
  .text-small {
    font-size: 0.85em;
  }
  .text-tiny {
    font-size: 0.7em;
  }

  blockquote {
    padding: 0 1rem 1rem 1rem;
    background-color: mc("blue-grey", "50");
    border-left: 55px solid mc("blue-grey", "500");
    border-radius: 0.5rem;
    margin: 1rem 0;
    position: relative;

    @at-root .theme--dark & {
      background-color: mc("blue-grey", "900");
    }

    &::before {
      display: inline-block;
      font:
        normal normal normal 24px/1 "Material Design Icons",
        sans-serif;
      position: absolute;
      margin-top: -12px;
      top: 50%;
      left: -38px;
      color: rgba(255, 255, 255, 0.7);
      content: "\F0757";
    }

    > p:first-child .emoji {
      margin-right: 0.5rem;
    }

    &.valign-center > p {
      display: flex;
      align-items: center;
    }

    &.is-info {
      background-color: mc("blue", "50");
      border-color: mc("blue", "300");
      color: mc("blue", "900");

      &::before {
        content: "\F02FC";
      }

      code:not([class^="language-"]) {
        background-color: mc("blue", "50");
        color: mc("blue", "800");
      }

      @at-root .theme--dark & {
        background-color: mc("blue", "900");
        color: mc("blue", "50");
        border-color: mc("blue", "500");
      }
    }
    &.is-warning {
      background-color: mc("orange", "50");
      border-color: mc("orange", "300");
      color: darken(mc("orange", "900"), 10%);

      &::before {
        content: "\F0026";
      }

      code:not([class^="language-"]) {
        background-color: mc("orange", "50");
        color: mc("orange", "800");
      }

      @at-root .theme--dark & {
        background-color: darken(mc("orange", "900"), 5%);
        color: mc("orange", "100");
        border-color: mc("orange", "500");
        box-shadow: 0 0 2px 0 mc("grey", "900");
      }
    }
    &.is-danger {
      background-color: mc("red", "50");
      border-color: mc("red", "300");
      color: mc("red", "900");

      &::before {
        content: "\F0159";
      }

      code:not([class^="language-"]) {
        background-color: mc("red", "50");
        color: mc("red", "800");
      }

      @at-root .theme--dark & {
        background-color: mc("red", "900");
        color: mc("red", "100");
        border-color: mc("red", "500");
      }
    }
    &.is-success {
      background-color: mc("green", "50");
      border-color: mc("green", "300");
      color: mc("green", "900");

      &::before {
        content: "\F0E1E";
      }

      code:not([class^="language-"]) {
        background-color: mc("green", "50");
        color: mc("green", "800");
      }

      @at-root .theme--dark & {
        background-color: mc("green", "900");
        color: mc("green", "50");
        border-color: mc("green", "500");
      }
    }
  }

  // ---------------------------------
  // ASCIIDOC SPECIFIC
  // ---------------------------------

  .admonitionblock {
    margin: 1rem 0;
    position: relative;

    table {
      border: none;
      background-color: transparent;
      width: 100%;
    }

    td.icon {
      border-bottom-left-radius: 7px;
      border-top-left-radius: 7px;
      text-align: center;
      width: 56px;

      &::before {
        display: inline-block;
        font:
          normal normal normal 24px/1 "Material Design Icons",
          sans-serif !important;
      }
    }

    td.content {
      border-bottom-right-radius: 7px;
      border-top-right-radius: 7px;
    }

    &.note {
      td.icon {
        background-color: mc("blue", "300");
        color: mc("blue", "50");
        &::before {
          content: "\F02FC";
        }
      }
      td.content {
        color: darken(mc("blue", "900"), 10%);
        background-color: mc("blue", "50");

        @at-root .theme--dark & {
          background-color: mc("blue", "900");
          color: mc("blue", "50");
        }
      }
    }
    &.tip {
      td.icon {
        background-color: mc("green", "300");
        color: mc("green", "50");
        &::before {
          content: "\F0335";
        }
      }
      td.content {
        color: darken(mc("green", "900"), 10%);
        background-color: mc("green", "50");

        @at-root .theme--dark & {
          background-color: mc("green", "900");
          color: mc("green", "50");
        }
      }
    }
    &.warning {
      background-color: transparent !important;

      td.icon {
        background-color: mc("orange", "300");
        color: #fff;
        &::before {
          content: "\F0026";
        }
      }
      td.content {
        color: darken(mc("orange", "900"), 10%);
        background-color: mc("orange", "50");

        @at-root .theme--dark & {
          background-color: darken(mc("orange", "900"), 5%);
          color: mc("orange", "100");
        }
      }
    }
    &.caution {
      td.icon {
        background-color: mc("purple", "300");
        color: mc("purple", "50");
        &::before {
          content: "\f0238";
        }
      }
      td.content {
        color: darken(mc("purple", "900"), 10%);
        background-color: mc("purple", "50");

        @at-root .theme--dark & {
          background-color: mc("purple", "900");
          color: mc("purple", "100");
        }
      }
    }
    &.important {
      td.icon {
        background-color: mc("red", "300");
        color: mc("red", "50");
        &::before {
          content: "\F0159";
        }
      }
      td.content {
        color: darken(mc("red", "900"), 10%);
        background-color: mc("red", "50");

        @at-root .theme--dark & {
          background-color: mc("red", "900");
          color: mc("red", "100");
        }
      }
    }
  }

  .exampleblock {
    > .title {
      font-style: italic;
      font-size: 1rem !important;
      color: #7a2717;

      @at-root .theme--dark & {
        color: mc("brown", "300");
      }
    }
    > .content {
      border: 1px solid mc("grey", "200");
      border-radius: 7px;
      margin-bottom: 12px;
      padding: 16px;
    }
  }
  // ---------------------------------
  // LISTS
  // ---------------------------------

  ol,
  ul:not(.tabset-tabs) {
    padding-top: 1rem;
    width: 100%;

    @at-root .is-rtl & {
      padding-left: 0;
      padding-right: 1rem;
    }

    li > ul,
    li > ol {
      padding-top: 0.5rem;
      padding-left: 1rem;

      @at-root .is-rtl & {
        padding-left: 0;
        padding-right: 1rem;
      }
    }

    li + li {
      margin-top: 0.5rem;
    }

    &.links-list {
      padding-left: 0;
      list-style-type: none;

      @at-root .is-rtl & {
        padding-right: 0;
      }

      li {
        background-color: mc("grey", "50");
        background-image: linear-gradient(to bottom, #fff, mc("grey", "50"));
        border-right: 1px solid mc("grey", "200");
        border-bottom: 1px solid mc("grey", "200");
        border-left: 5px solid mc("grey", "300");
        box-shadow: 0 3px 8px 0 rgba(116, 129, 141, 0.1);
        padding: 1rem;
        border-radius: 5px;
        font-weight: 500;

        @at-root .is-rtl & {
          border-left-width: 1px;
          border-right-width: 5px;
        }

        &:hover {
          background-image: linear-gradient(to bottom, #fff, lighten(mc("blue", "50"), 4%));
          border-left-color: mc("blue", "500");
          cursor: pointer;

          @at-root .is-rtl & {
            border-left-color: mc("grey", "200");
            border-right-width: mc("blue", "500");
          }
        }

        &::before {
          content: "";
          display: none;
        }

        > a {
          display: block;
          text-decoration: none;
          margin: -1rem;
          padding: 1rem;

          > em {
            font-weight: 400;
            font-style: normal;
            color: mc("grey", "700");
            display: inline-block;
            padding-left: 0.5rem;
            border-left: 1px solid mc("grey", "300");
            margin-left: 0.5rem;

            &.is-block {
              display: block;
              padding-left: 0;
              margin-left: 0;
              border-left: none;
            }
          }
        }

        > em {
          font-weight: 400;
          font-style: normal;
        }

        @at-root .theme--dark & {
          background-color: mc("grey", "50");
          background-image: linear-gradient(to bottom, lighten(mc("grey", "900"), 5%), mc("grey", "900"));
          border-right: 1px solid mc("grey", "900");
          border-bottom: 1px solid mc("grey", "900");
          border-left: 5px solid mc("grey", "700");
          box-shadow: 0 3px 8px 0 rgba(0, 0, 0, 0.1);

          @at-root .theme--dark.is-rtl & {
            border-left-width: 1px;
            border-right-width: 5px;
          }

          &:hover {
            background-image: linear-gradient(to bottom, lighten(mc("grey", "900"), 2%), darken(mc("grey", "900"), 3%));
            border-left-color: mc("indigo", "300");
            cursor: pointer;

            @at-root .theme--dark.is-rtl & {
              border-left-color: mc("grey", "900");
              border-right-width: mc("indigo", "300");
            }
          }
        }
      }
    }

    &.grid-list {
      margin: 1rem 0 0 0;
      background-color: #fff;
      border: 1px solid mc("grey", "200");
      padding: 1px;
      display: inline-block;
      list-style-type: none;

      @at-root .theme--dark & {
        background-color: #000;
        border: 1px solid mc("grey", "800");
      }

      li {
        background-color: mc("grey", "50");
        padding: 0.6rem 1rem;
        display: block;

        &:nth-child(odd) {
          background-color: mc("grey", "100");
        }

        & + li {
          margin-top: 0;
        }

        &::before {
          content: "";
          display: none;
        }

        @at-root .theme--dark & {
          background-color: mc("grey", "900");

          &:nth-child(odd) {
            background-color: darken(mc("grey", "900"), 5%);
          }
        }
      }
    }
  }

  ul:not(.tabset-tabs):not(.contains-task-list) {
    list-style: none;
    > li::before {
      position: absolute;
      left: -1.1rem;
      content: "\25b8";
      color: mc("grey", "600");
      width: 1.35rem;

      @at-root .is-rtl & {
        right: -1.1rem;
        content: "\25C3";
      }
    }
  }
  ol,
  ul:not(.tabset-tabs) {
    > li {
      position: relative;
      > p {
        display: inline-block;
        vertical-align: top;
        padding-top: 0;

        &:first-child {
          width: 100%;
        }
      }
    }
  }

  dl {
    dt {
      margin-top: 0.3em;
      margin-bottom: 0.3em;
      font-weight: bold;
    }

    dd {
      margin-left: 1.125em;
      margin-bottom: 0.75em;

      > p {
        padding: 0;
      }
    }
  }

  // ---------------------------------
  // CODE
  // ---------------------------------

  code {
    background-color: mc("indigo", "50");
    padding: 0 5px;
    color: mc("indigo", "800");
    font-family: "Roboto Mono", monospace;
    font-weight: normal;
    font-size: 1rem;
    box-shadow: none;

    &::before,
    &::after {
      display: none;
    }

    @at-root .theme--dark & {
      background-color: darken(mc("grey", "900"), 5%);
      color: mc("indigo", "100");
    }
  }

  .prismjs {
    border: none;
    border-radius: 5px;
    box-shadow: initial;
    background-color: mc("grey", "900");
    padding: 1rem 1rem 1rem 3rem;
    margin: 1rem 0;

    @at-root .theme--dark & {
      background-color: darken(mc("grey", "900"), 5%);
    }

    > code {
      background-color: transparent;
      padding: 0;
      color: #fff;
      box-shadow: initial;
      display: block;
      font-size: 0.85rem;
      font-family: "Roboto Mono", monospace;

      &:after,
      &:before {
        content: initial;
        letter-spacing: initial;
      }
    }
  }

  .diagram {
    margin-top: 1rem;
    overflow: auto;

    svg {
      color-scheme: light !important;

      &:first-child {
        direction: ltr;
      }

      @at-root .theme--dark & {
        color-scheme: dark !important;
      }
    }
  }

  // ---------------------------------
  // TASK LISTS
  // ---------------------------------

  .contains-task-list {
    padding-left: 0;
  }

  .task-list-item {
    position: relative;
    list-style-type: none;

    &-checkbox[disabled] {
      width: 1.1rem;
      height: 1.1rem;
      top: 2px;
      position: relative;
      margin-right: 2px;

      &::after {
        position: absolute;
        left: 0;
        top: 0;
        content: " ";
        display: block;
        width: 1.1rem;
        height: 1.1rem;
        background-color: #fff;
        border: 1px solid mc("grey", "400");
        border-radius: 2px;
        font-weight: bold;
        font-size: 0.8rem;
        line-height: 1rem;
        text-align: center;

        @at-root .theme--dark & {
          background-color: mc("grey", "900");
          border-color: mc("grey", "700");
        }
      }

      &[checked]::after {
        content: "✓";
      }
    }

    .contains-task-list {
      padding: 0.5rem 0 0 1.5rem;
    }
  }

  // ---------------------------------
  // TABLES
  // ---------------------------------

  table {
    margin: 0.5rem 0;
    border-spacing: 0;
    border-radius: 5px;
    border: 1px solid mc("grey", "300");

    @at-root .theme--dark & {
      border-color: mc("grey", "600");
    }

    &.dense {
      td,
      th {
        font-size: 0.85rem;
        padding: 0.5rem;
      }
    }

    th {
      padding: 0.75rem;
      border-bottom: 2px solid mc("grey", "500");
      color: mc("grey", "600");
      background-color: mc("grey", "100");

      @at-root .theme--dark & {
        background-color: darken(mc("grey", "900"), 8%);
        border-bottom-color: mc("grey", "600");
        color: mc("grey", "500");
      }

      &:first-child {
        border-top-left-radius: 7px;
      }
      &:last-child {
        border-top-right-radius: 7px;
      }
    }

    td {
      padding: 0.75rem;
    }

    tr {
      td {
        border-bottom: 1px solid mc("grey", "300");
        border-right: 1px solid mc("grey", "100");

        @at-root .theme--dark & {
          border-bottom-color: mc("grey", "700");
          border-right-color: mc("grey", "800");
        }

        &:nth-child(even) {
          background-color: mc("grey", "50");

          @at-root .theme--dark & {
            background-color: darken(mc("grey", "900"), 4%);
          }
        }

        &:last-child {
          border-right: none;
        }
      }

      &:nth-child(even) {
        td {
          background-color: mc("grey", "50");

          @at-root .theme--dark & {
            background-color: darken(mc("grey", "800"), 8%);
          }

          &:nth-child(even) {
            background-color: mc("grey", "100");

            @at-root .theme--dark & {
              background-color: darken(mc("grey", "800"), 10%);
            }
          }
        }
      }

      &:last-child {
        td {
          border-bottom: none;

          &:first-child {
            border-bottom-left-radius: 7px;
          }
          &:last-child {
            border-bottom-right-radius: 7px;
          }
        }
      }
    }
  }

  figure.table {
    margin: 0;

    > table {
      background-color: #fff;
      margin: 0;
      border-collapse: collapse;
      box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.07);

      @at-root .theme--dark & {
        background-color: darken(mc("grey", "900"), 3%);
      }

      td,
      th {
        border: 1px solid mc("blue-grey", "100");
        box-shadow:
          inset -1px -1px 0 0 #fff,
          inset 1px 0 0 #fff;
        padding: 0.5rem 0.75rem;
        border-radius: 0 !important;

        @at-root .theme--dark & {
          border-color: mc("grey", "700");
          box-shadow: inset -1px -1px 0 0 rgba(0, 0, 0, 0.5);
        }
      }

      th {
        background-color: lighten(mc("blue-grey", "50"), 1%);
        font-weight: 700;
        color: mc("blue-grey", "700");

        @at-root .theme--dark & {
          background-color: mc("grey", "800");
          color: mc("grey", "400");
        }
      }

      thead th {
        border-bottom: 2px solid mc("blue-grey", "100");

        @at-root .theme--dark & {
          border-bottom: none;
        }
      }

      tbody th {
        background-color: lighten(mc("blue-grey", "50"), 4%);

        @at-root .theme--dark & {
          background-color: darken(mc("grey", "800"), 8%);
        }
      }
    }
  }

  // -> Add horizontal scrollbar when table is too wide
  .table-container {
    width: 100%;
    overflow-x: auto;
  }

  // ---------------------------------
  // IMAGES
  // ---------------------------------

  img {
    max-width: 100%;

    &.align-left {
      float: left;
      margin: 0 1rem 1rem 0;
    }
    &.align-right {
      float: right;
      margin: 0 0 1rem 1rem;
      z-index: 1;
      position: relative;
    }
    &.align-center {
      display: block;
      max-width: 100%;
      margin: auto;
    }
    &.align-abstopright {
      position: absolute;
      top: -90px;
      right: 1rem;
      height: calc(90px - 32px);
      width: auto;

      @at-root .is-rtl & {
        left: 1rem;
        right: initial;
      }
    }
    &.decor-shadow {
      box-shadow: 0 3px 8px 0 rgba(116, 129, 141, 0.1);
    }
    &.decor-outline {
      border: 1px solid mc("grey", "400");
    }
    &.uml-diagram {
      margin: 1rem 0;
    }
  }

  figure.image {
    margin: 1rem 0 0 0;

    img {
      margin: 0 auto;
    }
    figcaption {
      padding: 4px 1rem;
      text-align: center;
      font-size: 12px;
      color: mc("grey", "700");
      background-color: mc("grey", "100");

      @at-root .theme--dark & {
        color: mc("grey", "400");
        background-color: mc("grey", "800");
      }
    }
  }

  figure.image-style-align-right {
    float: right;
  }

  figure.image-style-align-left {
    float: left;
  }

  // ---------------------------------
  // DETAILS
  // ---------------------------------

  details {
    background-color: mc("grey", "50");
    margin: 1rem 2rem;
    border: 1px solid mc("grey", "300");
    border-radius: 7px;

    > p {
      padding-left: 0;
    }

    > summary {
      border-radius: 7px;
      background-color: mc("grey", "50");
      cursor: pointer;
      display: list-item;
      align-items: center;
      padding: 0.4rem 1rem;
      transition: background-color 0.4s ease;

      &:focus {
        outline: none;
        background-color: mc("grey", "100");
      }

      > h1,
      h2,
      h3,
      h4,
      h5,
      h6 {
        width: 95%;
        display: inline-block;

        &:first-child {
          margin-top: 0;
        }

        &:only-child::after {
          display: none;
        }
      }
    }

    &[open] {
      padding: 1rem;

      > summary {
        background-color: mc("grey", "100");
        border-bottom: 1px solid mc("grey", "300");
        border-bottom-left-radius: 0;
        border-bottom-right-radius: 0;
        margin: -1rem -1rem 1rem -1rem;
      }
    }

    @at-root .theme--dark & {
      background-color: mc("grey", "900");
      border-color: mc("grey", "700");

      > summary {
        background-color: mc("grey", "900");
        border-color: mc("grey", "700");
      }

      &[open] > summary {
        background-color: lighten(mc("grey", "900"), 5%);
      }
    }
  }

  // ---------------------------------
  // HIGHLIGHTING
  // ---------------------------------

  mark {
    &.pen-red {
      color: mc("red", "500");
      background-color: initial;
    }
    &.pen-green {
      color: mc("green", "500");
      background-color: initial;
    }
    &.marker-blue {
      background-color: mc("blue", "300");
    }
    &.marker-yellow {
      background-color: mc("yellow", "300");
    }
    &.marker-pink {
      background-color: mc("pink", "300");
    }
    &.marker-green {
      background-color: mc("green", "300");
    }
  }

  .mention {
    background-color: rgba(153, 0, 48, 0.1);
    color: #990030;

    @at-root .theme--dark & {
      color: mc("pink", "500");
    }
  }
}

// ---------------------------------
// COMMENTS
// ---------------------------------

.comments {
  &-container {
    border-radius: 7px;
  }

  &-header {
    color: #fff;
    padding: 8px 20px;
    font-size: 16px;
    font-weight: 500;
    background-color: mc("blue-grey", "500");
    border-radius: 7px 7px 0 0;

    @at-root .theme--dark & {
      background-color: lighten(mc("blue-grey", "900"), 5%);
    }
  }

  &-main {
    background-color: mc("blue-grey", "50");
    border-radius: 0 0 7px 7px;
    padding: 20px;

    @at-root .theme--dark & {
      background-color: darken(mc("grey", "900"), 5%);
    }
  }
}

// ---------------
// RTL FIXES
// Vuetify GH Issue: https://github.com/vuetifyjs/vuetify/issues/6317
// ---------------

.is-rtl {
  .page-col-content.is-page-header {
    @each $size, $width in $grid-breakpoints {
      @media (min-width: $width) {
        @for $n from 0 through 12 {
          &.offset-#{$size}-#{$n} {
            margin-left: 0;
            margin-right: ($n / 12 * 100) * 1%;
          }
        }
      }
    }
  }
}

// ---------------
// PRINT OVERRIDES
// ---------------

@media print {
  .nav-header,
  .v-navigation-drawer,
  .v-btn--fab,
  .page-col-sd,
  .v-tooltip__content {
    display: none !important;
  }

  .layout {
    display: block !important;
  }

  .page-col-content {
    flex-basis: 100% !important;
    flex-grow: 1 !important;
    max-width: 100% !important;
    margin-left: 0 !important;

    > .v-toolbar {
      border: 1px solid mc("grey", "300") !important;
      border-radius: 7px !important;

      & + .v-divider {
        display: none !important;
      }
    }
  }

  .v-main {
    padding: 0 !important;
    font-size: 14px;
    background-color: #fff;
  }

  .v-main .contents {
    color: #000;
    background-color: #fff;

    @at-root .theme--dark & {
      color: #000;
    }

    .prismjs {
      box-shadow: none;
      background-color: #fff;

      @at-root .theme--dark & {
        background-color: #fff;
      }

      > code {
        color: #000;
        box-shadow: none;
        text-shadow: none;
        white-space: pre-wrap !important;
        overflow-wrap: break-word !important;
      }
    }
  }

  .comments-container {
    display: none;
  }

  .page-edit-shortcuts {
    display: none;
  }
}