martijnversluis/ChordFiddle

.ChordSheetViewer
  $viewer-background: $theme-foreground
  $viewer-foreground: $theme-background
  $viewer-padding: $spacing-m

  background-color: $viewer-background
  color: $viewer-foreground
  flex: 1 0 auto
  overflow: auto
  padding: $viewer-padding
  white-space: pre
  width: 100%

  &[data-mode="text"]
    $viewer-font: $font-monospace
    $viewer-font-size: 14px
    $viewer-outline-color: rgba($theme-foreground, 50%)

    font-family: $viewer-font
    font-size: $viewer-font-size
    outline-color: $viewer-outline-color
    transition: background-color 100ms ease-out

  &[data-mode="html"]
    $viewer-title-font-size: 1.1em

    h2
      font-size: $viewer-title-font-size

    .chord
      font-weight: 600

      &:not(:last-child)
        padding-right: $spacing-m

    .empty-line
      height: 1em

    .paragraph
      margin-bottom: 1em

    .chord:not(:last-child)
      padding-right: $spacing-m

    .chord:after,
    .lyrics:after
      content: '\200b'

    .row
      display: flex
      line-height: 150%