@layer components.blocks {
  .footnote-ref {
    font-family: var(--font-mono);
    font-size: 0.7em;
    font-weight: var(--font-weight-emphasis);
    line-height: 1;

    & a {
      @mixin px var(--size-1);

      color: var(--color-text-primary);
      text-decoration: none;

      &:hover {
        color: var(--color-primary);
      }

      &:focus-visible {
        @mixin focus-ring;
      }
    }
  }

  .footnotes {
    --footnote-marker: 1.5rem;

    @mixin mt var(--space-10);
    @mixin pt var(--space-6);
    @mixin border-t var(--border-boundary), solid, var(--color-border-strong);

    counter-reset: fn;

    & .footnotes__title {
      @mixin typo_label;
      @mixin mt var(--size-0);
      @mixin mb var(--size-5);
    }

    & ol {
      @mixin ma var(--size-0);
      @mixin pl var(--size-0);

      display: flex;
      flex-direction: column;
      gap: var(--size-4);
      list-style: none;

      & li {
        @mixin typo_body-small;

        counter-increment: fn;

        display: grid;
        grid-template-columns: var(--footnote-marker) minmax(0, 1fr);
        column-gap: var(--slot-prose-gap);

        color: var(--color-text-secondary);

        &::before {
          content: counter(fn);
          font-family: var(--font-mono);
          font-weight: var(--font-weight-emphasis);
          color: var(--color-text-primary);
        }

        &:target {
          color: var(--color-text-primary);

          &::before {
            color: var(--color-primary);
          }
        }
      }
    }

    & .footnotes__note {
      @mixin ma var(--size-0);
    }

    & a {
      color: var(--color-text-link);
      text-decoration: underline;
      text-decoration-thickness: var(--size-1);
      text-underline-offset: var(--size-2);

      &:visited {
        color: var(--color-text-link-visited);
      }

      &:hover {
        color: var(--color-text-link-hover);
      }

      &:focus-visible {
        @mixin focus-ring;
      }
    }

    & a.footnotes__back {
      color: var(--color-text-quiet);
      text-decoration: none;

      &:hover {
        color: var(--color-text-primary);
      }
    }
  }
}