/// Provides styles for the ContentWrapper element.
/// @group layout
/// @author Richard Davis
/// @example
///   // A content wrapper to apply styles to child elements.
///   <div class="ContentWrapper">
///   </div>
///   // A content wrapper with max width to apply styles to child elements.
///   <div class="ContentWrapper--restricted">
///   </div>
.ContentWrapper {
  margin: spacing-size(3) spacing-size(2);

  &--restricted {
    @extend .ContentWrapper;

    max-width: (viewport-size("L") - 20px);

    @include breakpoint(#{(viewport-size("L") - 20px)}) {
      margin-left: auto;
      margin-right: auto;
    }
  }

  h1,
  h2,
  h3,
  h4,
  h5 {
    @extend %default-heading-styling;
  }

  h1 {
    @extend %heading-1-style;
  }

  h2 {
    @extend %heading-2-style;
  }

  h3 {
    @extend %heading-3-style;
  }

  h4 {
    @extend %heading-4-style;
  }

  h5 {
    @extend %heading-5-style;
  }

  p {
    @extend %default-body-text-styling;
  }

  ul {
    @extend %default-ulist-styling;
  }

  ol {
    @extend %default-olist-styling;
  }

  blockquote {
    @extend %default-blockquote-styling;
  }

  code {
    @extend %default-code-styling;
  }
}