/**
 * Admonition
 */

.admonition {
  background-color: #55555505;
  background-image: url("../icons/circle-info-000000.svg");
  background-position: 20px 42px;
  background-repeat: no-repeat;
  background-size: 24px 24px;
  border-color: #555555aa;
  border-style: dashed;
  border-width: 2px;
  display: flex;
  flex-direction: column;
  margin: 20px 0;
  padding: 40px 20px 40px 60px;
  row-gap: 1em;
}

.admonition.admonition--caution {
  background-image: url("../icons/triangle-exclamation-000000.svg");
  background-color: #a0721e05;
  border-color: #a0721eaa;
}

.admonition.admonition--danger {
  background-image: url("../icons/fire-000000.svg");
  background-color: #a61f1f05;
  border-color: #a61f1faa;
}

.admonition.admonition--info {
  background-image: url("../icons/info-000000.svg");
  background-color: #3b5dbb05;
  border-color: #3b5dbbaa;
}

.admonition.admonition--tip {
  background-image: url("../icons/lightbulb-000000.svg");
  background-color: #669a5205;
  border-color: #669a52aa;
}

/**
 * External link
 */

.external-link {
  background-image: url("../icons/up-right-from-square-fbb829.svg");
  background-position: calc(100% - 4px) center;
  background-repeat: no-repeat;
  background-size: 12px;
  column-gap: 1ch;
  display: inline-flex;
  padding-right: 20px;
  word-break: break-all;
}

.formatted-content {
  display: flex;
  flex-direction: column;
  row-gap: 1em;

  blockquote {
    border-left: 8px solid var(--color-border);
    margin: 0;
    padding: 24px;
  }

  blockquote p:last-child a:only-child {
    align-items: flex-end;
    display: flex;
    flex-direction: column;
    margin-top: 1em;
    width: 100%;
  }

  dd,
  dl {
    margin: 0;
  }

  dd {
    line-height: 1.5;
  }

  dl {
    display: grid;
    grid-template-columns: auto 1fr;
    row-gap: 1em;
    margin: 1em 0;

    dd {
      grid-column: 2;
    }

    dt {
      font-weight: bold;
      grid-column: 1;
    }
  }

  h1,
  h2,
  h3 {
    font-weight: bold;
    line-height: 1.5;
    position: relative;
    text-wrap: balance;
  }

  h1 {
    margin-top: 1em;

    @media screen and (max-width: 1023px) {
      font-size: 2em;
    }
    @media screen and (min-width: 1024px) {
      font-size: 3em;
    }
  }

  h2 {
    margin-top: 1em;

    @media screen and (max-width: 1023px) {
      font-size: 1.5em;
    }
    @media screen and (min-width: 1024px) {
      font-size: 2em;
    }
  }

  h3 {
    margin-top: 1em;
  }

  h1 + h1,
  h1 + h2,
  h2 + h2,
  h2 + h3 {
    margin-top: 0;
  }

  iframe {
    background-color: #eee;
    box-shadow: 8px 8px #00000033;
    border: 1px solid var(--color-border);
    padding:20px;
  }

  img {
    margin: 24px 0;
    max-width: 100%;
    width: 100%;
  }

  img + em {
    align-items: center;
    column-gap: 1ch;
    display: flex;
    flex-direction: row;
    font-size: var(--font-size-smaller);
    justify-content: center;
    margin-top: -24px;
    text-align: center;
  }

  ol:not([class]),
  ul:not([class]) {
    display: flex;
    flex-direction: column;
    line-height: 1.5;
    padding-left: 4ch;
    row-gap: 0.4em;

    li {
      ol,
      ul {
        margin-top: 1em;
      }
    }
  }

  p {
    line-height: 1.5;
  }

  p:empty {
    display: none;
  }

  pre {
    display: table;
    font-family: var(--font-family-monospace);
    outline: 1px solid var(--color-border);
    overflow-x: auto;
    table-layout: fixed;
    width: 100%;
  }

  code:not([class]) {
    background-color: var(--color-inline-code-background);
    display: inline-flex;
    font-family: var(--font-family-monospace);
    font-size: var(--font-size-smaller);
    max-width: 100vw;
    position: relative;
  }

  table,
  th,
  td {
    border: 1px solid #333;
  }

  table {
    border-collapse: collapse;
    line-height: 1.5;
    overflow-x: auto;
    max-width: calc(100vw - 40px);
    table-layout: fixed;
    width: 100%;

    th,
    td {
      padding: 10px;
      overflow: auto;
    }
  }
}

@media screen and (max-width: 1023px) {
  .formatted-content h1:first-of-type {
    margin-top: 1em;
  }
}

/**
 * Renderables
 */

.fenced-renderable:not(.fenced-renderable--rendered) {
  opacity: 0;
}

.fenced-renderable.fenced-renderable--rendered {
  display: table;
  margin: 1em 0;
  width: 100%;
  outline: 1px solid var(--color-border);
  overflow-x: auto;
  table-layout: fixed;
}

.fenced-renderable__scene {
  overflow-x: scroll;
  overflow-y: hidden;
  padding: 24px;
  text-align: center;
}
