src/static/scripts/components/post/_post.scss
@use 'sass:math';
@use '../../../style/vars';

.post {
	&.isInFeed {
		.actions {
			position: absolute;
			transform: translateX(calc(-100% - .2rem)) translateY(-0.6rem);
		}

		@media (max-width: vars.$smaller-screen-max-width) {
			.actions {
				transform: translateX(-100%);
			}
		}

		.header {
			img.pinned {
				transform: translateX(calc(-100% - 0.4rem)) rotate(45deg);
				position: absolute;
			}

			margin: vars.$post-padding vars.$post-padding 1rem;
		}

		.content {
			position: relative;
			
			&.padded {
				margin: vars.$post-padding;
			}

			&.fullScale {
				border-bottom-left-radius: 1rem;
				border-bottom-right-radius: 1rem;
				overflow: hidden;
				transform: translateZ(0);		// border-radius with videos doesn't work in Safari otherwise
			}

			&.isBodyCollapsable.compact {
				> :nth-child(2) {
					display: none;
				}
			}

			&:not(.isBodyCollapsable) {
				.postBodyCompactWrapper {
					display: none;
				}
			}

			> *:not(.cover) {
				filter: blur(0);
				transition: filter .125s ease;
			}

			&.covered {
				overflow: hidden;

				> *:not(.cover) {
					filter: blur(100px);
				}
			}

			.cover {
				position: absolute;
				top: 0;
				left: 0;
				width: 100%;
				height: 100%;
				display: flex;
				cursor: pointer;

				> div {
					margin: auto;
					padding: 0.25rem 0.75rem;
					background: var(--bg-color);
					border: 1px solid var(--text-color);
					height: 2rem;
					border-radius: 1rem;
				}
			}

			.postImage {
				max-height: vars.$image-height-limited;
				object-fit: contain;
			}

			.videoPlayer {
				.fullscreen {
					video {
						border-radius: 0;
					}
				}
			}
		}
	}

	&.inCrosspostList {
		.backgroundLink {
			display: initial !important;
			position: absolute;
			top: 0;
			left: 0;
			z-index: 0;
			width: 100%;
			height: 100%;
			transition: none;
			filter: initial;
		}
	}

	.actions {
		z-index: 2;
		min-height: 100%;

		> .wrapper {
			position: sticky;
			top: 0;
			display: flex;
			flex-direction: column;
			align-items: center;

			.dropDown {
				margin-top: -0.55rem;
			}

			.dropDownButton {
				background-image: url("/img/kebab.svg");
				background-size: contain;
				background-color: unset;
				border: none;
				padding: 0;
				width: 2.3rem;
				height: 2.3rem;
			}

			.dropDownArea {
				left: calc(100% + .5rem);
				top: 0;
				margin-top: 0;
			}

			.upvotes {
				height: 0.7rem;
				font-size: 1.1em;

				&.medium {
					font-size: 0.95em;
				}

				&.small {
					font-size: .8em;
				}
			}
		}
	}

	.header {
		margin: vars.$post-padding 0 1rem 0;

		> .top {
			margin-bottom: math.div(vars.$post-padding, 4);
			flex-wrap: wrap;
			align-items: center;

			> * {
				margin: 0 0.125rem;
				line-height: 1rem;
			}

			> span {
				font-size: .8em;
				margin: 0 0.1rem;
			}

			> .flairWrapper {
				margin-left: auto;
				display: flex;
				gap: .5rem;
			}

			.subreddit {
				display: flex;
				align-items: center;
			}

			.srIcon {
				height: 1rem;
				width: 1rem;
				object-fit: cover;
				border-radius: 50%;
				margin-right: 0.4rem;
				transform: scale(1.4);
			}
		}

		.title {
			font-size: 1.5rem;
			word-break: break-word;
		}

		.removedInfo {
			height: 3rem;
			padding: .5rem;
			display: flex;
			align-items: center;
			gap: 0.5rem;
			background: rgba(255,52,25,0.18);
			border: 1px solid rgba(255,52,25,0.46);
			border-radius: vars.$border-radius;

			img {
				height: 2rem;
			}
		}
	}

	&:not(.isInFeed) {
		padding-right: vars.$post-padding;

		.actions {
			margin: 1.5rem 1rem;
			width: vars.$post-actions-width;
			max-width: vars.$post-actions-width;
		}

		.backgroundLink {
			display: none;
		}

		.content {
			.cover {
				display: none;
			}

			.postBodyCompactWrapper {
				display: none;
			}
		}
	}

	.content {
		display: flex;
		flex-direction: column;

		.postImage {
			width: 100%;
			height: auto;
			display: block;
		}
	}

	.miniPost {
		position: relative;
		border-radius: vars.$border-radius;
		border: 2px solid vars.$border-color;
		margin: .5rem;
		transition: background-color .25s ease;

		&:hover {
			background: vars.$background-el2;
		}

		.miniBackgroundLink {
			position: absolute !important;
			z-index: 1;
			width: 100%;
			height: 100%;
		}

		.postSummary {
			position: relative;
			padding: .5rem;
			display: flex;

			.leftItems {
				display: flex;
				flex-flow: column;
				margin-right: 1rem;

				> div {
					display: flex;
					align-items: center;
				}

				.votesImg {
					height: 1.1rem;
					transform: rotate(180deg);
				}

				.commentsImg {
					height: .8rem;
					margin: 0 0.2rem;
				}

				* {
					font-size: .8rem;
				}
			}

			.info {
				display: flex;
				align-items: center;
				flex-wrap: wrap;
				gap: .3rem;

				* {
					font-size: .8rem;
				}

			}

			.title {
				word-break: break-word;
			}

			a {
				position: relative;
				z-index: 1;
			}
		}
	}

	.commentsLink {
		display: flex;
		justify-content: center;
		align-items: center;
		margin-top: .25rem;
		filter: none;
		--dim: 2.5rem;

		&:hover {
			filter: none;
		}

		> img {
			width: 1.8rem;
		}

		> div {
			position: absolute;
			color: vars.$background;
			transform: translateY(-.15rem);
			font-weight: 700;

			&.medium {
				font-size: .8em;
			}

			&.small {
				font-size: .6em;
			}
		}
	}

	&:not(.nsfw) {
		.flair.nsfw {
			display: none;
		}
	}

	&:not(.spoiler) {
		.flair.spoiler {
			display: none;
		}
	}
}

// global settings

.hidePostFlairs {
	.post.isInFeed .header .top .flairWrapper .flair {
		display: none;
	}
}

.hidePostTitle {
	.post.isInFeed .header .bottom .title {
		display: none;
	}
}

.hidePostTopInfo {
	.post.isInFeed .header .top {
		display: none;
	}
}

.hidePostTitle.hidePostTopInfo {
	.post.isInFeed .header {
		display: none;
	}

	.content.fullScale {
		border-top-left-radius: 1rem;
		border-top-right-radius: 1rem;
	}
}

.hidePostLeftBar {
	.post.isInFeed > .actions {
		display: none;
	}
}

.hideCrosspostInfo {
	.post.isInFeed .miniPost {
		display: none;
	}
}

body.hideSubredditMiniIcon .post .header .srIcon {
	display: none;
}

.highlightSeenPosts {
	.post.isInFeed.seen {
		filter: brightness(vars.$seen-post-brightness);
	}
}
