/* ==========================================================================
 * Content
 * ========================================================================== */

.mds-c-content {
  @mixin mds-m-text--size-med;

  color: var(--mds-t-text-color--primary);
  max-width: 100%;
  overflow-wrap: break-word;

  &:not(:last-child) {
    margin-bottom: var(--mds-d-spacing--xl);
  }

  &--condensed {
    p,
    ul,
    ol {
      max-width: 32rem;
    }
  }

  h1 {
    @mixin mds-m-heading--size-xxl;
  }

  h2 {
    @mixin mds-m-heading--size-xl;
  }

  h3 {
    @mixin mds-m-heading--size-lg;
  }

  h4 {
    @mixin mds-m-heading--size-med;
  }

  h5 {
    @mixin mds-m-heading--size-sm;
  }

  h6 {
    @mixin mds-m-heading--size-xs;
  }

  ol,
  ul {
    padding-left: var(--mds-d-spacing--lg);
  }

  ol {
    li {
      list-style: decimal;
    }
  }

  ul {
    li {
      list-style: disc;
    }
  }

  blockquote {
    border-left: var(--mds-d-spacing--xs) solid
      var(--mds-t-border-color--secondary);
    margin: 0;
    padding-left: var(--mds-d-spacing--lg);
  }

  figcaption {
    font-size: var(--mds-d-font-size--sm);
    font-style: italic;
  }

  sub,
  sup {
    font-size: 75%;
    line-height: 0;
    position: relative;
    vertical-align: baseline;
  }

  sub {
    bottom: -0.25em;
  }

  sup {
    top: -0.5em;
  }

  table {
    @mixin mds-m-text--size-med;

    border-collapse: collapse;
    display: table;
    width: 100%;
  }

  caption {
    border-bottom: 1px solid var(--mds-t-border-color--secondary);
    margin-bottom: var(--mds-d-spacing--xxs);
    padding-bottom: var(--mds-d-spacing--xs);
    text-align: inherit;
  }

  th {
    border-bottom: 1px solid var(--mds-t-border-color--secondary);
    font-weight: var(--mds-d-font-weight--bold);
    padding: var(--mds-d-spacing--sm);
    text-align: left;
  }

  td {
    border-bottom: 1px solid var(--mds-t-border-color--secondary);
    padding: var(--mds-d-spacing--sm);
  }

  tr,
  th,
  td {
    vertical-align: middle;
  }

  td,
  th {
    &:last-child {
      text-align: right;
    }
  }

  hr {
    background-image: linear-gradient(
      90deg,
      var(--mds-d-color-brand--secondary) 0%,
      var(--mds-d-color-brand--primary) 100%
    );
    border: 0;
    box-sizing: content-box; /* 1 */
    height: 0; /* 1 */
    height: 2px;
    margin-bottom: var(--mds-d-spacing--xl);
    margin-top: var(--mds-d-spacing--xl);
    overflow: visible; /* 2 */
  }

  b,
  strong {
    font-weight: var(--mds-d-font-weight--semibold);
  }

  small {
    font-size: 80%;
  }

  h1,
  h2,
  h3,
  h4,
  h5,
  h6,
  p,
  ul,
  ol,
  dl,
  blockquote,
  figure,
  figure > img,
  pre,
  table {
    &:not(:first-child) {
      margin-top: var(--mds-d-spacing--lg);
    }

    &:not(:last-child) {
      margin-bottom: var(--mds-d-spacing--lg);
    }
  }

  :any-link {
    color: currentcolor;
    text-decoration: underline;

    &:focus-visible {
      outline: 2px solid var(--mds-d-color-brand--primary);
    }
  }
}