// sass-lint:disable no-vendor-prefixes

long-quote > blockquote,
%longquote,
.longquote {
  margin-bottom: $spacer-md;
  padding: 2px 0;
  text-align: center;

  > p {
    @extend %heading-font-heavy;
    display: inline;
    box-shadow: $spacer-xxs 0 0 $brand-primary, -$spacer-xxs 0 0 $brand-primary;
    background-color: $quote-bg-color;
    padding: $spacer-xxs;
    color: $quote-color;
    font-size: $font-size-sm;

    box-decoration-break: clone;
    -webkit-box-decoration-break: clone;

    &:lang(de) {
      &::before {
        content: "„";
      }

      &::after {
        content: "“";
      }
    }

    &:lang(en) {
      &::before {
        content: "“";
      }

      &::after {
        content: "”";
      }
    }
  }
}

%longquote__zigzag,
.longquote__zigzag {
  @extend %zigzag;

  display: block;
  margin: 0 auto $spacer-base;
  width: 80%;
}

%longquote__author,
.longquote__author {
  @extend %heading-font-bold;

  display: block;
  margin-top: $spacer-xs;
  text-transform: uppercase;
  font-size: $font-size-base;
}

%longquote__role,
.longquote__role {
  @extend %body-font-italic;

  font-size: $font-size-base;
}

%longquote__avatar,
.longquote__avatar {
  display: block;
  margin-top: $spacer-xs;
}

@media screen and (min-width: $grid-breakpoint-md) {
  %longquote,
  .longquote {
    > p {
      font-size: $font-size-lg;
    }
  }
}