//
// Quotes custom
// --------------------------------------------------

// Reset styles
blockquote {
  font: inherit;
  padding: 0;
  margin: 0;
  border: 0;
  q {
    &:before,
    &:after {
      content: none;
    }
  }
  cite {
    font-style: normal;
  }
}

// Quote default
.quote-default {
  position: relative;
  padding: 43px 0 43px 6px;
  @extend %text-bigger;
  color: $gray-darker;

  svg {
    fill: #eaebee;
  }

  .quote-open,
  .quote-close {
    position: absolute;
    left: 30px;
  }

  .quote-open {
    top: 0;
  }

  .quote-close {
    bottom: 0;
  }
}

.quote-default-offset {
  margin-top: 15px;
  margin-bottom: 15px;

  // Large ≥992px
  @include media-breakpoint-up(lg) {
    margin-top: 0;
    margin-bottom: 0;
  }
}

// Quote bordered
.quote-bordered {
  $border-color: $porcelain;
  $quote-open-color: $primary;
  $quote-padding: 37px 22px 29px 34px;
  $tail-center: 56px;
  $tail-width: 20px;
  $tail-height: 10px;
  padding-top: 14px;

  .quote-body {
    position: relative;
    padding-bottom: $tail-height;
  }

  .quote-footer p {
    font-style: italic;
  }

  h6{
    font-size: 18px;
  }

  .quote-footer cite {
    font-size: 16px;
    font-weight: 700;
  }

  .quote-body-inner {
    position: relative;
    padding: $quote-padding;
    border-style: solid;
    border-width: 1px 1px 0 1px;
    border-color: $border-color;

    &:before,
    &:after {
      content: '';
      position: absolute;
      bottom: -$tail-height;
      height: $tail-height;
      border-style: solid;
      border-color: $border-color;
      background-color: transparent;
    }

    &:before {
      left: $tail-width / 2;
      width: $tail-center - $tail-width / 2;
      border-width: 1px 1px 0 0;
      transform: skew(45deg);
      transform-origin: 100% 100%;
    }

    &:after {
      right: $tail-width / 2;
      width: calc(100% - #{$tail-center - $tail-width / 2 + $tail-height  * 2});
      border-width: 1px 0 0 1px;
      transform: skew(-45deg);
      transform-origin: 0 100%;
    }
  }

  .quote-open {
    position: absolute;
    top: -10px;
    left: nth($quote-padding, 4);
    z-index: 2;

    > svg {
      fill: $quote-open-color;
    }
  }

  .quote-footer {
    padding-left: 25px;
  }

  cite {
    font-size: 17px;
    font-weight: 900;
    line-height: 21px;
    color: $black;
  }

  // Offsets
  * + .quote-footer {
    margin-top: 9px;
  }

  cite + p {
    margin-top: 0;
  }
}

// Quote minimal bordered
.quote-minimal-bordered {
  position: relative;
  padding: 16px 0 26px;
  text-align: center;

  q {
    font: 400 20px $font-family-base;
    font-style: italic;
    color: $abbey;

    &:before,
    &:after {
      content: '"';
    }
  }

  &:before,
  &:after {
    content: '';
    position: absolute;
    left: 50%;
    width: 270px;
    height: 1px;
    transform: translateX(-50%);
    background: -moz-linear-gradient(left, rgba(255, 255, 255, 0) 0%, rgba($gray-light, 1) 50%, rgba(0, 0, 0, 0) 100%);
    background: -webkit-linear-gradient(left, rgba(255, 255, 255, 0) 0%, rgba($gray-light, 1) 50%, rgba(0, 0, 0, 0) 100%);
    background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, rgba($gray-light, 1) 50%, rgba(0, 0, 0, 0) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#00ffffff', endColorstr='#00000000', GradientType=1);

  }

  &:before {
    top: 0;
  }

  &:after {
    bottom: 0;
  }

  @include media-breakpoint-up(md) {
    q {
      font-size: 24px;
      line-height: 1.55;
    }
  }

  @include media-breakpoint-up(xl) {
    q {
      font-size: 30px;
    }
  }
}

// Quote minimal
.quote-minimal {
  q {
    font-size: 18px;
    font-weight: 300;
    font-style: italic;
    line-height: 1.2;
    color: $black;
  }

  cite {
    font: 700 15px $font-family-sec;
    line-height: 1.1;
    color: $black;
  }

  .caption {
    color: $body-color;
  }

  // Mods
  &.quote-minimal-inverse {
    q {
      color: $white;
    }

    cite {
      color: $white;
    }

    .caption {
      color: $primary;
    }
  }

  // Offsets
  * + .caption {
    margin-top: 0;
  }

  * + .quote-meta {
    margin-top: 20px;
  }
}

// Quote strict
.quote-strict {
  q,
  cite {
    color: $black;
  }

  q {
    font-size: 19px;
    font-weight: 300;
    font-style: italic;
    line-height: 28px;
  }

  cite {
    display: block;
    font: 700 16px/21px $font-family-sec;
    text-transform: uppercase;
  }

  // Offsets
  * + cite {
    margin-top: 20px;
  }

  // Mods
  &.quote-strict-inverse {
    q,
    cite {
      color: $white;
    }
  }
}

// Quote simple
.quote-simple {

  .quote-body {
    padding-left: 75px;
    position: relative;

    &:before{
      content: '';
      position: absolute;
      display: inline-block;
      width: 50px;
      height: 36px;
      top: 10px;
      left: 0;
      opacity: 0.5;
      background: url("../images/icon-quote.png") no-repeat top left;
    }
  }

  q {
    font-size: 22px;
    line-height: (28/22);
    font-weight: 700;
    font-style: italic;
    color: $brand-ebony-clay;
  }
}

// Quote vertical
.quote-vertical {
  max-width: 360px;
  margin-left: auto;
  margin-right: auto;
  text-align: center;

  q {
    font-size: 16px;
    line-height: (30 / 19);
    font-weight: 300;
    color: rgba($black, .5);
  }

  cite {
    display: block;
    color: $black;
    font: 400 14px/18px $font-family-sec;
  }

  .quote-open {
    > svg {
      fill: $primary;
    }
  }

  .quote-image {
    &,
    > img {
      border-radius: 600px;
    }

    > img {
      width: auto;
    }
  }

  // Offsets
  * + cite {
    margin-top: 16px;
  }

  * + .caption {
    margin-top: 0;
  }

  * + .quote-text {
    margin-top: 25px;
  }

  * + .quote-meta {
    margin-top: 25px;
  }

  // Mods
  &.quote-vertical-inverse {
    q {
      color: $white;
    }

    .caption {
      color: $primary;
    }

    cite {
      color: $white;
    }

    .quote-open {
      > svg {
        fill: $primary;
      }
    }
  }
}

// Quote review
.quote-review {
  cite {
    font: 700 14px/18px $font-family-sec;
    text-transform: uppercase;
    letter-spacing: -.025em;
    color: $black;
  }

  .quote-header {
    @include spacing(10px, 2px);
    > * {
      display: inline-block;
      vertical-align: middle;
    }
  }

  // Offsets
  * + .quote-body {
    margin-top: 10px;
  }
}

* + .quote-review {
  margin-top: 35px;
}

@include media-breakpoint-up(md) {
  .quote-minimal {
    q {
      font-size: 22px;
    }

    cite {
      font-size: 19px;
    }

    // Offsets
    * + .quote-meta {
      margin-top: 37px;
    }
  }

  * + .quote-review {
    margin-top: 45px;
  }
}

@include media-breakpoint-up(lg) {
  .quote-minimal {
    q {
      font-size: 24px;
    }
  }

  .quote-vertical {
    q {
      font-size: 19px;
    }
  }
}

.quote-wrap-1 {
  // Medium ≥768px
  @include media-breakpoint-up(md) {
    padding-right: 70px;
  }

  // Extra large ≥1200px
  @include media-breakpoint-up(xl) {
    padding-left: 50px;
  }
}

* + .quote-wrap-1 { margin-top: 30px; }
.quote-wrap-1 + * { margin-top: 30px;}

// Medium ≥768px
@include media-breakpoint-up(md) {
  * + .quote-wrap-1 { margin-top: 50px; }
  .quote-wrap-1 + * { margin-top: 50px; }
}