//============================================================
// Blockquotes
//============================================================
$blockquotes: (
  types: (
    'info': (
      'color': $blockquote-info-color,
      'bg-color': $blockquote-info-bgcolor,
      'border-color': $blockquote-info-border-color,
      'accent-border': $blockquote-info-accent-border,
      'base64': "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' x='0px' y='0px' width='100%25' height='100%25' viewBox='0 0 56 56' style='enable-background:new 0 0 56 56;' xml:space='preserve'%3E%3Cg fill='#{$blockquote-info-color-escaped}'%3E%3Cpath d='M27.781,21.171c0.811,0,1.513-0.3,2.105-0.898s0.89-1.324,0.89-2.175s-0.294-1.578-0.882-2.183s-1.292-0.906-2.113-0.906 s-1.528,0.302-2.121,0.906s-0.889,1.332-0.889,2.183s0.296,1.576,0.889,2.175S26.96,21.171,27.781,21.171z M28,0 C12.536,0,0,12.536,0,28s12.536,28,28,28s28-12.536,28-28S43.464,0,28,0z M28,54C13.641,54,2,42.359,2,28S13.641,2,28,2 s26,11.641,26,26S42.359,54,28,54z M31.566,39.338c-0.283-0.135-0.502-0.339-0.653-0.613c-0.152-0.273-0.229-0.606-0.229-0.999 V24.395l-0.228-0.252l-7.449,0.437v1.226c0.304,0.033,0.641,0.112,1.011,0.235s0.646,0.252,0.828,0.386 c0.243,0.18,0.446,0.417,0.608,0.714s0.243,0.641,0.243,1.032v9.772c0,0.414-0.065,0.747-0.197,0.999s-0.36,0.445-0.685,0.579 c-0.183,0.079-0.4,0.135-0.653,0.168c-0.254,0.033-0.512,0.062-0.775,0.084V41h9.608v-1.226c-0.264-0.033-0.518-0.089-0.761-0.168 C31.992,39.528,31.77,39.438,31.566,39.338z'/%3E%3C/g%3E%3C/svg%3E"
    ),
    'alert': (
      'color': $blockquote-alert-color,
      'bg-color': $blockquote-alert-bgcolor,
      'border-color': $blockquote-alert-border-color,
      'accent-border': $blockquote-alert-accent-border,
      'base64': "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='130px' height='130px' viewBox='0 0 132 130'%3E%3Cg stroke='none' stroke-width='1' fill='#{$blockquote-alert-color-escaped}'%3E%3Cpath d='M66,0 C29.58474,0 0,29.1364864 0,65 C0,100.863514 29.58474,130 66,130 C102.41526,130 132,100.863514 132,65 C132,29.1364864 102.41526,0 66,0 Z M66,5.90909091 C99.17262,5.90909091 126,32.3299955 126,65 C126,97.6700045 99.17262,124.090909 66,124.090909 C32.82738,124.090909 6,97.6700045 6,65 C6,32.3299955 32.82738,5.90909091 66,5.90909091 Z M62.4375,33.4232955 C61.5375,33.4232955 61.21875,33.9403409 61.21875,34.53125 L61.21875,74.4176136 C61.21875,75.3039773 61.8375,75.6178977 62.4375,75.6178977 L69.28125,75.6178977 C70.18125,75.6178977 70.5,75.0085227 70.5,74.4176136 L70.5,34.53125 C70.5,33.6448864 69.88125,33.4232955 69.28125,33.4232955 L62.4375,33.4232955 Z M62.4375,86.6051136 C61.5375,86.6051136 61.21875,87.1221591 61.21875,87.7130682 L61.21875,95.46875 C61.21875,96.3551136 61.8375,96.5767045 62.4375,96.5767045 L69.5625,96.5767045 C70.4625,96.5767045 70.78125,96.0596591 70.78125,95.46875 L70.78125,87.7130682 C70.78125,86.8267045 70.1625,86.6051136 69.5625,86.6051136 L62.4375,86.6051136 Z'%3E%3C/path%3E%3C/g%3E%3C/svg%3E"
    ),
    'tip': (
      'color': $blockquote-tip-color,
      'bg-color': $blockquote-tip-bgcolor,
      'border-color': $blockquote-tip-border-color,
      'accent-border': $blockquote-tip-accent-border,
      'base64': "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' x='0px' y='0px' width='100%25' height='100%25' viewBox='0 0 36 56' style='enable-background:new 0 0 36 56;' xml:space='preserve'%3E%3Cg fill='#{$blockquote-tip-color-escaped}'%3E%3Cpath d='M24,46H12c-0.553,0-1,0.448-1,1c0,0.553,0.447,1,1,1h12c0.553,0,1-0.447,1-1C25,46.448,24.553,46,24,46z M22,50h-8 c-0.553,0-1,0.448-1,1c0,0.553,0.447,1,1,1h8c0.553,0,1-0.447,1-1C23,50.448,22.553,50,22,50z M19,54h-2c-0.553,0-1,0.447-1,1 s0.447,1,1,1h2c0.553,0,1-0.447,1-1S19.553,54,19,54z M36,19C36,8.507,27.941,0,18,0S0,8.507,0,19 c0,7.919,4.592,14.7,11.116,17.555C11.048,36.69,11,36.838,11,37v2c0,0.553,0.447,1,1,1h12c0.553,0,1-0.447,1-1v-2 c0-0.162-0.048-0.31-0.116-0.445C31.408,33.7,36,26.919,36,19z M23,35.142V38H13v-2.858C6.614,32.909,2,26.532,2,19 C2,9.611,9.163,2,18,2s16,7.611,16,17C34,26.532,29.386,32.909,23,35.142z M24,42H12c-0.553,0-1,0.448-1,1c0,0.553,0.447,1,1,1h12 c0.553,0,1-0.447,1-1C25,42.448,24.553,42,24,42z'/%3E%3C/g%3E%3C/svg%3E"
    )
  )
);

.#{$prefix}blockquote {
  display: flex;
  align-items: center;
	position: relative;
	padding-left: $blockquote-content-offset;
	background-color: $blockquote-default-bg-color;
	border-radius: $theme-border-radius;
  min-height: 7rem;
  margin-top: 1rem;
  margin-bottom: 1rem;
  @include box-shadow($bq-sh-x, $bq-sh-y, $bq-sh-blur, $bq-sh-spread, $bq-sh-color);

  &:before {
    display: block;
    position: absolute;
    z-index: 1;
    top: -1px;
    bottom: -1px;
    left: -1px;
    width: 0.25rem;
    background-color: darken($blockquote-default-bg-color,10%);
    content: '';
  }

  > .#{$prefix}blockquote-addon {
    position: absolute;
    display: block;
    text-align: center;
    top: $blockquote-addon-offset + 0.4rem;
    left: $blockquote-addon-offset + 0.3rem;
    width: $blockquote-addon-dimensions;
    height: $blockquote-addon-dimensions;
    line-height: 1;

    background-size: contain;
    background-position: center center;
    background-repeat: no-repeat;

    > .#{$prefix}blockquote-icon {
      font-size: 4.1rem;
      color: $theme-text-color;
      height: 100%;
      line-height: 1;
      display: none;
    }
  }

  > .#{$prefix}blockquote-content {
    padding: $blockquote-padding;
    padding-left: 0;
    width: calc(100% - #{$blockquote-padding});
    width: -webkit-calc(100% - #{$blockquote-padding});

    > .#{$prefix}blockquote-content-header {
      display: none; // temporarily hide headings. content authors seem to just leave it blank
      font-size: 1rem;
      font-weight: 700;
      margin: 0;
      margin-bottom: 0.2rem;
      text-transform: uppercase;
    }

    > .#{$prefix}blockquote-content-body {
      color: $theme-text-color;
      font-size: 1rem;
      font-family: $theme-font-family;
      font-weight: 300;
      line-height: $theme-line-height;
      * {
        &:last-child {
          margin-bottom: 0;
        }
      }

      p {
        margin-top: 0;
        margin-bottom: 0;
      }

      > ul {
        padding-left: 1.2rem;
      }
    }
  }
}

@each $type in map-keys(map-get($blockquotes, types)) {
  .#{$prefix}blockquote-#{$type} {
    $bq-bg-color: map-deep-get($blockquotes, 'types', $type, 'color');

    border-left: none;
    background-color: map-deep-get($blockquotes, 'types', $type, 'bg-color');
    border: 1px solid map-deep-get($blockquotes, 'types', $type, 'border-color');
    border-bottom-color: darken(map-deep-get($blockquotes, 'types', $type, 'border-color'),5%);
    fill: map-deep-get($blockquotes, 'types', $type, 'color');

    &:before {
      background-color: map-deep-get($blockquotes, 'types', $type, 'accent-border');
    }

    > .#{$prefix}blockquote-addon {
      background-image: url(map-deep-get($blockquotes, 'types', $type, 'base64'));
    }

    > .#{$prefix}blockquote-content {
      > .#{$prefix}blockquote-content-header {
        color: map-deep-get($blockquotes, 'types', $type, 'color');
      }
      > .#{$prefix}blockquote-content-body * {
        color: map-deep-get($blockquotes, 'types', $type, 'color') !important;
      }
    }
  }
}