Message -default {
  padding: 1rem .5rem

  display: grid
  grid-template-columns: 5rem auto

  section.avatar {
    grid-column: 1 / 2
    grid-row: 1 / span 4
    a img {
    }
  }

  section.top {
    grid-column: 2 / 3
    grid-row: 1 / span 1

    display: flex
    align-items: baseline
    
    div.author {
      font-weight: 600
      margin-right: .5rem
      (a) { color: #222 }
    }

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

    div.meta {
      display: flex
      justify-content: flex-end
      align-items: baseline

      i, div, a {
        margin-left: .5rem
      }
    }
  }

  section.content {
    grid-column: 2 / 3
    grid-row: 2 / span 1

    margin-bottom: .5rem

    (img) {
      max-width: 100%
    }
    (video) {
      max-width: 100%
    }
  }

  section.bottom {
    grid-column: 2 / 3
    grid-row: 4 / span 1

    display: flex
    align-items: center

    div.timestamp {
      flex-grow: 1

      a {
        font-size: .9rem
        $textSubtle
      }
    }

    div.actions {
      display: flex
      justify-content: flex-end

      font-size: .9rem
      a {
        margin-left: .5em
      }

      a.unlike {
        $textSubtle
      }
    }
  }

  section.raw-content {
    grid-column: 2 / 3
    grid-row: 3 / span 1

    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
      }
    }
  }

  footer.backlinks {
    grid-row: 5 / span 1

    grid-column: 2 / 3
    flex-basis: 100%
  }

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

  /* initially read */
  -read { }

  /* initially unread */
  -unread {
    section.top {
      div.meta {
        i.unread {
          display: initial
          transition: color 1s ease-in
          color: hotpink
        }
      }
    }
  }

  /* initially unread, but subsequently marked read */
  -unread {
    -read {
      section.top {
        div.meta {
          i.unread {
            color: #bbb
          }
        }
      }
    }
  }
}