.sidenotes {
  & > ol {
    padding-inline-start: 0;
  }

  & .sidenote-element {
    position: absolute;
    transition: opacity 0.2s ease-in-out;
    opacity: 0;
    display: block;
    margin-bottom: 1rem;
    border: 1px solid var(--gray);
    counter-increment: sidenote-counter;
    background-color: var(--light);

    &::before {
      content: counter(sidenote-counter);
      background-color: var(--light);
      font-size: 0.8em;
      font-weight: bold;
      margin-right: 0.5rem;
      position: absolute;
      top: -12px;
      left: 12px;
      padding: 1px 8px;
      border: 1px solid var(--tertiary);
    }

    &.in-view {
      opacity: 1;
    }

    & .sidenote-inner {
      max-height: 200px;
      overflow-y: auto;
      width: 100%;
      box-sizing: border-box;
      padding: 0.2rem 1rem;
    }
  }
}