@import "theme/vars.less";

.app_layout {
	&.mobile {
		display: flex;
		flex-direction: column;

		padding: 0;

		.content_wrapper {
			height: 100%;
			width: 100%;
			overflow-y: scroll;
			padding-top: 20px;
		}

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

			overflow: hidden;
			align-items: center;
			justify-content: center;

			width: 100vw;
			padding: 0 10px;
		}

		.frameDecorator {
			position: absolute;
			left: 0;

			z-index: 8000;

			width: 100vw;
			height: @app_frameDecorator_height;

			background-color: rgba(var(--layoutBackgroundColor), 0.8);

			filter: blur(4px);
			backdrop-filter: blur(10px);

			&.top {
				top: 0;
				transform: translate(0, -6px);
			}

			&.bottom {
				bottom: 0;
				transform: translate(0, 6px);
			}
		}

		// FIXMETS FOR MOBILE LAYOUT
		.loginPage {
			flex-direction: column;

			.wallpaper {
				width: 100vw;
			}
		}

		.dashboard {
			display: flex;
			flex-direction: column;
		}

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

			height: 90vh;

			.postCard {
				&.fullmode {
					.wrapper {
						height: 76vh;

						.post_content {
							.post_attachments {
								height: 60vh;
								overflow: hidden;

								.carousel-root {
									.carousel {
										min-height: 200px;

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

		.accountProfile {
			padding: 0;

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

				padding: 0;

				margin-top: -4.0vh;

				padding: 0;

				.tabContent {
					padding: 0;
					padding-top: 26px;
				}

				.tabMenuWrapper {
					display: flex;
					flex-direction: column;
					align-items: center;
					justify-content: center;

					width: 100%;

					margin: 0;

					.ant-menu {
						padding: 0;
						margin: 0;
					}
				}
			}
		}

		.liveStream {
			flex-direction: column;

			.plyr {
				position: absolute;

				top: 0;
				left: 0;

				width: 100%;
				height: 60vh;

				border-radius: 6px;
			}

			.panel {
				height: 40vh;
			}
		}

		.postCard {
			.post_actionsWrapper {
				.actions {
					width: 100%;
				}
			}
		}
	}
}