@value breakpoint-sm from 'pageflow-scrolled/values/breakpoints.module.css';

.figure {
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  padding-bottom: 1.375rem;
  color: var(--palette-color);
}

.design-largeCentered {
  text-align: center;
  align-items: center;
}

.text {
  --quote-indent: var(--theme-quote-indent, 0);
  --quote-large-mark-font-size: var(--theme-quote-large-mark-font-size, 2em);

  width: 100%;
  box-sizing: border-box;
  margin: 0;
  padding: 1em 0 var(--theme-quote-text-padding-bottom, 0.5em) 0;
}

.design-largeHanging .text,
.design-hanging .text {
  --quote-indent: var(--theme-quote-indent, 1em);
}

.text p {
  margin: 1.375rem 0 0 var(--quote-indent);
}

.text br {
  display: none;
}

.centerRagged .text p {
  text-align: center;
  margin-right: var(--quote-indent);
}

.text p:first-child {
  position: relative;
}

.text p:first-child::before,
.text p:last-child::after {
  font-family: var(--theme-quote-mark-font-family);
  font-weight: var(--theme-quote-mark-font-weight, bold);
  opacity: var(--theme-quote-mark-opacity, 0.5);
  color: var(--theme-quote-mark-color);
  width: var(--theme-quote-mark-width);
}

.text p:first-child::before {
  content: var(--theme-quote-left-mark, "“");
}

.maskedMark .text p:first-child::before {
  mask: var(--theme-quote-left-mark-mask-image) 50% 50% no-repeat;
  background-color: var(--palette-color, var(--theme-quote-mark-color));
  color: transparent;
}

.text p:last-child::after {
  content: var(--theme-quote-right-mark, '”');
}

.design-largeHanging .text p:first-child::before,
.design-hanging .text p:first-child::before {
  position: absolute;
  right: calc(100% + var(--theme-quote-hanging-mark-spacing, 0.05em));
}

.centerRagged.design-hanging .text p:first-child::before {
  position: static;
  padding-right: var(--theme-quote-hanging-mark-spacing, 0.05em);
  margin-left: calc(-1ch - var(--theme-quote-hanging-mark-spacing, 0.05em));
}

.design-largeCentered .text p:first-child::before,
.design-largeHanging .text p:first-child::before {
  font-size: var(--quote-large-mark-font-size);
  line-height: 1em;
}

.design-largeCentered .text p:first-child::before {
  font-size: var(--quote-large-mark-font-size);
  margin-top: var(--theme-quote-large-mark-margin-top, -0.1em);
  margin-bottom: var(--theme-quote-large-mark-margin-bottom, -0.3em);
  display: block;
}

.design-largeHanging .text p:first-child::before {
  top: var(--theme-quote-large-mark-top, -0.2em);
}

.design-largeCentered .text p:last-child::after,
.design-largeHanging .text p:last-child::after {
  display: none;
}

.design-hanging .text p:first-child::after {
  padding-left: var(--theme-quote-hanging-mark-spacing, 0.05em);
}

.attribution {
  min-width: var(--theme-quote-attribution-min-width);
}

.attribution p:first-child {
  position: relative;
}

.attribution p:first-child::before {
  content: var(--quote-attribution-prefix, "—");
  position: absolute;
  right: 100%;
  margin-right: 0.5em;
}

.design-largeCentered .attribution p:first-child::before {
  display: none;
}

.attribution p {
  margin: 0;
}

.attribution p:first-child {
  font-weight: var(--theme-quote-attribution-first-line-font-weight, bold);
}

@media screen and breakpoint-sm {
  .design-largeHanging .text {
    --quote-indent: var(--theme-quote-indent, 1.5em);
    --quote-large-mark-font-size: var(--theme-quote-large-mark-font-size, 2.5em);
  }
}
