@layer components.blocks {
  .sidenote-ref {
    @mixin px var(--size-1);

    font-family: var(--font-mono);
    font-size: 0.75em;
    font-weight: var(--font-weight-emphasis);
    color: var(--color-text-primary);
    text-decoration: none;

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

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

  .sidenote {
    @mixin typo_body-small;
    @mixin pt var(--size-3);
    @mixin border-t var(--border-card), solid, var(--color-border-strong);

    scroll-margin-block-start: calc(var(--layout-header-height) + var(--size-8));
    color: var(--color-text-secondary);

    /* Hangs, so the first line starts against the marker. */
    & .sidenote__marker {
      @mixin me var(--size-4);

      float: inline-start;
      font-family: var(--font-mono);
      font-weight: var(--font-weight-emphasis);
      color: var(--color-text-primary);
    }

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

      & .sidenote__marker {
        color: var(--color-primary);
      }
    }
  }

  .sidenote--optional {
    @mixin border-t var(--border-hairline), solid, var(--color-border-normal);

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

    & .sidenote__marker {
      color: var(--color-text-quiet);
    }
  }

  .sidenote--example {
    & .sidenote__marker {
      color: var(--color-primary);
    }
  }

  @media (--bp-tablet-down) {
    .sidenote {
      @mixin my var(--space-6);

      display: block;
    }
  }

  @media (--bp-desktop) {
    .sidenote {
      @mixin my var(--size-0);

      position: absolute;
      inset-inline-start: calc(100% + var(--layout-gutter));
      width: var(--layout-margin-width);
    }
  }
}