@use "sass:math";

/**
 * Classic mode blockquote
 */
blockquote,
.blockquote {
  position: relative;
  margin: 70px auto 24px !important;
  font-family: var(--wp--preset--font-family--secondary);
  text-align: center;

  @include mq(small) {
    max-width: math.div($flexy-container, 2);
  }
}

blockquote::before,
.blockquote::before {
  content: open-quote;
  position: absolute;
  left: calc(50% - 16px);
  font-family: var(--wp--preset--font-family--secondary) !important;
  font-weight: bold;
  font-size: 60px !important;
  line-height: 1px;

  @include mq(x-small) {
    font-size: 70px !important;
  }

  @include mq(medium) {
    font-size: 80px !important;
  }

  [lang*="fr"] & {
    top: -20px;
    left: 50%;
    transform: translateX(-50%);
  }

  [lang*="fa-IR"] & {
    top: -40px;
  }
}

blockquote::after,
.blockquote::after {
  content: close-quote;
  position: absolute !important;
  overflow: hidden !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  border: 0 !important;
  clip: rect(1px, 1px, 1px, 1px) !important;
}

.blockquote.is-grey {
  color: var(--wp--preset--color--grey-light);
  border-color: var(--wp--preset--color--grey-light);
}

.blockquote.is-white {
  color: var(--wp--preset--color--white);
  border-color: var(--wp--preset--color--white);
}

.blockquote[class*="align-"] {
  margin-top: 24px !important;
}

.blockquote.align-start::before,
.blockquote.align-end::before {
  display: none;
}

.blockquote.align-start {
  margin-left: 0;
  text-align: left;

  .rtl & {
    margin-right: 0;
    margin-left: auto !important;
    text-align: right;
  }
}

.blockquote.align-end {
  margin-right: 0;
  text-align: right;

  .rtl & {
    margin-right: auto !important;
    margin-left: 0;
    text-align: left;
  }
}

.blockquote.align-end p {
  line-height: 1.2 !important;
}

blockquote p,
.blockquote p {
  position: relative;
  margin-bottom: 20px;
  font-weight: bold;
  font-size: var(--wp--preset--font-size--heading-3) !important;
  line-height: 1.2 !important;

  &:last-of-type {
    margin-bottom: 0;
  }
}

.blockquote.is-medium p {
  font-size: var(--wp--preset--font-size--heading-4) !important;
}

.blockquote.is-small p {
  font-size: var(--wp--preset--font-size--heading-5) !important;
  line-height: 1.2 !important;
}

.blockquote[class*="align-"] p:first-of-type::before,
.blockquote[class*="align-"] p:last-of-type::after {
  display: inline-block;
  font-size: var(--wp--preset--font-size--heading-3);
}

.blockquote[class*="align-"] p:first-of-type::before {
  content: open-quote;

  [lang*="fr"] & {
    margin-right: .2em;
  }
}

.blockquote[class*="align-"] p:last-of-type::after {
  content: close-quote;

  [lang*="fr"] & {
    margin-left: .2em;
  }
}

.blockquote.align-start p:first-of-type::before {
  text-indent: -7px;

  @include mq(medium) {
    text-indent: -15px;
  }
}

.rtl .blockquote.align-end p:first-of-type::before {
  right: 0;
}

.blockquote.align-end p:last-of-type::after {
  position: absolute;
}

blockquote cite,
.blockquote cite {
  display: inline-block;
  font-style: normal;
  font-size: var(--wp--preset--font-size--heading-5) !important;
  font-weight: bold !important;
  line-height: 40px !important;
  padding-bottom: 24px;
}

.blockquote.is-lined:not([class*="align"]) cite::after {
  content: "";
  display: block;
  margin: 8px auto 0;
  max-width: 200px;
  height: 6px;
  background-color: var(--wp--preset--color--black);

  @include mq(medium) {
    height: 8px;
  }
}

.blockquote.is-medium cite {
  font-size: var(--wp--preset--font-size--heading-6) !important;
}

.blockquote.is-small cite {
  font-size: var(--wp--preset--font-size--small) !important;
  line-height: 40px !important;

  @include mq(medium) {
    &::after {
      height: 6px;
    }
  }
}

.blockquote.is-capitalised p {
  text-transform: uppercase;
}

.blockquote.align-start cite,
.blockquote.align-end cite {
  border-bottom: none;
  line-height: 40px !important;
}

.ltr .blockquote.align-start.is-lined {
  padding-left: 35px;
  border-left: 8px solid;
}

.rtl .blockquote.align-start.is-lined,
.ltr .blockquote.align-end.is-lined {
  padding-right: 35px;
  border-right: 8px solid;
}

.page-template-templates .blockquote.align-start {
  margin-left: auto;
}

.page-template-templates .blockquote.align-end {
  margin-right: auto;
}

.rtl .blockquote.align-end.is-lined {
  padding-left: 35px;
  border-left: 8px solid;
}

.blockquote[class*="align-"].is-small p:first-of-type::before,
.blockquote[class*="align-"].is-small p:last-of-type::after {
  display: inline-block;
  font-size: var(--wp--preset--font-size--heading-5);
}

.section > .container .blockquote,
.section > .container blockquote {
  margin-top: 70px;
}

.blockquote.is-white.is-lined cite::after {
  background-color: var(--wp--preset--color--white);
}

.blockquote.is-grey.is-lined cite::after {
  background-color: var(--wp--preset--color--grey-light);
}
