@use '../../compiled/tokens/scss/color';
@use '../../compiled/tokens/scss/size';
@use '../../mixins/theme';
@use '../../mixins/ms';

/// Footnote groups are used to group footnotes together in a list
.c-footnote-group {
  --spacing-footnotes: #{ms.step(2)};

  border-block-start: size.$edge-medium solid color.$base-gray-lighter;
  margin-block-start: var(--spacing-footnotes);
  padding-block-start: var(--spacing-footnotes);

  @include theme.styles(dark) {
    border-color: color.$brand-primary-darker;
  }
}

/// Compact footnote groups have smaller text, smaller gaps, and no top
/// border/padding
.c-footnote-group--compact {
  --spacing-footnotes: #{ms.step(1)};

  border-block-start: none;
  font-size: ms.step(-1);
  padding-block-start: 0;
}

.c-footnote-group__list > * + * {
  margin-block-start: var(--spacing-footnotes);
}