// Base styles
$image-width--md: 362px;
$image-width--lg: 500px;

.bg-graphics {
  display: none;

  @include breakpoint($screen-md) {
    display: block;
    position: absolute;
    z-index: 1;

    img, picture {
      margin: 0;
      display: block;
      height: inherit;
      width: inherit;
    }
  }
}

.cr-body {
  p, span, h1, h2, h3, h4, h5, a, button {
    position: relative;
    z-index: 2;
  }

  .view-mode-bg-graphic-{
    &bottom-left,
    &bottom-right,
    &top-left,
    &top-right {
      @extend .bg-graphics;
      height: auto;
      width: $image-width--md;
    
      @include breakpoint($screen-lg) {
        width: $image-width--lg;
      }
    }

    &bottom-left {
      bottom: 0;
      left: 0;
    }

    &bottom-right {
      bottom: 0;
      right: 0;
    }

     &top-left {
      top: 0;
      left: 0;
     }

    &top-right {
      top: 0;
      right: 0;
    }

    &fullheight-fullwidth {
      @extend .bg-graphics;
      width: 100%;
      height: auto;
      top: 0;
      left: 0;
    }
  }
}

.single-msg {
  .single-msg__copy_wrapper {
    position: relative;
    @include breakpoint($screen-md) {
      position: absolute;
      overflow: hidden;
    }
  }
  
  /* Tweaks for fullwidth layouts to ensure graphic can extend to edge */
  &.single-msg--copy-only,
  &.single-msg--copy-only-large {
    .single-msg__copy_wrapper {
      overflow: visible;

      @include breakpoint($screen-md) {
        .view-mode-bg-graphic-fullheight-fullwidth {
          top: -60px;
          width: 100vw;
          transform: translateX(-50%);
          left: 50%;
        }

        .view-mode-bg-graphic-top-right {
          top: -60px;
          left: calc(100% + calc((100vw - 100%) / 2) - #{$image-width--lg});
        }

        .view-mode-bg-graphic-top-left {
          top: -60px;
          left: auto;
          right: calc(100% + calc((100vw - 100%) / 2) - #{$image-width--lg});
        }

        .view-mode-bg-graphic-bottom-right {
          bottom: -60px;
          left: calc(100% + calc((100vw - 100%) / 2) - #{$image-width--lg});
        }

        .view-mode-bg-graphic-bottom-left {
          bottom: -60px;
          left: auto;
          right: calc(100% + calc((100vw - 100%) / 2) - #{$image-width--lg});
        }
      }
    }
  }
}

.paragraph--full-height-single-image-single-copy .fhsisc__text-wrapper,
.paragraph--fixed-ratio-image .fixed-ratio-image__text-wrapper,
.paragraph--copy-video .copy-video__text-wrapper,
.paragraph--copy-copy .copy-copy__text-wrapper {
  position: relative;
}