$_theme: () !default

@use "sass:map"

.comment-base
	display: flex
	flex-direction: row
	padding-bottom: 1em

	.comment-avatar
		padding-right: 1em

		.avatar-img
			border-radius: 50%
			max-height: 4em

	.comment-contents
		display: flex
		flex-direction: column

		> *:not(:first-child)
			padding-top: 0.5em

		.comment-author
			display: flex
			flex-direction: row
			max-width: fit-content

			&.is-channel-owner
				color: map.get($_theme, "link")

			.icon
				padding-left: 0.5em
				width: 1em
				height: 1em
				&.checkmark, &.pin
					background-size: 100% 100%
					background-position: center

				&.checkmark
					background-image: url(/static/images/check.svg)
				&.pin
					background-image: url(/static/images/pin.svg)
				&.sponsor
					max-height: 2em

		.comment-content
			color: map.get($_theme, "fg-dim")
			padding-right: 5em
			cursor: text

		.comment-stats
			display: flex
			flex-direction: row
			max-width: fit-content
			cursor: text

			> *:not(:first-child)
				padding-left: 0.5em

			.comment-heart
				position: relative
				display: flex
				flex-direction: row

				> img
					max-height: 1.25em
					border-radius: 50%

				&:after
					content: "❤️"
					position: absolute
					left: 62.5%
					top: 62.5%
					font-size: 0.75em

				// .comment-heart-label
				// 	padding-left: 0.5em
				// 	font-style: italic

	a
		color: map.get($_theme, "fg-bright")
		text-decoration: none
		font-weight: bold