/* post stylings */

@property --commment-form-bg-color {
    syntax: "<color>";
    inherits: false;
    initial-value: #e9e9e941;
}

.datetime-text {
	color: var(--sub-text-color);
	line-height: 1em;
	margin: 1em 0 0.75em;
}

.mini-post-indent {
	border-left: 2px solid var(--sub-text-color);
	margin: 1.5em 0 1.5em 1.35em;
	padding-left: 1em;

	.post-block {
		width: 31.45em;
		margin: 0;
		padding: 0;
	}
}

.mini-post-indent-comment {
	margin-top: 1.35em;
	margin-bottom: 1em;
	padding-bottom: 0.25em;
}

.post-block {
	width: 34em;
	max-width: 100%;
	text-align: left;
	margin: 0 auto;

	.post-content {
		cursor: pointer;

		h2 {
			margin-top: 0.25em;
		}

		a {
			text-decoration: underline;
			color: var(--link-text-color);
		}
	}

	a {
		text-decoration: none;

		h2, p {
			color: var(--main-text-color);
		}
	}
}

.post-block-comment {
	padding: 0.5em;

	.post-content {
		padding: 0 1em;
	}

	h2 {
		font-size: 1.25em;
	}
}

.post-title-block {
	min-height: 7em;
	margin: 1em calc(0.5vw + 0.5em);
	text-align: left;
}

.post-image {
	width: 100%;
	border-radius: 1em;
}

.profile-mini {
	display: flex;
	flex-direction: row;
	height: 3em;
	line-height: 3em;
	cursor: pointer;
	h3 {
		margin: 0;
		padding-left: 0.25em;
	}
}

.profile-picture {
	border-radius: 50%;
	margin: 0.25em;
	width: 2.5em;
	height: 2.5em;
}

.post-segment {
	background-color: var(--main-bg-color);
	border-radius: 1em;
	margin: 0.75em 0.5em;
	padding: 0.25rem 0.4rem;
}

.post-segment-thin {
	background-color: var(--main-bg-color);
	border-radius: 1em;
	margin: 0.5em auto;
	padding: 1em;
	width: fit-content;
}

.post-title-block-container {
	width: 50%;
	min-width: 22em;
	margin: auto;
}

.title-block-h-flex {
	display: flex;
	flex-direction: row;
}

.title-block-text {
	width: calc(100% - 10vw - 2em);
	min-width: calc(100% - 9em);
	min-height: 7em;
	
	h2, p, a {
		width: 100%;
	}
	
	h2 {
		margin: 0;
		word-wrap: break-word;
	}

	p, a {
		margin: 1em 0 0;
		flex: 0 100% auto;
		align-self: flex-end;
	}
}

.title-block-info-div {
	display: flex;
	flex-direction: column;
	width: 4em;
	height: 7em;
	padding: 0.5em 0 0;
}

.title-block-like-div, .title-block-comment-div {
	display: flex;
	flex: 100%;

	img {
		height: 2.5rem;
		margin: 0 0.25em 0 auto;
	}

	.like-form {
		margin: 0 auto;
	}

	button {
		height: 3em;
		background-color: #00000000;
		border: 0;
		cursor: pointer;
	}

	p {
		margin: 0 0 0 auto;
		line-height: 2.25rem;
		font-size: 125%;
		text-align: start;
	}
}

.title-block-content-wrap {
	display: flex;
	width: calc(100% - 4em);
	flex: 100%;
	text-decoration: none;
}

.title-block-preview-img {
	height: 10vw;
	max-height: 7em;
	min-height: 5em;
	aspect-ratio: 1;
	object-fit: cover;
	margin: 0 1em;
	border-radius: 0.5em;
}

.post-comment-form-overlay {
	display: flex;
    position: fixed;
    width: 100vw;
    height: 100vh;
    padding: 0 0 20vh;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 100;
    background-color: var(--overlay-color);

	@property --overlay {
        syntax: "true | false";
        inherits: true;
        initial-value: "true";
    }

	.post-segment {
		margin: auto;
		padding: 1.25em;
	}
}

.post-comment-button {
	display: flex;
	flex-direction: row;
	width: 100%;
	height: 3.5em;
	border-radius: 1.75em;
	background-color: var(--button-color);
	border: 0;
	margin: 0.5em 0;
	padding: 0.25em;
	
	p {
		margin: auto 0.5em;
		text-align: left;
	}
}

.generic-comment-button {
	min-width: fit-content;
	margin: 2.25em auto 0;
}

.post-comment-form {
	display: flex;
	flex-direction: column;
	margin: 1em;
}

.post-comment-form-indent {
	display: flex;
	flex-direction: column;
	padding: 0.5em;
	border-radius: 1em;
	background-color: var(--overlay-color);
}

.post-form-title-input {
	min-height: 3em;
	margin: 0.25em 0.25em 1em;
	text-align: left;
	background-color: #00000000;
	border: 0;
	resize: none;
	font-size: large;
	field-sizing: normal;
}

.post-comment-form-text-input {
	min-height: 10em;
	margin: 0.25em 0.25em 0;
	text-align: left;
	background-color: #00000000;
	border: 0;
	resize: none;
}

.post-form-title-input:focus, .post-comment-form-text-input:focus {
	outline: none !important;
}

.post-comment-form-image-label {
	margin-left: 0.25em;
}

.post-content-info-div {
	display: flex;
	flex-direction: row;

	button {
		height: 3em;
		background-color: #00000000;
		border: 0;
	}

	p {
		margin: 0 1em 0 0.5em;
		line-height: 2.5em;
	}
}

.post-content-div {
	margin: 0 0.35em;
}

.post-content-info-flex {
	display: flex;
	flex-direction: row;
	flex: 0%;
	margin: 0 0 0 0.15em;
}

.post-content-comment-div {
	display: flex;
	flex-direction: row;
}

.post-content-like-div {
	display: flex;
	flex-direction: row;
}

.post-icon {
	height: 2.5em;
	margin:  0.25em auto;
}

.post-list-h-div {
	display: flex;
	flex-direction: column;
}

.timeline-about {
	width: 60%;
	min-width: 22em;
	margin: 0.5em auto 0;
	padding: 0.25em 1em;
	text-align: center;
	background-color: var(--main-bg-color);
	border-radius: 1em;
}

.post-create-button {
	display: flex;
	margin: 1.25em auto;
	
	p {
		width: 8em;
		height: 1em;
	}
}

.post-form {
	position: relative;
	min-width: 50vw;
	padding: 10vh 0;

	.post-segment {
		width: fit-content;
	}
}

.post-form-scroll {
	height: 100vh;
	margin: auto;
	overflow-y: scroll;
	scrollbar-width: none;
}