src/static/scripts/components/post/postBody/postText/_postText.scss
@use "../../../../../style/vars";

.postText {
	width: 100%;

	> .expandButton {
		display: none;
	}

	.md :first-child {
		margin-block-start: 0;
	}

	&.textAfterMedia {
		margin-top: 1.5rem;
	}
}

.isInFeed {
	.postText {
		transition: padding-bottom .25s ease;
		--max-height: 10rem;

		> :not(.expandButton) {
			padding: 0 vars.$post-padding 0.75rem 1.75rem;
		}

		> div {
			max-height: var(--max-height);
			overflow: hidden;
			transition: max-height .25s ease;
		}

		&.expandableText {
			padding-bottom: vars.$post-padding;

			> .expandButton {
				display: initial;
				height: 2rem;
				position: absolute;
				bottom: 0;
				left: 0;
				width: 100%;
				filter: drop-shadow(0px 0px 4px transparent) drop-shadow(0px 0px 6px transparent);

				> img {
					transform: scale(1);
					transition: all .125s ease;
					height: 100%;
					object-fit: contain;
				}

				&:hover > img {
					transform: scale(1.125);
					filter: drop-shadow(0px 0px 4px vars.$shadow-color) drop-shadow(0px 0px 6px vars.$dark-shadow-color);
				}

				&:active > img {
					transform: scale(1.25);
				}
			}
		}
	}
}
