overrides.scss

/* Override Primer styles
------------------------------------------------------------------------------*/

.markdown-body {
  h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
    font-family: $font-mktg;
    font-weight: $font-weight-semibold;
    padding-top: $spacer-3;
  }
}

// NB: Note that there's also overlapping styling in "article.scss"
.markdown-body ol > li {
  padding: $spacer-2 0 $spacer-2 $spacer-7;
  border: 0;

  &:before {
    top: 2px;
    font-size: $spacer-3;
    width: $spacer-4;
  }

  p:not(:first-child) {
    margin-top: 15px;
  }

  .extended-markdown {
    margin-top: 15px;
  }
}

.markdown-body ul ul,
.markdown-body ul ol,
.markdown-body ol ol,
.markdown-body ol ul {
  margin-top: 15px;
  margin-bottom: 15px;
}

// needs specificity to override
.markdown-body .lead-mktg p {
  color: var(--color-auto-gray-9);
}

.extended-markdown p {
  margin: 0;
}

.extended-markdown p:not(:first-child) {
  margin-top: 15px;
}

.extended-markdown.note pre {
  background: none;
  padding: 10px 10px 10px 0;
  margin-bottom: 0;
}

.extended-markdown.note pre code {
  color: var(--color-text-primary);
}

.product-callout p,
.contributor-callout p {
  margin: 0;
}

// Largely overwritten in tables.scss
.markdown-body table {
  display: table;
  table-layout: fixed;
  line-height: 1.5;
}

/* Getting Started and Popular Articles sections in article layout */
.markdown-body div.featured-links {
  padding-bottom: 30px;
}

.markdown-body div.featured-links-heading {
  padding-top: 24px;
}

.markdown-body div.featured-links p.link-with-intro-intro {
  margin-bottom: 5px;
}

.markdown-body div.featured-links h4.link-with-intro-title {
  margin-top: 0;
}

/* code styles */
pre .redbox {
  border: 2px solid var(--color-auto-red-5);
  padding: 2px;
  border-radius: 2px;
  margin-right: 2px;
}

pre .greenbox {
  border: 2px solid var(--color-auto-green-5);
  padding: 2px;
  border-radius: 2px;
  margin-right: 2px;
}

pre .bluebox {
  border: 2px solid var(--color-auto-blue-5);
  padding: 2px;
  border-radius: 2px;
  margin-right: 2px;
}

/* Helpfulness survey override */
:checked + .x-radio-label {
  background: var(--color-auto-blue-5);

  svg {
    fill: var(--color-auto-inverse);
  }
}

.markdown-body li img {
  max-width: calc(100% - 32px);
}

.markdown-body img {
  max-height: 600px;
}