@use "../functions" as *;
@use "../mixins/lists" 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: 1rem,
    --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 {
  //
  // Lists
  //

  .list-unstyled {
    @include list-unstyled();
  }

  // Inline turns list items into inline-block
  .list-inline {
    @include list-unstyled();
  }
  .list-inline-item {
    display: inline-block;

    &:not(:last-child) {
      margin-inline-end: var(--list-inline-padding, var(--spacer) / 2);
    }
  }

  //
  // Misc
  //

  // Builds on `abbr`
  .initialism {
    font-size: var(--initialism-font-size, var(--font-size-xs));
    text-transform: uppercase;
  }

  // Blockquotes
  .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
    }
  }
}