Posts {
  grid-template-columns: auto minmax(800px, 1200px) 1rem auto

  section.top {
    display: grid
    grid-template-columns: 6rem 1fr 6rem
    grid-template-rows: auto auto
    grid-gap: 2rem
    
    section.viewSettings {
      grid-row: 1 / 2
      grid-column: 2 / 3

      display: flex
      justify-content: space-between
      align-items: center

      div.show {
        display: flex
        align-items: center

        span {
          font-weight: 600
          margin-right: .3rem
        }
        
        div.toggle {
          color: #999
          cursor: pointer

          padding: .25rem .5rem
          border: 1px solid rgba(0,0,0,0)

          i { margin-right: .3rem }

          -active {
            color: #222
            i { color: #9754de }
          }

          :hover {
            border: 1px solid #9754de
          }
        }
      
      }

      div.sort {
        display: flex
        align-items: center

        span { font-weight: 600 }
        button { margin-left: .5rem }
      }
    }

    div.Compose {
      grid-row: 2 / 3
      grid-column: 2 / 3
      padding: 0
    }
  }

  section.content {
    div.ThreadCard {
      border: none
      margin-top: 3rem
    }
  }
}

ThreadCard {
  -loading { min-height: 10rem }
  outline: none

  display: grid
  grid-template-columns: 6rem 1fr 6rem
  grid-gap: 2rem

  section.authored {
    display: grid
    grid-gap: .8rem
    align-content: start
    justify-items: end

    div.avatar {
      height: 4rem
      width: 4rem
      a {
        height: 4rem
        width: 4rem
        img {
          height: 4rem
          width: 4rem
        }
      }
    }
    div.name {
      text-align: end
      a {
        color: #222
        font-weight: 600
        text-decoration: none
      }
    }
  }

  section.content-preview {
    cursor: pointer

    div.root {
      div.Markdown {
        background-color: #000
        color: #fff
        line-height: 1.4rem
        padding: 2rem

        max-height: 20rem
        overflow: hidden

        p {
          :first-of-type { margin-top: 0 }
        }
        (img) { max-width: 100% }
        (pre) { background-color: #000; }
        (code) { background-color: #000; }
        (a) { color: #db67ed }
      }
    }

    div.recent {
      div.msg {
        margin: 1rem 2rem 0 2rem

        :last-child { margin-bottom: .5rem }

        span.author { font-weight: 600 }
        span.preview { margin-left: .5rem }
      }
    }
  }

  section.stats {
    display: grid
    grid-gap: .8rem
    align-content: start
    justify-items: start

    div.participants {
      display: flex
      justify-content: flex-start
      flex-wrap: wrap

      a {
        height: 2rem
        width: 2rem
        margin: 0 .5rem .5rem 0
        img {
          height: 2rem
          width: 2rem
        }
      }
    }

    div.counts {
      display: flex
      justify-content: flex-start
      flex-wrap: wrap

      div {
        margin: 0 .5rem .5rem 0

        display: flex
        align-items: center
        i { margin-left: .3rem }
      }
    }
  }

  :focus {
    section.content-preview {
      div.root {
        div.Markdown {
          background: #6f0055
          transition: background .2s ease-in
        }
      }
    }
    (a) {
      color: #db67ed
    }
  }
}