@use "fa/variables";
@use "var";
@use "color";
@use "fa";

#feed {
	#feed-panel {
		#feed-header {
			.poster {
				textarea[name=post] {
					margin-bottom: 1em;
					width: calc(100% - 2em);
				}

				input[name=name] {
					width: calc(100% - 6em);
				}

				button[name=submit] {
					margin-left: 1em;
					margin-bottom: 0.5em;
				}
			}

			.archived {
				background: #EEE;
			}
		}

		#feed-posts {
			position: relative;
		}

		.body-box {
			position:relative;
			display: flex;
			flex-direction: column;
		}

		.post-item {
			margin-bottom: var.$block-spacing;
			background: color.$post-bg;
			color: color.$post;
			border-radius: var.$block-radius;
			width: calc(100% - var.$block-spacing);
			box-shadow: 2px 2px 3px 0px rgba(0, 0, 0, 0.5);

			a {
				color: color.$post;
				&:hover {
					color: color.$post-hover;
				}
			}

			.message {
				margin: 0;
			}
			.signature {
				margin: var.$elem-spacing 0 0 0;
				text-align: right;
				font-style: italic;

				img {
					vertical-align: baseline;
					margin: 0 0.2em calc((1em - 24px)/2) 0;
					position: relative;
				}
			}
			.header {
				padding: 0 var.$block-spacing;
				position: relative;

				div {
					display: inline-block;
					font-size: 0.8em;
					padding: var.$elem-spacing 0px;

					&.index {
						width: 25%;

						.link {
							margin-left: var.$elem-spacing;
							padding: 0;
							line-height: 1;
						}
					}

					&.time {
						width: 75%;
						text-align: right;
						font-style: italic;
					}
				}
			}
			.body {
				clear: both;
				padding: 0em var.$block-spacing var.$block-spacing;
			}

			&.headerless {
				.header {
					display: none;
				}
				.body {
					padding-top: var.$block-spacing;
					text-align: center;

					p {
						margin: 0;
						
						.fa {
							display: inline-block;
							font-size: 2em;
							margin: var.$elem-spacing 0;
						}
					}
				}
			}

			&.message {
				background: color.$message-bg;
				color: color.$message;

				p {
					font-size: 0.9em;
					height: 1em;
					margin: 0 0 var.$elem-spacing 0;
					display: inline-block;
					width: 100%;
				}

				a {
					color: color.$message;
					&:hover {
						color: color.$message-hover;
					}
				}

				a.drill {
					line-height: 0;

					.drill-icon {
						transform: translate(-16px, -32px);

						.fa-message-in {
							top: -1px;
						}
					}

					&:hover {
						.fa-message {
							@extend .#{variables.$fa-css-prefix}-drill-message;
							top: 13px;
							left: 3px;
						}
						.fa-message-in {
							display: none;
						}
					}
				}

				.weather {
					position: absolute;
					top: var.$block-spacing;
					right: var.$block-spacing;
					
					.fa {
						font-size: 1.3em;
						vertical-align: middle;
						line-height: 1rem;
						background: color.$message;
						color: color.$message-bg;
						border-radius: var.$block-radius 0 0 var.$block-radius;
						padding: var.$elem-spacing;
					}

					span {
						vertical-align: middle;
						padding: var.$elem-spacing;
						background: color.$message-bg;
						color: color.$message;
						border-radius: 0 var.$block-radius var.$block-radius 0;
					}
				}

				.staticmap {
					width: 100%;
					border-radius: var.$block-radius;
				}
			}

			&.post {
				.body {
					padding: 0em 1em 0.5em;
				}
			}

			&.media {
				background: color.$media-bg;
				color: color.$message-hover;

				.body {
					a {
						display: inline-block;
						width: 100%;
						margin: 0;
						color: color.$message-hover;
						position: relative;
						line-height: 0;

						&.drill {
							&:hover {
								.drill-icon .fa-drill-image, .drill-icon .fa-drill-video {
									color: rgba(color.$media-bg, 0.75);
								}
								.comment {
									opacity: 0;
								}
							}

							.drill-icon {
								font-size: 3em;

								.fa-drill-image {
									color: transparent;
								}
								.fa-drill-video {
									color: rgba(255, 255, 255, 0.5);
								}
							}
						}

						img {
							width: 100%;
							height: auto;
							image-orientation: from-image;
							outline: none;
							border-radius: var.$block-radius;
						}

						.comment {
							position: absolute;
							left: 0;
							bottom: 0;
							width: 100%;
							line-height: normal;
							box-sizing: border-box;
							margin: 0;
							padding: 0.5em;
							text-align: justify;
							background: rgba(255, 255, 255, 0.6);
							border-radius: 0 0 var.$block-radius var.$block-radius;
							transition: opacity 0.3s;
							opacity: 1;
						}
					}
				}
			}
		}
	}
}