// ---- Block quotes -----------------------------------------------------------
//
// Scope element based selector to elements, that do not carry a
// class attribute, to prevent reverting styles for all non-default quotes.
//

blockquote:not([class]),
.blockquote {
  position: relative;
  margin: 0 0 $spacer-md;

  &,
  & > p {
    @extend %body-font-italic;
    line-height: $paragraph-line-height;
    font-size: $font-size-sm;
  }

  @media screen and (min-width: $grid-breakpoint-md) {
    &::before {
      display: block;
      position: absolute;
      top: 0;
      bottom: 0;
      left: -$spacer-lg;
      background-color: $quote-color;
      width: 10px;
      content: "";
    }
  }
}