@use "../functions" as *;
@use "../mixins/tokens" as *;

$blockquote-tokens: () !default;

// scss-docs-start blockquote-tokens
// stylelint-disable-next-line scss/dollar-variable-default
$blockquote-tokens: defaults(
  (
    --blockquote-gap: calc(var(--spacer) / 2),
    --blockquote-padding-x: var(--spacer),
    --blockquote-margin-y: var(--spacer),
    --blockquote-font-size: var(--font-size-md),
    --blockquote-border-width: .25rem,
    --blockquote-border-color: var(--border-color),
    --blockquote-footer-font-size: var(--font-size-sm),
    --blockquote-footer-color: var(--fg-3),
  ),
  $blockquote-tokens
);
// scss-docs-end blockquote-tokens

@layer content {
  .blockquote {
    @include tokens($blockquote-tokens);
    display: flex;
    flex-direction: column;
    gap: var(--blockquote-gap);
    padding-inline-start: var(--blockquote-padding-x);
    margin-bottom: var(--blockquote-margin-y);
    font-size: var(--blockquote-font-size);
    border-inline-start: var(--blockquote-border-width) solid var(--blockquote-border-color);

    > * {
      margin-bottom: 0;
    }
  }

  // stylelint-disable-next-line selector-no-qualifying-type
  figure.blockquote {
    blockquote {
      margin-bottom: 0;
    }
  }

  .blockquote-footer {
    font-size: var(--blockquote-footer-font-size);
    color: var(--blockquote-footer-color);

    &::before {
      content: "\2014\00A0"; // em dash, nbsp
    }
  }
}