/* @scope is used to prevent cheatsheet styles from affecting admonition block styling */

.page-cheatmd .content-inner {
  --horizontal-space: 1.5em;
  --vertical-space: 1em;
}

@media (max-width: 600px) {
  .page-cheatmd .content-inner {
    --horizontal-space: 1em;
    --vertical-space: 0.75em;
  }
}

.page-cheatmd .content-inner {
  max-width: 1200px;
}

/* Light mode */

@scope (.page-cheatmd) to (.admonition) {
  :scope .content-inner {

    /* Headings */

    & h1 {
      margin-bottom: var(--vertical-space);
    }

    & h2 {
      font-size: 1.6rem;
      margin: var(--vertical-space) 0;
      column-span: all;
      color: var(--gray700);
      font-weight: 500;
    }

    & h3 {
      font-size: 1.375rem;
      margin: 0 0 1em;
      font-weight: 400;
    }

    & section.h3 {
      min-width: 300px;
      margin: 0;
      padding: 0 0 calc(var(--vertical-space) * 2) 0;
      break-inside: avoid;
    }

    & h3 .text {
      overflow: hidden; /* Clips generated content horizontal rule */
    }

    & h3 .text::after {
      content: "";
      margin-left: calc(var(--horizontal-space) / 2);
      vertical-align: baseline;
      display: inline-block;
      width: 100%;
      height: 1px;
      margin-right: -100%;
      margin-bottom: 5px;
      background-color: var(--codeBorder);
    }

    & h4 {
      font-size: 1rem;
      display: block;
      margin: 0;
      padding: 0.25em var(--horizontal-space);
      font-weight: 400;
      background: var(--gray100);
      color: #567;
      border: solid 1px 1px 0 1px var(--gray100);
    }

    /* Paragraphs */

    & .h2 p {
      margin: 0;
      display: block;
      background: var(--gray50);
      padding: var(--vertical-space) var(--horizontal-space);
    }

    & .h2 p > code {
      color: #eb5757;
      border-radius: var(--borderRadius-sm);
      padding: 0.2em 0.4em;
    }

    /* Code blocks */

    & pre code {
      padding: var(--vertical-space) var(--horizontal-space);
    }

    & .h2 pre {
      margin: 0;
    }

    & .h2 pre + pre {
      margin-top: -1px;
    }

    & pre.wrap {
      white-space: break-spaces;
    }

    @media screen and (max-width: 768px) {
      & pre code {
        border-left-width: 1px !important;
        border-right-width: 1px !important;
      }
    }

    /* Tables */

    & .h2 table {
      display: table;
      box-sizing: border-box;
      width: 100%;
      border-collapse: collapse;
      margin: 0;
    }

    & .h2 th {
      padding: var(--vertical-space) var(--horizontal-space);
      line-height: inherit;
      margin-bottom: -1px;
      vertical-align: middle;
      border-bottom: 1px solid var(--codeBorder);
    }

    & .h2 td {
      padding: var(--vertical-space) var(--horizontal-space);
      border: 0;
      border-bottom: 1px solid var(--codeBorder);
    }

    & .h2 tr:first-child {
      border-top: 1px solid var(--codeBorder);
    }

    & .h2 td code {
      color: #eb5757;
      border-radius: var(--borderRadius-sm);
      padding: 0.2em 0.4em;
    }

    & .h2 thead {
      background-color: var(--gray50);
    }

    & .h2 tbody {
      background-color: var(--codeBackground);
    }

    /* Lists */

    & .h2 :is(ul, ol) {
      margin: 0;
      padding: 0;
    }

    & .h2 li {
      list-style-position: inside;
      padding: 0.5em var(--horizontal-space);
      line-height: 2em;
      vertical-align: middle;
      background-color: var(--codeBackground);
      border-bottom: 1px solid var(--codeBorder);
      margin-top: 0;
    }

    & .h2 :is(ul, ol) + pre code {
      border-top: 0;
    }

    & .h2 li > code {
      color: #eb5757;
      border-radius: var(--borderRadius-sm);
      padding: 0.2em 0.4em;
    }
  }
}

/* Dark mode */

@scope (.dark .page-cheatmd) to (.admonition) {
  :scope .content-inner {

    /* Headings */

    & h2 {
      color: var(--gray200);
    }

    & h4 {
      background: #192f50;
      color: var(--textBody);
      border: 1px solid #192f50;
      border-bottom: 0;
    }

    /* Paragraphs */

    & .h2 p {
      background: var(--gray700);
    }

    /* Tables */

    & .h2 thead {
      background-color: var(--gray700);
    }
  }
}

/* Columns */

.page-cheatmd .content-inner {
  & section.width-50 {
    display: block;
    width: 50%;
    margin: 0;

    & > section > table {
      width: 100%;
    }
  }

  & section:is(.col-2, .col-2-left, .col-3) {
    column-gap: 40px;
  }

  & section.col-2 {
    column-count: 2;
    height: auto;
  }

  & section.col-2-left {
    display: grid;
    grid-template-columns: calc(100% / 3) auto;

    & > h2 {
      grid-column-end: span 2;
    }
  }

  & section.col-3 {
    column-count: 3;
    height: auto;
  }

  & section.list-4 > ul {
    display: flex;
    flex-wrap: wrap;

    & > li {
      flex: 0 0 calc(100% / 4);
    }
  }

  & section.list-6 > ul {
    display: flex;
    flex-wrap: wrap;

    & > li {
      flex: 0 0 calc(100% / 6);
    }
  }

  /* Layout adjustments for smaller viewports. Limited to screen as sufficient width is assumed when printing. */

  @media screen and (max-width: 1400px) {
    & section.col-3 {
      column-count: 2;
    }

    & section.col-2-left {
      display: flex;
      flex-direction: column;
    }
  }

  @media screen and (max-width: 1200px) {
    & section:is(.col-2, .col-3) {
      display: flex;
      flex-direction: column;
    }

    & section.list-6 > ul > li {
      flex: 0 0 calc(100% / 4);
    }
  }

  @media screen and (max-width: 1000px) {
    & section:is(.list-4, .list-6) > ul > li {
      flex: 0 0 calc(100% / 3);
    }
  }

  @media screen and (max-width: 600px) {
    & section:is(.list-4, .list-6) > ul > li {
      flex: 0 0 calc(100% / 2);
    }

    & section.width-50 {
      width: 100%;
    }
  }
}
