/* Global styles for all variants, provides all styles for Copy Right variant */
.single-msg {
  width: 100%;
  .single-msg__outer-wrapper {
    @include container;
    position: relative;
    padding: 15vw 5vw;

    @include breakpoint($screen-md) {
      display: -webkit-flex;
      display: flex;
      padding: 60px calc(1 * #{gutter()});
    }
  }
  .single-msg__image {
    img {
      display: block;
      width: 100%;
      height: auto;
    }

    @include span(12 no-gutters wide);

    @include breakpoint($screen-md) { 
      @include span(4 no-gutters wide);
    }
  }
  .single-msg__copy_wrapper {
    @include span(12 no-gutters wide);

    @include breakpoint($screen-md) { 
      @include span(8 no-gutters wide);
    }

    .single-msg__copy {
      padding: 30px;
      width: 100%;

      @include breakpoint($screen-md) {
        height: 100%;
      }
    }
    @include breakpoint($screen-md) {
      &.bg--no-colour {
        .single-msg__copy {
          padding: 0 30px;
        }
      }
    }
  }

  /* padding options */
  // negative top 
  &.single-msg--negative-top {
    overflow: visible;
    .single-msg__outer-wrapper {
      padding-top: 0;
      margin-top: -35px;
      @include breakpoint($screen-md) {
        margin-top: -60px;
      }
      // recalculate height and align copy with image
      .single-msg__copy_wrapper {
        margin-top: 0;
      }
    }
  }
  // negative bottom
  &.single-msg--negative-bottom {
    // move next section up 
    + .paragraph { 
      padding-top: 0;
    }
    .single-msg__outer-wrapper {
      padding-bottom: 0;
      //leave a bit of space underneath text
      .single-msg__body {
        padding-bottom: 5px;
      }
    }
  }
  // no top padding
  &.single-msg--no-top-padding {
    .single-msg__outer-wrapper {
      padding-top: 0;
      .single-msg__copy_wrapper {
        margin-top: 0;
      }
    }
  }
  // no bottom padding
  &.single-msg--no-bottom-padding {
    .single-msg__outer-wrapper {
      padding-bottom: 0;
      //leave a bit of space underneath text
      .single-msg__body {
        padding-bottom: 5px;
      }
    }
  }
  // no top or bottom padding
  &.single-msg--no-padding {
    .single-msg__outer-wrapper {
      padding-top: 0;
      padding-bottom: 0;
      .single-msg__copy_wrapper {
        margin-top: 0;
      }
    }
  }
  // padding options feature variation fixes
  // top
  &.single-msg--negative-top,
  &.single-msg--no-top-padding {
    &.single-msg--feature-copy-right,
    &.single-msg--feature-copy-left { 
      .single-msg__copy_wrapper {
        margin-top: calc(-4 *#{gutter()});
        @include breakpoint($screen-lg) {
          margin-top: 0;
        }
      }
    }
  }
  // none
  &.single-msg--no-padding {
    &.single-msg--feature-copy-right,
    &.single-msg--feature-copy-left { 
      .single-msg__copy_wrapper {
        margin-top: calc(-4 *#{gutter()});
        @include breakpoint($screen-lg) {
          margin-top: 0;
        }
      }
    }
  }

  /* Copy Left variation */
  &.single-msg--copy-left {
    @include breakpoint($screen-md) {
      .single-msg__image {
        float: right;
        order: 2;
      }
    }
  }

  /* - - - - Featured Variations - - - - */

  /* Feature Copy Left and Right variation */
  &.single-msg--feature-copy-right,
  &.single-msg--feature-copy-left  {

    .single-msg__outer-wrapper {
      @media (min-width: $screen-md) and (max-width: $screen-md-max) {
        display: block;
      }
    }

    .single-msg__image {
      float: left;
      width: 100%;
      margin: 0;

      @include breakpoint($screen-lg) {
        @include span(6 no-gutters wide);     
      }  
    }

    .single-msg__copy_wrapper {
      width: 100%;

      @include breakpoint($screen-md) {
        &.bg--no-colour {
          .single-msg__copy {
            padding: 30px;

            @include breakpoint($screen-lg) {
              padding: 0 30px;
            }
          }
        }
      }

      @include breakpoint($screen-lg) {
        margin: 0;

        @include span(6 no-gutters wide);
      }
    } 
  }

  /* Feature Copy Left variation */
  &.single-msg--feature-copy-left {
    .single-msg__image {
      @include breakpoint($screen-lg) {
        float: right;
        margin-left: 0;
        order: 2;
      }
    }
  }

  /* Copy Only - Copy Centred variation */
  &.single-msg--copy-only {
    .single-msg__image {
      display: none;
    }
    .single-msg__copy_wrapper {
      background-color: transparent;
      .single-msg__copy {
        padding: 0;

        /* Remove margins from the last/only element in the body copy,
          as to not mess up our vertical centering */
        .single-msg__body :last-child {
          margin-bottom: 0;
        } 
      }

      @include breakpoint($screen-md) {
        @include span(10);
        @include push(1);
        position: relative;
        left: auto;
        height: auto; //Does this need to match the height of the img version?
        margin-top: 0;
        
        .single-msg__copy {
          padding: 0 30px;
        }
      }

      @include breakpoint($screen-lg) {
        @include span(8);
        @include push(2);
      }
    }
  }
}