@mixin parse-error
  color: #f44
  border: 1px solid #faa
  background-color: #fee
  padding: 0 .2em
@mixin reset-parse-error
  color: inherit
  border: none
  background-color: inherit
  padding: 0
@mixin unclassed-span
  &:not(.root):not(.on-chord):not(.separator):not(.chord-type):not(.comment):not(.marker)
    @content

.score
  font-weight: bold
  font-size: 1.1em
  color: #777
  max-width: 320px
  max-height: inherit !important
  height: auto
  padding: .625em 1.2em
  overflow: auto
  resize: none
  transition: all .1s ease-in-out
  &.read-only
    box-shadow: none
  .separator
    opacity: .5
    font-weight: normal
    margin-right: 1.1em
    &:not(:first-of-type):before
      content: " "
      letter-spacing: .65em
  .separator, .space
    & + .root
      &:not(:first-child):before
        content: "" !important
  .streak + .streak, .resume + .resume, .stop + .stop
    &:before
      content: "" !important
  .comment
    font-size: .85em
    font-weight: normal
    line-height: 2.4
    color: #888
  .marker
    position: relative
    display: block
    font-size: .8em
    font-weight: normal
    color: #888
    background-color: #eee
    padding: .2em .5em
    &:after
      content: ""
      display: block
      position: absolute
      width: 8px
      height: 8px
    &.start
      margin: .8em 0 .4em
      &:after
        left: 0
        bottom: -8px
        border-bottom: 8px solid transparent
        border-left: 8px solid #eee
    &.end
      margin: .4em 0 .8em
      &:after
        right: 0
        top: -8px
        border-top: 8px solid transparent
        border-right: 8px solid #eee
  .comment, .marker
    > span > span
      font-family: monospace
  .root
    line-height: 1.8
    font-size: 1.3em
    &:not(:first-child)
      &:before
        content: " "
        letter-spacing: .65em
    &:not(:last-child)
      > span
        padding-right: 1px
  .chord-type, .on-chord, .space
    font-size: 1.3em
    > span > span
      font-size: 1.1rem
  .on-chord
    > span
      padding-left: .1em
  .streak, .resume, .stop
    color: #aaa
    white-space: nowrap

  // active
  // .root
  //   &, & + .chord-type, & + .on-chord, & + .chord-type + .on-chord
  //     > span
  //       transition: background-color .2s ease
  .root.active
    &, & + .chord-type, & + .on-chord, & + .chord-type + .on-chord
      > span
        padding-top: 2px
        padding-bottom: 2px
        background-color: #ffa
        border-bottom: 2px solid #f88

  // parse error
  .parse-error
    @include parse-error
  .chord-type:first-child, span:not(.root) + .chord-type
    @include parse-error
  .on-chord:first-child, span:not(.root):not(.chord-type) + .on-chord
    @include parse-error
  .public-DraftStyleDefault-block
    > span
      @include unclassed-span
        @include parse-error
    > span:first-child:last-child
        @include unclassed-span
          @include reset-parse-error

  .DraftEditor-editorContainer
    position: relative
    z-index: 1
  .public-DraftEditorPlaceholder-root
    position: absolute
    top: .8em
    font-weight: normal
    opacity: .5
    z-index: 1
  .public-DraftEditor-content
    min-height: 288px
    word-wrap: normal !important
wbr
  display: none

@media screen and (max-width: $tablet - 1px)
  .score
    font-size: .95em
    .public-DraftEditor-content
      word-wrap: break-word !important
    .public-DraftStyleDefault-block
      display: block
