Blockquote: Bubble

@charset 'UTF-8';

.blockquote-footer {
  margin-top: 0;
}

blockquote cite,
.blockquote-footer {
  &:before {
    content: none;
  }
}

.vd-blockquote-bubble {
  position: relative;
  margin: ($spacer * 1.5) 0;
  padding: ($spacer * 1.45) ($spacer * 1.8);
  background: $dark;
  border-radius: 10px;
  font-size: $font-size-base;
  line-height: 1.3;

  &:before {
    content: none;
  }

  &:after {
    content: "";
    display: block;
    position: absolute;
    top: 100%;
    right: 40px;
    width: 41px;
    height: 18px;

    @include media-breakpoint-up(sm) {
      right: 80px;
    }

    @include vd-background-image-icon($vd-blockquote-pointer, $dark, 41, 18);
  }

  p {
    font-style: italic;
    font-family: $headings-font-family;
    color: $vd-primary-light;
  }

  img {
    position: absolute;
    right: -50px;
    bottom: $spacer * 0.8;
    width: 80px;
    height: auto;

    @include media-breakpoint-up(sm) {
      right: -75px;
      width: 120px;
    }
  }

  .blockquote-footer {
    font-size: $font-size-base;
    color: $white;
  }
}

blockquote,
.blockquote {
  position: relative;
  padding-left: $spacer * 4;
  font-size: $font-size-lg;
  color: $gray-500;

  &:before {
    content: "“";
    position: absolute;
    top: 0;
    left: 0;
    font-family: $font-family-serif;
    font-size: 3rem;
    line-height: 1.3;
    font-weight: 700;
    color: $link-color;
  }

  p:last-of-type {
    margin-bottom: $spacer * 0.4;
  }
}

/**
 * Apply the bootstrap style on native tags
 */
blockquote cite {
  display: block;
  font-size: 80%; // back to default font-size
  color: $gray-500;
}

.blockquote-reverse {
  &:after {
    right: auto;
    left: 40px;
  }
}

.vd-blockquote-bubble-media {
  margin-right: $spacer * 2.8;
  padding-right: $spacer * 2;

  @include media-breakpoint-up(sm) {
    margin-right: $spacer * 5;
    margin-left: $spacer;
    padding-right: $spacer * 4.5;
  }
}