post-content-padding-y = 0.75rem

.post-author
	horizontal
	justify-content center
	align-items flex-start
	margin-right post-avatar-text-margin

.post-header
	horizontal
	horizontal-line-bottom

.post-header-info
	flex 1
	clip-long-text

.post-action
	display flex
	align-items center
	border none
	background none
	padding 0
	height auto
	color hsla(text-color-h, text-color-s, text-color-l, 0.5)

	:hover
		color link-hover-color
		background none

.post-header-action
	opacity 0
	margin-right 0.5rem

.post-date
	color hsla(text-color-h, text-color-s, text-color-l, 0.5)
	white-space nowrap

.post-box
	ui-element
	flex-grow 1
	padding 0.75rem 1rem
	position relative
	overflow hidden

	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

	img
		max-width 100%
		max-height 450px
		width 100%
		object-fit cover

	:hover
		.post-header-action
			opacity 1

.post-toolbar
	horizontal
	justify-content flex-end
	margin-top typography-margin
	padding-top typography-margin
	border-top 1px solid reverse-light-color

.post-toolbar-action
	margin-left 1rem

	[data-like="true"]
		color hsla(0, 90%, 50%, 1)

.new-post-actions
	justify-content flex-end
	opacity 0
	height 0
	transform translateY(-50%)
	transition all transition-speed ease

	button
		pointer-events none

.new-post-actions-enabled
	opacity 1
	height auto
	margin-bottom 0.75rem
	transform translateY(0)

	button
		pointer-events all

.post-edit-interface
	vertical

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

.post-text-input
	min-height 200px