/* pages/main/journal-creater/index.wxss */
.container {
	height: 100vh;
	
	.content {
		width: calc(100% - 64px);
		padding: 0 32px 32px 32px;
		display: flex;
		align-items: center;
		flex-direction: column;

		.label {
			color: var(--theme-text-secondary);
		}

		.section {
			width: 100%;
			margin-top: 1.5rem;

			&.time {
				display: flex;
				
				.picker {
					margin-right: .25rem;
				}
			}

			&.media {

				.ctrl {
					display: flex;

					.clear {
						width: 100px;
						padding-left: 0;
						padding-right: 0;
					}
				}

				.gallery {
					gap: 10rpx;
					display: grid;
					margin-top: 1rem;
					grid-template-columns: repeat(3, 1fr);

					.item {
						height: 200rpx;
						position: relative;
						overflow: hidden;
						background: var(--theme-bg-card);
						box-shadow: 1px 1px 6px var(--theme-shadow-light);
						border-radius: 2rpx;
						
						.thumbnail {
							height: 200rpx;
							display: block;
						}
						
						.video-container {
							position: relative;
							

							.play-icon {
								top: 50%;
								left: 50%;
								width: 60rpx;
								height: 60rpx;
								z-index: 2;
								position: absolute;
								transform: translate(-50%, -50%);
								pointer-events: none;
							}
						}
							

						.delete {
							top: 10rpx;
							right: 10rpx;
							width: 40rpx;
							height: 40rpx;
							z-index: 3;
							padding: 5rpx;
							position: absolute;
							background: rgba(0, 0, 0, 0.5);
							border-radius: 50%;
						}
					}
				}
			}
		}

		.progress {
			width: 100%;
		}

		.submit {
			width: 10rem;
			margin-top: 1rem;
		}
	}
}