// .forum-header
// 	text-align left
// 	margin-bottom 1rem
post-content-padding-y = 0.75rem

.thread-link
	vertical
	margin 0.25rem 0

	.post-author
		margin-bottom 0.25rem

> 330px
	.thread-link
		horizontal
	
		.post-author
			margin-bottom 0

.post-content
	ui-element
	flex-grow 1
	padding 0.75rem 1rem
	position relative

	h1, h2, h3
		font-weight bold
		text-align left
		line-height 1.5em
		margin 1rem 0

	h1
		font-size 1.5rem

	h2
		font-size 1.3rem

	h3
		font-size 1.1rem
	
	:hover
		.post-toolbar
			opacity 1
		
		.post-date
			opacity 0.25

.thread-content
	horizontal
	ui-element
	padding 0.4rem 1rem
	align-items center

.thread-icons,
.thread-reply-count
	horizontal
	align-items center
	opacity 0.5
	text-align right
	font-size 0.9rem

.thread-reply-count
	margin-right 0.5rem

.thread-content-container
	flex 1
	vertical
	justify-content center

.thread-link-title
	color text-color

.post-author
	horizontal
	justify-content center
	align-items flex-start
	margin-right 0.5rem

// Toolbar

.post-toolbar
	horizontal
	opacity 0
	position absolute
	bottom 0.25rem
	right 0.25rem
	default-transition

.post-tool
	opacity 0.7
	&:hover
		cursor pointer
		opacity 1

.post-likes
	opacity 0.4
	margin-right 0.4em
	&:before
		content "+"

.post-permalink
	color post-permalink-color

.post-like
	color post-like-color

.post-unlike
	color post-unlike-color

.post-save
	//

.post-edit-interface
	vertical

.post-title-input
	margin-bottom post-content-padding-y

.post-text-input
	min-height 200px

.post-date
	position absolute
	right -1rem
	top 0.25rem
	white-space nowrap
	opacity 0
	transform translateX(100%)
	default-transition

// Old

// #posts
// 	display flex
// 	flex-flow column
// 	flex 1
// 	max-width 100%

// .post
// 	display flex
// 	flex-flow column
// 	margin 0.5rem 0

// 	[data-highlight="true"]
// 		.post-content
// 			border 2px solid post-highlight-color

// .post-author
// 	text-align center
// 	flex-grow 0
// 	display flex
// 	flex-flow row
// 	justify-content center
// 	margin-bottom -3px

// 	img
// 		margin 0 !important

// #post-input,
// .post-input
// 	width 100%
// 	min-height 150px
// 	margin 0.5rem 0

// .post-submit
// 	margin-top 0.5rem
// 	max-width 200px
// 	align-items flex-end

// .post-toolbar
// 	display flex
// 	flex-flow row
// 	opacity 0
// 	default-transition
// 	position absolute
// 	bottom 3px
// 	right 0

// .post-save
// 	float right
// 	:hover
// 		cursor pointer

// .post-input-toolbar
// 	display flex
// 	flex-flow row

// .post-tool
// 	opacity 0.7
// 	:hover
// 		cursor pointer
// 		opacity 1

// .post-likes
// 	opacity 0.4
// 	margin-right 0.4em
// 	:before
// 		content "+"

// .post-permalink
// 	color blue !important

// .post-delete
// 	color rgb(255, 32, 12) !important

// .post-like
// 	color green !important

// .post-unlike
// 	color rgb(255, 32, 12) !important

// .post-content
// 	ui-element
// 	text-align left
// 	flex-grow 1
// 	padding 0.4rem 1rem
// 	margin-left 0.3rem
// 	border-radius 3px
// 	position relative

// 	:hover
// 		.post-toolbar
// 			opacity 1

// 	h1
// 		font-size 1.5rem
// 		line-height 2em

// 	h2
// 		font-size 1.3rem
// 		line-height 2em
// 		font-weight normal

// 	h3
// 		font-size 1.1rem
// 		line-height 2em
// 		font-weight normal

// .hidden
// 	display none

// .thread
// 	display flex
// 	flex-flow column
// 	align-items center

// .thread-title
// 	width auto
	
// .posts
// 	width 100%
// 	max-width 830px

// > 500px
// 	.post
// 		flex-flow row
// 		justify-content center

// 	.post-author
// 		//