@import (reference) 'dingtalk-theme/dingtalk-x/mob.less';

.repeat {
	display: flex;
	flex-direction: column;
	padding: 12px 16px;

	&-title {
		font-size: 16px;
		color: #000000;
		margin-bottom: 10px;
	}

	&-header {
		background-color: #fff;
		padding: 16px;
		margin-bottom: 8px;

		&-title {
			font-size: 18px;
			font-weight: 600;
			color: #171a1d;
			line-height: 26px;
		}
	}

	&-content {
		background: #eff8ff;
		border: 1px solid #1a6fb8;
		border-radius: 8px;
		padding: 8px 12px;
	}

	&-list {
		&-item {
			background: #fff;
			border-radius: 8px;
			padding: 12px;
			margin-bottom: 8px;

			&-header {
				display: flex;
				align-items: center;
				justify-content: space-between;
				margin-bottom: 8px;

				&-left {
					flex: 1;
				}

				&-right {
					color: #1a6fb8;
					font-size: 14px;
				}
			}

			&-footer {
				display: flex;
				justify-content: flex-end;
				margin-top: 12px;
				gap: 8px;

				.btn {
					width: 80px;
					height: 32px;
					border-radius: 16px;
					display: flex;
					align-items: center;
					justify-content: center;
					font-size: 14px;

					&-delete {
						border: 1px solid #ff4d4f;
						color: #ff4d4f;
					}

					&-primary {
						border: 1px solid #1a6fb8;
						color: #1a6fb8;
					}

					&-view {
						background: #1a6fb8;
						color: #fff;
					}
				}
			}
		}
	}

	&-item {
		display: flex;
		align-items: flex-start;
		font-size: 14px;
		margin-bottom: 4px;
		line-height: 22px;

		&-header {
			margin-bottom: 4px;
			display: flex;
			align-items: center;
			justify-content: space-between;
		}

		&-title {
			color: rgba(23, 26, 29, 0.6);
			width: 84px;
			flex-shrink: 0;
		}

		&-title2 {
			color: rgba(23, 26, 29, 0.6);
			flex-shrink: 0;
		}

		&-value {
			color: #171a1d;
		}

		&-subtitle {
			font-size: 12px;
			color: rgba(23, 26, 29, 0.6);
			margin-top: 2px;
		}

		&-status {
			font-size: 14px;
		}

		&-divider {
			height: 1px;
			background-color: #e0e0e0;
			margin: 8px 0;
		}

		&-footer {
			display: flex;
			justify-content: flex-end;
		}

		&-button {
			width: 60px;
			height: 30px;
			border-radius: 100px;
			background-color: #1a6fb8;
			color: #fff;
			display: flex;
			align-items: center;
			justify-content: center;
			font-size: 14px;
		}
	}
}

.repeat-bottom-button {
	position: fixed;
	bottom: 0;
	left: 0;
	right: 0;
	height: 68px;
	background: #fff;
	display: flex;
	align-items: center;
	padding: 0 12px;
	box-shadow: 0 -2px 4px rgba(0, 0, 0, 0.1);

	&-left {
		display: flex;
		align-items: center;
		gap: 12px;
		flex: 1;
	}

	&-add {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		color: #666;
		font-size: 14px;
		width: 28px;

		img {
			width: 20px;
			height: 20px;
		}
	}

	&-cancel {
		height: 42px;
		flex: 1;
		border: 1px solid #ff4d4f;
		border-radius: 8px;
		color: #ff4d4f;
		font-size: 17px;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	&-submit {
		height: 44px;
		flex: 1;
		background: #2b6de5;
		border-radius: 8px;
		color: #fff;
		font-size: 17px;
		display: flex;
		align-items: center;
		justify-content: center;
		margin-left: 12px;
	}
}