thread
  display: block
  margin-left: 20px

  .thread-children li
    list-style-type: none

  &.focused > .thread-body > message::before
    display: inline-block

    position: absolute
    top: 0
    right: 100%

    margin-right: 10px

    content: "⇒"

  &.focused::after
    display: inline-block
    content: "Depth: " attr(depth)

    position: absolute
    bottom: 0
    right: 0

    z-index: 10

    opacity: 0.4
    margin: 0.5em

    font-family: monospace
    font-size: 0.7em

  ul
    padding: 0

    message:before
      content: ""
      position: absolute
      width: 15px
      top: 50%
      left: 0
      height: 10000%
      border-top: 2px solid gray
      border-left: 2px solid gray

    li.last > thread > .thread-body > message:before
      border-left-color: white

    li.first > thread > .thread-body > message:before
      top: 50%

.messages-container > thread
  overflow: hidden

thread
  display: block
  margin-left: 20px

  .thread-children li
    list-style-type: none

  &.focused > .thread-body > message::before
    display: inline-block

    position: absolute
    top: 0
    right: 100%

    margin-right: 10px

    content: "⇒"

  &.focused::after
    display: inline-block
    content: "Depth: " attr(depth)

    position: absolute
    bottom: 0
    right: 0

    z-index: 10

    opacity: 0.4
    margin: 0.5em

    font-family: monospace
    font-size: 0.7em

  ul
    padding: 0

    message:before
      content: ""
      position: absolute
      width: 15px
      top: 50%
      left: 0
      height: 10000%
      border-top: 2px solid gray
      border-left: 2px solid gray

    li.last > thread > .thread-body > message:before
      border-left-color: white

    li.first > thread > .thread-body > message:before
      top: 50%

Fix crazy scroll, thanks @adamschwartz.
Fix crazy scroll, thanks @adamschwartz.
