

.pf-c-content {
  // Body
  --pf-c-content--MarginBottom: var(--pf-global--spacer--md);
  --pf-c-content--LineHeight: var(--pf-global--LineHeight--md);
  --pf-c-content--FontSize: var(--pf-global--FontSize--md);
  --pf-c-content--FontWeight: var(--pf-global--FontWeight--normal);

  // this ensures color is not overridden
  --pf-c-content--Color: var(--pf-global--Color--100);

  // h1 - Main title
  --pf-c-content--h1--MarginTop: var(--pf-global--spacer--lg);
  --pf-c-content--h1--MarginBottom: var(--pf-global--spacer--md);
  --pf-c-content--h1--LineHeight: var(--pf-global--LineHeight--sm);
  --pf-c-content--h1--FontSize: var(--pf-global--FontSize--3xl);
  --pf-c-content--h1--FontWeight: var(--pf-global--FontWeight--normal);

  // h2 - Secondary title
  --pf-c-content--h2--MarginTop: var(--pf-global--spacer--lg);
  --pf-c-content--h2--MarginBottom: var(--pf-global--spacer--md);
  --pf-c-content--h2--LineHeight: var(--pf-global--LineHeight--sm);
  --pf-c-content--h2--FontSize: var(--pf-global--FontSize--2xl);
  --pf-c-content--h2--FontWeight: var(--pf-global--FontWeight--normal);

  // h3 - Sub-title
  --pf-c-content--h3--MarginTop: var(--pf-global--spacer--lg);
  --pf-c-content--h3--MarginBottom: var(--pf-global--spacer--md);
  --pf-c-content--h3--LineHeight: var(--pf-global--LineHeight--md);
  --pf-c-content--h3--FontSize: var(--pf-global--FontSize--xl);
  --pf-c-content--h3--FontWeight: var(--pf-global--FontWeight--normal);

  // h4
  --pf-c-content--h4--MarginTop: var(--pf-global--spacer--lg);
  --pf-c-content--h4--MarginBottom: var(--pf-global--spacer--md);
  --pf-c-content--h4--LineHeight: var(--pf-global--LineHeight--md);
  --pf-c-content--h4--FontSize: var(--pf-global--FontSize--lg);
  --pf-c-content--h4--FontWeight: var(--pf-global--FontWeight--semi-bold);

  // h5
  --pf-c-content--h5--MarginTop: var(--pf-global--spacer--lg);
  --pf-c-content--h5--MarginBottom: var(--pf-global--spacer--md);
  --pf-c-content--h5--LineHeight: var(--pf-global--LineHeight--md);
  --pf-c-content--h5--FontSize: var(--pf-global--FontSize--md);
  --pf-c-content--h5--FontWeight: var(--pf-global--FontWeight--semi-bold);

  // h6
  --pf-c-content--h6--MarginTop: var(--pf-global--spacer--lg);
  --pf-c-content--h6--MarginBottom: var(--pf-global--spacer--xs);
  --pf-c-content--h6--LineHeight: var(--pf-global--LineHeight--md);
  --pf-c-content--h6--FontSize: var(--pf-global--FontSize--md);
  --pf-c-content--h6--FontWeight: var(--pf-global--FontWeight--semi-bold);

  // Small text
  --pf-c-content--small--MarginBottom: var(--pf-global--spacer--md);
  --pf-c-content--small--LineHeight: var(--pf-global--LineHeight--md);
  --pf-c-content--small--FontSize: var(--pf-global--FontSize--sm);
  --pf-c-content--small--Color: var(--pf-global--Color--200);
  --pf-c-content--small--FontWeight: var(--pf-global--FontWeight--semi-bold);

  // Links
  --pf-c-content--a--Color: var(--pf-global--link--Color);
  --pf-c-content--a--TextDecoration: var(--pf-global--link--TextDecoration);
  --pf-c-content--a--hover--Color: var(--pf-global--link--Color--hover);
  --pf-c-content--a--hover--TextDecoration: var(--pf-global--link--TextDecoration--hover);

  // Blockquote
  --pf-c-content--blockquote--Padding: var(--pf-global--spacer--md);
  --pf-c-content--blockquote--FontWeight: var(--pf-global--FontWeight--light);
  --pf-c-content--blockquote--Color: var(--pf-global--Color--200);
  --pf-c-content--blockquote--BorderLeftColor: var(--pf-global--BorderColor--light);
  --pf-c-content--blockquote--BorderLeftWidth: var(--pf-global--BorderWidth--lg);

  // Lists
  --pf-c-content--ul--PaddingLeft: var(--pf-global--spacer--lg);
  --pf-c-content--ol--MarginTop: var(--pf-global--spacer--md);
  --pf-c-content--ol--MarginLeft: var(--pf-global--spacer--lg);
  --pf-c-content--ul--MarginTop: var(--pf-global--spacer--md);
  --pf-c-content--ul--MarginLeft: var(--pf-global--spacer--lg);
  --pf-c-content--ul--nested--MarginTop: var(--pf-global--spacer--sm);
  --pf-c-content--ul--nested--MarginLeft: var(--pf-global--spacer--sm);
  --pf-c-content--ul--ListStyle: var(--pf-global--ListStyle);
  --pf-c-content--li--MarginTop: var(--pf-global--spacer--sm);
  --pf-c-content--dl--ColumnGap: var(--pf-global--spacer--2xl);
  --pf-c-content--dl--RowGap: var(--pf-global--spacer--md);
  --pf-c-content--dt--FontWeight: var(--pf-global--FontWeight--semi-bold);
  --pf-c-content--dt--MarginTop: var(--pf-global--spacer--md);

  font-size: var(--pf-c-content--FontSize);
  line-height: var(--pf-c-content--LineHeight);

  & * {
    color: var(--pf-c-content--Color);
  }

  a {
    color: var(--pf-c-content--a--Color);
    text-decoration: var(--pf-c-content--a--TextDecoration);

    &:hover {
      color: var(--pf-c-content--a--hover--Color);
      text-decoration: var(--pf-c-content--a--hover--TextDecoration);
    }
  }

  li + li {
    margin-top: var(--pf-c-content--li--MarginTop);
  }

  p,
  dl,
  ol,
  ul,
  blockquote,
  small,
  pre,
  table {
    &:not(:last-child) {
      // This variable name doesn't reflect the selector, it's an excpection to the variable system.
      margin-bottom: var(--pf-c-content--MarginBottom);
    }
  }

  ol,
  ul {
    // This variable name doesn't reflect the selector, it's an excpection to the variable system.
    padding-left: var(--pf-c-content--ul--PaddingLeft);
  }

  h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
    margin: 0;
  }

  h1 {
    margin-bottom: var(--pf-c-content--h1--MarginBottom);
    font-size: var(--pf-c-content--h1--FontSize);
    font-weight: var(--pf-c-content--h1--FontWeight);
    line-height: var(--pf-c-content--h1--LineHeight);

    &:not(:first-child) {
      margin-top: var(--pf-c-content--h1--MarginTop);
    }
  }

  h2 {
    margin-bottom: var(--pf-c-content--h2--MarginBottom);
    font-size: var(--pf-c-content--h2--FontSize);
    font-weight: var(--pf-c-content--h2--FontWeight);
    line-height: var(--pf-c-content--h2--LineHeight);

    &:not(:first-child) {
      margin-top: var(--pf-c-content--h2--MarginTop);
    }
  }

  h3 {
    margin-bottom: var(--pf-c-content--h3--MarginBottom);
    font-size: var(--pf-c-content--h3--FontSize);
    font-weight: var(--pf-c-content--h3--FontWeight);
    line-height: var(--pf-c-content--h3--LineHeight);

    &:not(:first-child) {
      margin-top: var(--pf-c-content--h3--MarginTop);
    }
  }

  h4 {
    margin-bottom: var(--pf-c-content--h4--MarginBottom);
    font-size: var(--pf-c-content--h4--FontSize);
    font-weight: var(--pf-c-content--h4--FontWeight);
    line-height: var(--pf-c-content--h4--LineHeight);

    &:not(:first-child) {
      margin-top: var(--pf-c-content--h4--MarginTop);
    }
  }

  h5 {
    margin-bottom: var(--pf-c-content--h5--MarginBottom);
    font-size: var(--pf-c-content--h5--FontSize);
    font-weight: var(--pf-c-content--h5--FontWeight);
    line-height: var(--pf-c-content--h5--LineHeight);

    &:not(:first-child) {
      margin-top: var(--pf-c-content--h5--MarginTop);
    }
  }

  h6 {
    margin-bottom: var(--pf-c-content--h6--MarginBottom);
    font-size: var(--pf-c-content--h6--FontSize);
    font-weight: var(--pf-c-content--h6--FontWeight);
    line-height: var(--pf-c-content--h6--LineHeight);

    &:not(:first-child) {
      margin-top: var(--pf-c-content--h6--MarginTop);
    }
  }

  small {
    display: block;
    margin-bottom: var(--pf-c-content--small--MarginBottom);
    font-size: var(--pf-c-content--small--FontSize);
    line-height: var(--pf-c-content--small--LineHeight);
    color: var(--pf-c-content--small--Color);
  }

  blockquote {
    padding: var(--pf-c-content--blockquote--Padding);
    font-weight: var(--pf-c-content--blockquote--FontWeight);
    color: var(--pf-c-content--blockquote--Color);
    border-left: var(--pf-c-content--blockquote--BorderLeftWidth) solid var(--pf-c-content--blockquote--BorderLeftColor);
  }

  ol {
    margin-top: var(--pf-c-content--ol--MarginTop);
    margin-left: var(--pf-c-content--ol--MarginLeft);
  }

  ul {
    margin: 0;
    margin-top: var(--pf-c-content--ul--MarginTop);
    margin-left: var(--pf-c-content--ul--MarginLeft);
    list-style: var(--pf-c-content--ul--ListStyle);

    ul {
      margin-top: var(--pf-c-content--ul--nested--MarginTop);
      margin-left: var(--pf-c-content--ul--nested--MarginLeft);
    }
  }

  dl {
    display: grid;
    grid-template-columns: 1fr;

    @media screen and (min-width: $pf-global--breakpoint--sm) {
      grid-template: auto / auto 1fr;
      grid-column-gap: var(--pf-c-content--dl--ColumnGap);
      grid-row-gap: var(--pf-c-content--dl--RowGap);
    }
  }

  dt {
    font-weight: var(--pf-c-content--dt--FontWeight);

    &:not(:first-child) {
      margin-top: var(--pf-c-content--dt--MarginTop);

      @media screen and (min-width: $pf-global--breakpoint--sm) {
        margin-top: 0;
      }
    }

    @media screen and (min-width: $pf-global--breakpoint--sm) {
      grid-column: 1;
    }
  }

  dd {
    @media screen and (min-width: $pf-global--breakpoint--sm) {
      grid-column: 2;
    }
  }
}
