Message -default {
  padding: 1rem 0

  display: grid
  grid-template-columns: 6rem 1fr minmax(6rem, auto)
  grid-gap: 1.5rem

  section.left {
    grid-column: 1

    display: grid
    align-content: start
    justify-items: end

    div.avatar {
      grid-row: 1
      a img { }
    }

    div.author {
      grid-row: 2
      font-weight: 600
      text-align: right
      (a) { color: #222 }
    }

    div.timestamp {
      grid-row: 3
      a {
        font-size: .9rem
        $textSubtle
      }
    }
  }

  section.body {
    /* padding: .5rem */
    background: rgba(255,255,255, .5)

    grid-column: 2

    display: grid
    align-content: start

    div.title {
      grid-row: 1
      font-size: .9rem
      $textSubtle
      (a) { $textSubtle }
    }

    div.content {
      grid-row: 2
      (img) {
        max-width: 100%
      }
      (video) {
        max-width: 100%
      }
    }

    footer.backlinks {
      grid-row: 3
    }

    div.raw-content {
      grid-row: 4
      pre {
        border: 1px gainsboro solid
        padding: .8rem
        background-color: #f5f5f5
        color: #c121dc
        padding: .3rem
        white-space: pre-wrap
        word-wrap: break-word

        span {
          font-weight: 600
        }
        a {
          word-break: break-all
        }
      }
    }

  }

  section.right {
    grid-column: 3

    display: grid
    justify-items: start
    align-content: space-between

    div.meta {
      grid-row: 1

      display: grid
      justify-items: start
      grid-gap: .5rem

      i, div, a { }

      a.channel {
        grid-row: 1
        color: gray
        letter-spacing: 1px
      }

      i.toggle-raw-msg { visibility: hidden }
      :hover {
        i.toggle-raw-msg { visibility: visible }
      }
    }

    div.actions {
      grid-row: 2
      justify-self: start

      display: grid
      grid-auto-flow: column
      grid-gap: .8rem

      font-size: .9rem

      div.MessageLike { }
      i.MessageQuote { margin-top: 3px }
      i.MessageReply { margin-top: 1px }
    }
  }

  :focus {
    outline: #e794e7 solid 2px

    /* section.body { background: rgba(255,255,255, 1) } */
  }

  /* UnreadFeature (search codebase for this if extracting) */

  /* initially read */
  -read {
  }

  /* initially unread */
  -unread {
    section.right {
      div.meta {
        div.unread {
          display: initial
          padding: 1px 4px

          transition: color, border 1s ease-in

          color: hotpink
          border: 1px solid hotpink
          border-radius: 2px
        }
      }
    }
  }

  /* initially unread, but subsequently marked read */
  -unread {
    -read {
      section.right {
        div.meta {
          div.unread {
            color: #bbb
            border: 1px solid #bbb
          }
        }
      }
    }
  }
}