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

$footnote-offset: ms.step(-2);
$footnote-offset-negative: calc(#{$footnote-offset} * -1);
$footnote-offset-left-negative: calc(
  #{$footnote-offset-negative} + #{ms.step(1)} * -1
);

/// Footnotes are list items with return links after their content
///
/// 1. Since footnotes are linked to using hash links, we give them a little
///    vertical offset so the text isn't right at the top of the screen
.c-footnote {
  position: relative;
  scroll-margin: calc(#{$footnote-offset} + #{ms.step(-2)}); /* 1 */

  /// When a footnote is targeted by the URL hash we apply a background color to it
  /// We use an absolutely positioned pseudo-element so our background will extend
  /// beneath the list item ::marker
  &:target::before {
    background-color: color.$base-gray-lighter;
    border-radius: size.$border-radius-medium;
    content: '';
    inset: $footnote-offset-negative;
    inset-inline-start: $footnote-offset-left-negative;
    position: absolute;
    z-index: -1;

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

  /// We apply some basic styles to the return link.
  /// 1. Center its icon
  /// 2. We shift the link up slightly so its icon appears vertically aligned
  ///    with the surrounding text. We apply that to the link instead of the
  ///    inner icon to ensure the focus ring is centered correctly.
  /// 3. Add some focus styles
  .c-footnote-link-item__return-link {
    @include icon.inline; /* 2 */
    align-items: center; /* 1 */
    border-radius: size.$border-radius-full;
    display: inline-flex; /* 1 */
    justify-content: center; /* 1 */
    padding: ms.step(-6); /* 1 */
    position: relative; /* 2 */
    vertical-align: middle; /* 1 */

    @include focus.focus-visible {
      box-shadow: 0 0 0 size.$edge-medium color.$brand-primary-lighter; /* 3 */
    }
  }
}