esl-note {
  position: relative;
  font-size: 75%;
  line-height: 0;
  vertical-align: baseline;
  top: -0.5em;
  cursor: pointer;

  &::before {
    content: '[';
  }
  &::after {
    content: ']';
  }

  &[active] {
    text-decoration: underline;
  }

  &.highlight {
    font-weight: bold;
  }

  .esl-note-link {
    &,
    &:hover {
      color: inherit;
      text-decoration: none;
    }
  }
}