/* .main-header svg { */
/*   width: 26px; */
/*   height: 26px; */
/*   fill: var(--subhead); */
/*   position: relative; */
/*   top: 2px; */
/*   margin-right: 3px; */
/* } */

.changelog {
  margin-top: 3em;
  /* .main-header svg { */
  /*   width: 26px; */
  /*   height: 26px; */
  /*   fill: var(--subhead); */
  /*   position: relative; */
  /*   top: 2px; */
  /*   margin-right: 3px; */
  /* } */
  section {
    display: flex;
    gap: 3em;
    scroll-margin-top: calc(63px + 16px);
    .version-section {
      position: sticky;
      top: 70px;
      flex-shrink: 0;
      height: 60px;
      width: 140px;
      h4 {
        a {
          text-decoration: none;
          font-weight: bold;
          &:hover {
            text-decoration: none;
            opacity: 0.7;
          }
        }
      }
    }
    .changes-section {
      ul li {
        margin: 0.5em 0;
        opacity: 0.8;
      }
      h4 {
        &:first-of-type {
          margin-top: 0;
        }
      }
    }
    @media (max-width: 900px) {
      flex-direction: column;
      justify-content: stretch;
      gap: 1em;
      .version-section {
        background: var(--bg-color);
        width: unset;
        z-index: 1;
        top: 60px;
        padding: 10px 0;
        height: unset;
      }
    }
  }

  /* Copied from docs.css */
  a {
    font-weight: 500;
    color: var(--text-color);
    text-decoration: underline;
    text-decoration-color: var(--link-border-bottom);
    text-underline-offset: 2px;
    &:hover {
      text-decoration-color: var(--link-border-bottom-hover);
      color: var(--text-color);
    }
    &.external-link::after {
      content: "";
      display: inline-block;
      margin-left: 2px;
      margin-bottom: -1px;
      width: 12px;
      height: 12px;
      opacity: 0.5;
      mask-repeat: no-repeat;
      mask-position: center;
      mask-size: contain;
      mask-image: url("/assets/icons/octicons/link-external-16.svg");
      background-color: var(--text-color);
      -webkit-mask-repeat: no-repeat;
      -webkit-mask-position: center;
      -webkit-mask-size: contain;
      -webkit-mask-image: url("/assets/icons/octicons/link-external-16.svg");
    }
  }

  /* Copied from docs.css */
  code {
    font-family: Menlo, Consolas, monospace;
    /* color: var(--code-color); */
    /* color: rgba(55, 53, 47, 0.9); */
  }

  *:not(pre) > code {
    font-size: 0.85em;
    font-weight: 500;
    background-color: var(--pre-bg-color);
    border-radius: 4px;
    border: 1px solid var(--pre-border-color);
    padding: 1px 5px;
    margin: 0 1px;
  }
}