ThreadCard { display: flex align-items: center margin-bottom: .5rem div.context { display: flex margin-right: 1rem font-weight: inherit } div.content { flex-grow: 1 cursor: pointer padding: 1rem border: 1px solid #ddd border-radius: 2px transition: all .5s ease :hover { background-color: #fff border: 1px solid #fff } div.subject { font-size: 1.2rem margin-bottom: .3rem $markdownLarge } div.reply { color: #444 display: flex align-items: center i.fa-caret-left { margin-left: .7rem margin-right: .5rem } $markdownSmall } } -unread { div.content { background-color: #fff div.subject { $markdownBold } } } }