/**
 * Blockquote
 * @define blockquote
 */

@use 'sass:map';
@use '@ecl/vanilla-layout-grid/mixins/breakpoints';

// Exposed variables
$theme: null !default;
$blockquote: null !default;

.ecl-blockquote,
%ecl-blockquote {
  background-color: map.get($theme, 'color', 'white');
  border-inline-start: map.get($blockquote, 'border-width') solid
    map.get($blockquote, 'border-color');
  border-radius: map.get($blockquote, 'border-radius');
  box-shadow: map.get($blockquote, 'shadow');
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: map.get($blockquote, 'padding');
}

.ecl-blockquote__citation,
%ecl-blockquote__citation {
  color: map.get($blockquote, 'quote', 'color');
  font: map.get($blockquote, 'quote', 'font');
  margin: 0;
  max-width: var(--max-w);
  quotes: '\201C' '\201D';

  &::before {
    content: open-quote;
  }

  &::after {
    content: close-quote;
  }

  &[lang='bg'],
  &[lang='cs'],
  &[lang='de'],
  &[lang='et'],
  &[lang='sk'],
  &[lang='sl'],
  &[lang='lt'] {
    quotes: '„' '“';
  }

  &[lang='hr'],
  &[lang='hu'],
  &[lang='pl'],
  &[lang='ro'] {
    quotes: '„' '”';
  }

  &[lang='da'] {
    quotes: '»' '«';
  }

  &[lang='el'],
  &[lang='fr'],
  &[lang='es'],
  &[lang='it'],
  &[lang='pt'] {
    quotes: '«' '»';
  }

  &[lang='fi'],
  &[lang='sv'] {
    quotes: '”' '”';
  }

  &[lang='lv'],
  &[lang='nl'],
  &[lang='mt'] {
    quotes: '“' '”';
  }
}

.ecl-blockquote__quote {
  margin: 0;
}

.ecl-blockquote__attribution,
%ecl-blockquote__author {
  margin-top: map.get($blockquote, 'author', 'margin');
  max-width: var(--max-w);
}

.ecl-blockquote__author,
%ecl-blockquote__author {
  color: map.get($blockquote, 'author', 'color');
  font: map.get($blockquote, 'author', 'font');
  font-weight: map.get($blockquote, 'author', 'font-weight');
}

.ecl-blockquote__image,
%ecl-blockquote__image {
  aspect-ratio: 1/1;
  display: block;
  height: 120px;
  margin-bottom: map.get($blockquote, 'image', 'margin-mobile');
  object-fit: cover;
  width: 120px;
}

/* stylelint-disable-next-line order/order */
@include breakpoints.up('l') {
  .ecl-blockquote {
    flex-direction: row;
  }

  .ecl-blockquote,
  %ecl-blockquote {
    border-inline-start: map.get($blockquote, 'border-width') solid
      map.get($blockquote, 'border-color');
    border-radius: map.get($blockquote, 'border-radius');
    box-shadow: map.get($blockquote, 'shadow');
    justify-content: flex-start;
    padding: map.get($blockquote, 'padding');
  }

  .ecl-blockquote__image,
  %ecl-blockquote__image {
    margin-inline-end: map.get($blockquote, 'image', 'margin-desktop');
    margin-bottom: 0;
  }
}
