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

.CalendarRange {
	&-header {
		display: flex;
		align-items: center;
		padding: 12px;

		&-title {
			flex: 1;
			text-align: center;
		}
	}
	&-title-color {
		color: @theme_primary1_color;
		font-size: 14px;
	}

	&-main {
		&-header {
			display: flex;
			align-items: center;
			color: @common_level2_base_color;
			padding: 12px 0;
			border-top: 1px solid @common_line_light_color;

			&-item {
				flex: 0 0 14.2%;
				text-align: center;
			}
		}

		&-content {
			display: flex;
			align-items: center;
			flex-wrap: wrap;

			&-item {
				flex: 0 0 14.2%;
				&-o {
					padding: 3px 0;
				}
			}

			&-itemSubtitle {
				color: rgba(23, 26, 29, 0.4);
			}

			&-itemBox {
				height: 36px;
				// max-width: 36px;
				// line-height: 36px;
				// margin: auto;
				// text-align: center;
			}

			&-itemBox-l {
				height: 36px;
				max-width: 36px;
				line-height: 36px;
				margin: auto;
				text-align: center;
			}
		}

		&-month {
			position: relative;
			display: flex;
			flex-direction: column;
			justify-content: center;
			opacity: 0.24;
			&-new {
				position: relative;
				display: flex;
				flex-direction: column;
				justify-content: center;
			}
			&-div {
				position: absolute;
				font-size: 32px;
				line-height: 40px;
				color: #171a1d;
				display: flex;
				width: 100%;
				justify-content: center;
				align-items: center;
				&-new {
					position: absolute;
					font-size: 64px;
					line-height: 40px;
					color: #171a1d;
					display: flex;
					width: 100%;
					justify-content: center;
					align-items: center;
					opacity: 0.24;
          z-index: -1;
				}
			}
		}
	}

	&-today {
		background-color: #f2f2f6;
		color: @theme_primary1_color;
		height: 36px;
		line-height: 36px;
		margin: auto;
		text-align: center;
		max-width: 36px;
		border-radius: 50%;
	}

	&-hover-new {
		background-color: @theme_primary1_color;
		color: @common_bg_z1_color;
		border-radius: 50%;
	}

	&-hover {
		background-color: @theme_primary1_color;
		color: @common_bg_z1_color;
		&-l {
			border-radius: 22px 0 0 22px;
		}
		&-r {
			border-radius: 0 22px 22px 0;
		}
		&-all {
			border-radius: 50%;
		}
	}
}