.cl-calendar {
	&__header {
		position: relative;
		padding-bottom: 10rpx;
		text-align: center;
	}

	&__title {
		font-size: 30rpx;
	}

	&__close {
		position: absolute;
		right: 0;
		top: 0;
		font-size: 36rpx;
	}

	&__container {
		margin-bottom: 20rpx;
	}

	&__selector {
		display: flex;
		align-items: center;
		justify-content: center;
		height: 80rpx;

		&-icon {
			position: relative;
			top: 1rpx;
		}

		&-date {
			font-size: 28rpx;
			margin: 0 30rpx;
			width: 200rpx;
			text-align: center;
		}
	}

	&__table {
		display: flex;
		flex-direction: column;
	}

	&__tr {
		display: flex;
	}

	&__td {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		flex: 1;
		padding: 16rpx 0;
		margin: 6rpx 0;
		position: relative;

		&.is-disabled {
			color: #ccc;
			background-color: rgba(249, 249, 249, 0.3);

			.cl-calendar__remark {
				color: #ccc;
			}
		}

		&.is-through {
			background-color: #f2f6fc;

			&.is-start {
				border-radius: 10rpx 0 0 10rpx;
			}

			&.is-end {
				border-radius: 0 10rpx 10rpx 0;
			}
		}

		&.is-start,
		&.is-end {
			.cl-calendar__value {
				background-color: $cl-color-primary;
				color: #fff;
			}
		}
	}

	&__value {
		display: flex;
		justify-content: center;
		align-items: center;
		height: 60rpx;
		width: 60rpx;
		border-radius: 100rpx;
		font-size: 30rpx;
		text-overflow: ellipsis;
		white-space: nowrap;
		text-align: center;
		overflow: hidden;
	}

	&__dot {
		position: absolute;
		right: 10rpx;
		top: 10rpx;
		height: 16rpx;
		width: 16rpx;
		background-color: transparent;
		border-radius: 16rpx;
	}

	&__remark {
		display: inline-block;
		width: 100rpx;
		font-size: 20rpx;
		margin-top: 6rpx;
		color: #666;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
		text-align: center;
	}

	&__today-btn {
		position: absolute;
		right: 30rpx;
		border: 0;
		font-size: 22rpx;
		padding: 0 10rpx;
		height: 40rpx;
		line-height: 40rpx;

		&::after {
			border: 0;
		}
	}
}