/* pages/main/moment/index.wxss */
.moment {

	.tips {
		padding: 4px 12px;
		font-size: .8rem;
		text-align: justify;
		text-indent: 2em;
	}

	.action {
		padding: 8px 12px;

		.line {
			display: flex;
			margin-bottom: .5rem;
			justify-content: space-between;

			.btn {
				width: 50%;
				margin-right: 1rem;
				
				&:last-child {
					margin-right: 0;
				}
			}
		}
	}

	.uploading {
		padding: 4px 12px;
		margin-bottom: 12rpx;

		.progress {
			margin-bottom: 8rpx;
		}

		.text {
			color: #777;
			display: flex;
			font-size: .8rem;
			justify-content: space-between;
		}
	}
	
	.items {
		column-gap: .25rem;
		column-count: 4;
		padding-bottom: 2rem;

		.item {
			position: relative;

			.thumbnail {
				width: 100%;
				display: block;
				overflow: hidden;
				background: #FFF;
				break-inside: avoid;
				margin-bottom: .25rem;

				&.video {
					height: auto;
					position: relative;
	
					&::after {
						content: "";
						top: 50%;
						left: 53%;
						width: 0;
						height: 0;
						position: absolute;
						transform: translate(-50%, -50%);
						border-top: 16px solid transparent;
						border-left: 24px solid rgba(255, 255, 255, .9);
						border-bottom: 16px solid transparent;
						pointer-events: none;
					}
				}
			}

			.checkbox {
				top: 0;
				right: 0;
				padding: 16rpx 0 16rpx 16rpx;
				z-index: 2;
				position: absolute;
				background: transparent;
			}

			.checkbox-fill {
				top: 24rpx;
				right: 26rpx;
				width: 16px;
				height: 16px;
				z-index: 1;
				position: absolute;
				background: #FFF;
				border-radius: 50%;
			}
		}
	}
}

.archive-popup {

	.container {
		width: 100vw;
		background: var(--td-bg-color-container);
		border-top-left-radius: 16rpx;
		border-top-right-radius: 16rpx;

		.header {
			display: flex;
			align-items: center;
			height: 116rpx;
	
			.title {
				flex: 1;
				color: var(--td-text-color-primary);
				font-size: 36rpx;
				text-align: center;
				font-weight: 600;
			}
		
			.btn {
				margin: 0 .5rem;
		
				&.cancel {
					color: var(--td-text-color-secondary);
				}
			
				&.confirm {
					color: #07C160;
				}
			}
		}

		.content {
			padding: 16rpx 32rpx;

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

				.label {
					color: #777;
				}

				&.type {
					display: flex;

					.radio {
						margin-right: 1em;
					}
				}

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