@use "@styles/common";
@use "@styles/var";
@use "@styles/color";

#feed {
	#feed-panel {
		#feed-header {
			.poster {
				.poster-form {
					display: flex;
					flex-direction: column;
					gap: var.$block-spacing;

					.poster-actions {
						display: flex;
						align-items: stretch;
						gap: var.$block-spacing;

						input[name=name] {
							flex: 1 1 auto;
							min-width: 0;
						}

						button[name=submit] {
							flex: 0 0 auto;
						}
					}
				}
			}
		}

		#feed-posts {
			position: relative;
		}

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

		.post-item {
			margin-bottom: var.$block-spacing;
			width: calc(100% - var.$block-spacing);
			box-shadow: var.$map-shadow;
			color: color.$default;

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

			.header {
				display: flex;
				align-items: center;
				padding: 0 var.$block-spacing;
				position: relative;
				border-radius: var.$block-radius var.$block-radius 0 0;
				@include common.topo-bg(linear, 0deg, color.$default-bg);

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

					&.index {
						display: flex;
						align-items: center;
						gap: var.$elem-spacing;
						flex: 0 0 auto;

						.link {
							padding: 0;
							line-height: 1;
						}
					}

					&.time {
						flex: 1 1 auto;
						text-align: right;
						font-style: italic;
					}
				}
			}

			.body {
				clear: both;
				padding: 0em var.$block-spacing var.$block-spacing;
				border-radius: 0 0 var.$block-radius var.$block-radius;
				background: color.$default-bg;
			}

			.drill {
				&:hover .comment {
					opacity: 0.3;
				}

				.comment {
					position: absolute;
					left: 0;
					bottom: 0;
					width: 100%;
					margin: 0;
					padding: var.$elem-spacing;
					line-height: normal;
					box-sizing: border-box;
					border-radius: 0 0 var.$block-radius var.$block-radius;
					transition: opacity var.$trans-quick;
					cursor: auto;
					font-size: 0.9em;

					&:hover {
						opacity: 1;
					}

					p {
						margin: 0;
					}

					p + p {
						margin-top: var.$elem-spacing;
					}
				}
			}

			&.headerless {
				.body {
					padding-top: var.$block-spacing;
					text-align: center;
					border-radius: var.$block-radius;
					@include common.topo-bg(radial, circle, color.$default-bg-light, 20%);

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

			&.message {
				color: color.$message;

				.header {
					@include common.topo-bg(linear, 0deg, color.$message-bg);
				}

				.body {
					background: color.$message-bg;
				}

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

				.comment {
					background: color.$message-bg-light;
				}

				.weather {
					position: absolute;
					top: var.$block-spacing;
					right: var.$block-spacing;
					
					.spot-icon-with-text {
						gap: 0;
					
						.spot-icon {
							font-size: 1.3em;
							vertical-align: middle;
							height: var.$block-spacing;
							background: color.$message;
							color: color.$message-bg;
							border-radius: var.$block-radius 0 0 var.$block-radius;
							padding: var.$elem-spacing;
						}

						.temperature {
							display: inline-block;
							line-height: var.$block-spacing;
							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: 0 var.$block-spacing var.$elem-spacing;
					
					.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;
						}
					}
				}
			}

			&.media {
				color: color.$media;
				
				.header {
					@include common.topo-bg(linear, 0deg, color.$media-bg);
				}

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

				.body {
					background: color.$media-bg;

					a.media-link {
						display: inline-block;
						width: 100%;
						margin: 0;
						position: relative;
						line-height: 0;

						&.drill {
							.comment {
								background: color.$media-bg-light;
							}

							.drill-icon {
								.drill-image {
									color: transparent;
								}
								.drill-video {
									color: color.$over-img-bg;
								}
							}

							&:hover {
								.drill-icon {
									.drill-image, .drill-video {
										color: color.$media-bg;
										filter: drop-shadow(var.$elem-shadow);
									}
								}
							}
						}

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