.style-guide {

  $colour-1: $grey;
  $colour-2: $default-primary-colour;
  $colour-3: $blue;
  $colour-4: $green;
  $colour-5: $purple;
  $colour-6: $yellow;
  $colour-7: $red;
  $colour-8: $light-grey;

  /* --------------------------------

  Patterns

  -------------------------------- */
  .boxes {
    padding: 0;
    margin: 0;
  }

  .boxes > li,
  .box {
    /* this is the container of various design elements - i.e. the 2 logo of the branding section */
    border: 1px solid $light-grey;
    border-radius: 3px;
    background: #fff;
    box-shadow: 0 1px 1px rgba(#000, 0.05);
    padding: 6px;
    list-style: none;
  }

  /* --------------------------------

  Typography

  -------------------------------- */

  h1,
  h2 {
    color: $text-color;
  }

  h1 {
    font-size: 2.4rem;
    font-weight: 600;
    line-height: $line-height-base - 0.3;
    margin: 0 0 0.4em;

    @media (min-width: $screen-sm-min) {
      font-size: 3.2rem;
    }

    @media (min-width: $screen-md-min) {
      font-size: 4rem;
    }
  }

  h2 {
    font-weight: bold;
    text-transform: uppercase;
    margin: 1em 0;

    @media (min-width: $screen-sm-min) {
      font-size: 1.8rem;
      margin: 1em 0 1.4em;
    }
  }

  section > h2::before {
    /* number before each section title */
    color: darken($gray-lighter, 15%);
  }

  p {
    font-size: 1.4rem;
    line-height: $line-height-base;

    a {
      color: $primary-colour;
      text-decoration: underline;
    }

    @media (min-width: $screen-sm-min) {
      font-size: 1.6rem;
    }
  }

  /* --------------------------------
  Icons
  -------------------------------- */

  .icons {
    ul {
      li {
        width: 32px;
        height: 32px;
        display: inline-block;
        margin: 1em;

        svg {
          width: 32px;
          height: 32px;
          fill: desaturate(lighten($grey, 33), 7);
        }
      }
    }
  }

  .container {
    > h1 {
      text-align: center;
      margin: 3em 0;
    }

    @media (min-width: $screen-sm-min) {
      padding-top: 40px;
      width: 95%;

      > h1 {
        position: absolute;
        top: 0;
        left: 50%;
        line-height: 55px;
        width: 400px;
        margin: 0 0 0 -200px;
        font-size: 2.6rem;
        z-index: 20;
        color: #fff;
      }
    }
  }

  section {
    margin: 3em 0;

    @include clearfix;

    &:nth-of-type(1) h2::before {
      content: '1. ';
    }

    &:nth-of-type(2) h2::before {
      content: '2. ';
    }

    &:nth-of-type(3) h2::before {
      content: '3. ';
    }

    &:nth-of-type(4) h2::before {
      content: '4. ';
    }

    &:nth-of-type(5) h2::before {
      content: '5. ';
    }

    &:nth-of-type(6) h2::before {
      content: '6. ';
    }

    &:nth-of-type(7) h2::before {
      content: '7. ';
    }

    &:nth-of-type(8) h2::before {
      content: '8. ';
    }

    &:nth-of-type(9) h2::before {
      content: '9. ';
    }

    &:nth-of-type(10) h2::before {
      content: '10. ';
    }

    &:nth-of-type(11) h2::before {
      content: '11. ';
    }

    &:nth-of-type(12) h2::before {
      content: '12. ';
    }

    &:nth-of-type(13) h2::before {
      content: '13. ';
    }

    &:nth-of-type(14) h2::before {
      content: '14. ';
    }

    @media (min-width: $screen-sm-min) {
      margin: 0 0 5em;
    }

    @media (min-width: $screen-lg-min) {
      width: 48%;
      float: left;
      margin: 0 4% 4em 0;

      &:nth-of-type(2n) {
        margin-right: 0;
      }
    }
  }

  /* xBranding section - basic style */

  .branding {
    .boxes > li {
      margin-bottom: 1em;
    }

    img {
      display: block;
      width: 100%;
    }

    ul:last-of-type {
      padding-top: 0.6em;

      li {
        display: inline-block;
        margin-right: 1em;
      }

      li:nth-of-type(2n+1) img {
        width: 90px;
        height: 90px;
        border-radius: 1em;
      }

      li:nth-of-type(2n+2) img {
        width: 32px;
        height: 32px;
        border-radius: 0;
      }
    }

    @media (min-width: $screen-sm-min) {
      .boxes > li {
        width: 49%;
        float: left;
        margin: 0 2% 2em 0;

        &:nth-of-type(2n) {
          margin-right: 0;
        }
      }

      ul:last-of-type {
        clear: left;

        li {
          margin-right: 3em;
        }
      }
    }
  }

  /* xColor section - basic style */

  .colors {
    li {
      text-align: center;
      width: 48%;
      float: left;
      margin: 0 4% 1em 0;

      &:nth-of-type(2n) {
        margin-right: 0;
      }
    }

    .color-swatch {
      position: relative;
      width: 100%;
      padding: 50% 0;

      &::before,
      &::after {
        /* lighter and darker color shades of the same swatch */
        content: '';
        position: absolute;
        bottom: 0;
        width: 50%;
        height: 20%;
      }

      &::before {
        left: 0;
      }

      &::after {
        right: 0;
      }
    }

    h6 {
      margin-bottom: 0;
      text-transform: capitalize;
    }

    p {
      margin: 0;
      text-transform: uppercase;
    }

    @mixin swatch-colour($sc) {
      background: $sc;

      &::before {
        background: lighten($sc, 3.5%);
      }

      &::after {
        background: darken($sc, 3.5%);
      }
    }

    li:nth-of-type(1) .color-swatch {
      @include swatch-colour($colour-1);
    }

    li:nth-of-type(2) .color-swatch {
      @include swatch-colour($colour-2);
    }

    li:nth-of-type(3) .color-swatch {
      @include swatch-colour($colour-3);
    }

    li:nth-of-type(4) .color-swatch {
      @include swatch-colour($colour-4);
    }

    li:nth-of-type(5) .color-swatch {
      @include swatch-colour($colour-5);
    }

    li:nth-of-type(6) .color-swatch {
      @include swatch-colour($colour-6);
    }

    li:nth-of-type(7) .color-swatch {
      @include swatch-colour($colour-7);
    }

    li:nth-of-type(8) .color-swatch {
      @include swatch-colour($colour-8);
    }

    @media (min-width: $screen-sm-min) {
      li {
        width: 23%;
        float: left;
        margin: 0 1.25% 1em 0;

        &:nth-of-type(2n) {
          margin-right: 1.25%;
        }

        &:nth-of-type(4n) {
          margin-right: 0;
        }
      }
    }
  }

  .header {
    .site-header,
    .app-header {
      &:nth-child(n+2) {
        margin-top: $base-spacing;
      }
    }
  }

  .typography .box,
  .buttons .box,
  .icons .box,
  .form .box {
    padding: 1em;

    @media (min-width: $screen-sm-min) {
      .box {
        padding: 2em;
      }
    }
  }

  .accordion {
    @include dark-module;

    position: relative;
    font-size: 0.9em;
  }

  /* xTypography section - basic style */

  .typography {
    h1::before {
      content: 'Aa - ';
      color: $primary-colour;
    }
  }

  .buttons {
    .box:first-of-type {
      border-bottom-left-radius: 0;
      border-bottom-right-radius: 0;
    }

    .box:last-of-type {
      margin-top: -1px;
      border-top-left-radius: 0;
      border-top-right-radius: 0;
    }

    button {
      margin: 0.4em;
    }

    @media (min-width: $screen-md-min) {
      button {
        margin: 1em;
      }
    }
  }

  /* xForm section - basic style */

  .form {
    fieldset > *,
    .box > div {
      margin: 1em;
    }

    fieldset > input[type=text],
    .input-group,
    .select {
      float: left;
    }

    fieldset > input[type=text],
    .input-group {
      width: 200px;
    }

    .select {
      display: inline-block;
      width: auto;
    }
  }

  .no-csstransitions .select::after {
    display: none;
  }

  .label {
    margin: 1em 0.5em 1em 1em;
  }

  .breadcrumbs {
    margin: 1em;
  }

  .side .sidebar {
    max-width: 210px;
  }

  .rev {
    @include dark-module;
  }
}