@use '../variables' as variables;

.blockquote {
  --blockquote-border-color: #{variables.$border-color};
  --blockquote-border-width: #{variables.$border-width};
  --blockquote-font-family: #{variables.$font-family-serif};
  --blockquote-font-size: #{variables.$font-size-lg};
  --blockquote-padding-left: #{variables.$grid-gutter-width};

  border-left: var(--blockquote-border-width) solid var(--blockquote-border-color);
  font-family: var(--blockquote-font-family);
  font-size: var(--blockquote-font-size);
  padding-left: var(--blockquote-padding-left);
}

.blockquote-footer {
  --blockquote-footer-font-family: #{variables.$font-family-base};
  --blockquote-footer-font-size: #{variables.$font-size-base};

  display: block;
  font-family: var(--blockquote-footer-font-family);
  font-size: var(--blockquote-footer-font-size);
  margin-top: 5px;

  &::before {
    content: '\2014\00A0';
  }
}