// ==========================================================================
// Quote
// ==========================================================================

// Global blockquote styles
blockquote {
  margin: 0;
  padding-left: 10px;
  position: relative;
  border-left: 4px solid $gray-lighter;
  text-align: left;

  cite {
    font-style: normal;
    font-size: $font-base;
  }

  .quote-author {
    margin-bottom: 0;
    display: block;
    font-weight: $font-bold;
    line-height: 1;
  }

  .quote-author-meta {
    margin-top: $pad;
    display: block;
    color: $text-color-light;
    line-height: 1.4;
  }

  .learn-more {
    margin-top: $pad-sm;
  }

  img {
    max-width: 70px;
    margin-right: $pad-lg;
    margin-top: -8px;
    float: left;
    border-radius: $border-radius-circle;
  }

  // Quotes on a dark background
  &.quote-dark {
    color: $white;

    p {
      color: $white;
    }

    .quote-author {
      color: $white;
    }

    .quote-author-meta {
      color: fade-out($white, .5);
    }
  }
}

// Regular blockquote large
.quote-lg {
  padding-left: $pad-xl;
  border-left: 5px solid fade-out($purple-light, .5);
  font-size: $font-xl;
  font-weight: 200;

  .quote-author {
    font-size: $font-lg;
  }
  .quote-author-mega {
    font-size: $font-base;
  }
}

// Regular blockquote small
.quote-sm {
  padding-left: $pad-lg;
  border-left: 3px solid fade-out($purple-light, .5);
  font-size: $font-base;
  font-weight: 200;
}

// Pullquotes
[class^="pullquote"] {
  border: none;

  p {
    min-height: 40px;
  }

  .quote-author {
    text-transform: uppercase;
    letter-spacing: 2px;
    color: $brand-primary;
  }

  // Quote icons
  &:before,
  &:after {
    content: "";
    position: absolute;
    background-repeat: no-repeat;
    @media (max-width: $mobile) {
      display: none;
    }
  }

  &:before {
    left: 0;
  }

  &:after {
    right: 0;
  }
}

$icon-width-lg: 74px;
$icon-height-lg: 44px;
$icon-width-sm: 60px;
$icon-height-sm: 36px;

// Pullquote large
.pullquote-lg {
  padding: $pad-xl $icon-width-lg*1.25 $pad-xl $icon-width-lg*1.5;
  font-size: 27px;
  font-weight: 100;
  line-height: 1.2;
  @media (max-width: $mobile) {
    padding: 0 1em;
  }

  &:before,
  &:after {
    width: $icon-width-lg;
    height: $icon-height-lg;
  }

  &:before {
    @include retina-image(#{$image-path}/blockquote/open, $icon-width-lg $icon-height-lg);
  }

  &:after {
    bottom: $icon-height-lg *3;
    @include retina-image(#{$image-path}/blockquote/close, $icon-width-lg $icon-height-lg);
  }

  &.quote-long {
    font-size: 20px;
  }
}

// Pullquote small
.pullquote-sm {
  padding: $pad-lg $icon-width-sm*1.25 $pad-lg $icon-width-sm*1.5;
  font-size: $font-xl;
  @media (max-width: $mobile) {
    padding: 0 1em;
  }

  &:before,
  &:after {
    width: $icon-width-sm;
    height: $icon-height-sm;
  }

  &:before {
    @include retina-image(#{$image-path}/blockquote/open-sm, $icon-width-sm $icon-height-sm);
  }

  &:after {
    bottom: $icon-height-sm *3;
    @include retina-image(#{$image-path}/blockquote/close-sm, $icon-width-sm $icon-height-sm);
  }
}