@mixin cwui-global-styles {
  @include foundation-global-styles;
  @include foundation-typography;

  html,
  body {
    @include breakpoint(medium down) {
      @include hidpi {
        font-size: 110%;
      }
    }
  }

  body {
    font-family: 'Source Sans Pro', sans-serif;
    min-width: 300px;
    -webkit-text-size-adjust: none;
  }

  p,
  dl,
  ol,
  ul {
    font-size: .9rem;
  }

  dd {
    margin-left: 1.5rem;
  }

  dd+dt {
    margin-top: .3125rem;
  }

  h1 {
    line-height: 1.3;
    @include breakpoint(small only) {
      line-height: 1.2;
    }
  }

  h2 {
    line-height: 1.2;
    margin-bottom: rem-calc(16);

    aside > & {
      font-size: 1rem;
    }
  }

  h3,
  .h3,
  h5,
  .h5,
  h6,
  .h6 {
    color: $black;
  }

  fieldset legend {
    margin: 0 0 rem-calc(8);
    max-width: 100%;
  }

  a:visited {
    color: #5c5950;
  }

  .secondary-content {
    h1,
    h2 {
      font-size: rem-calc(23);
    }
    h3 {
      font-size: rem-calc(19);
    }
    h4 {
      font-size: rem-calc(16);
    }
    h5,
    h6 {
      font-size: rem-calc(14);
    }
  }

  .page-title {
    margin-bottom: rem-calc(20);
    @include breakpoint(large) {
      font-size: rem-calc(44);
    }
  }

  figure {
    display: table;
    margin-bottom: rem-calc(20);
    img {
      display: table-cell;
      margin-bottom: rem-calc(8);
    }
    figcaption {
      caption-side: bottom;
      display: table-caption;
      font-size: rem-calc(13);
    }
    :last-child {
      margin-bottom: 0;
    }
  }

  @include deprecate('4.0.0', 'Use .u-float--right and .u-float--left instead') {
    img.left,
    img.right,
    figure.left,
    figure.right {
      margin-bottom: rem-calc(10);
    }

    img.right,
    figure.right {
      margin-left: rem-calc(10);
    }

    img.left,
    figure.left {
      margin-right: rem-calc(10);
    }
  }

  img.u-float--right,
  img.u-float--left,
  figure.u-float--right,
  figure.u-float--left {
    margin-bottom: rem-calc(10);
  }

  img.u-float--right,
  figure.u-float--right {
    margin-left: rem-calc(10);
  }

  img.u-float--left,
  figure.u-float--left {
    margin-right: rem-calc(10);
  }


  .content-inner {
    @include grid-row();
    background-color: #fff;
    position: relative;

    .row {
      // TODO: This is throwing an error
      @include grid-row($behavior: nest);
    }
  }

  .secondary-content aside {
    margin-bottom: rem-calc(30);
    > :last-child {
      margin-bottom: 0;
    }
  }


  .content-inner {
    display: flex;
    flex-flow: row wrap;
    padding: rem-calc($content-wrapper-padding-top 0 $content-wrapper-padding-bottom);
    @include breakpoint(xlarge) {
      padding-left: rem-calc(15);
      padding-right: rem-calc(15);
    }
  }

  .sidebar {
    order: 1;
    @include breakpoint(xlarge) {
      order: 0;
    }
  }

  // TODO: Don't use [role]
  [role="main"] > .row {
    padding: rem-calc(40) rem-calc(20) rem-calc(40);
    position: relative;
    @include breakpoint(xlarge) {
      padding-left: rem-calc(15);
      padding-right: rem-calc(15);
    }
  }
}