/* components/calendar/index.less */
.calendar {
	flex: 1;
	height: 100%;
	display: flex;
	padding: 32rpx;
	overflow: hidden;
	flex-direction: column;

	.year {
		display: flex;
		padding: 16rpx 0;
		align-items: center;
		margin-bottom: 24rpx;
		justify-content: space-between;

		.btn {
			width: 64rpx;
			height: 64rpx;
			display: flex;
			background: var(--theme-bg-card);
			align-items: center;
			border-radius: 12rpx;
			justify-content: center;

			&:active {
				opacity: .7;
			}
		}

		.text {
			color: var(--theme-text);
			font-size: 32rpx;
			font-weight: 600;
		}
	}

	.weekdays {
		display: grid;
		margin-bottom: 16rpx;
		grid-template-columns: repeat(7, 1fr);

		.weekday {
			color: var(--theme-text-secondary);
			padding: 16rpx 0;
			font-size: 24rpx;
			text-align: center;
		}
	}

	.months {
		flex: 1;
		height: 0;
		padding-bottom: 256rpx;

		.month {
			margin-bottom: 48rpx;

			.title {
				color: var(--theme-text);
				padding: 16rpx 0;
				font-size: 28rpx;
				font-weight: 600;
				margin-bottom: 16rpx;
			}

			.days {
				display: grid;
				grid-gap: 8rpx;
				grid-template-columns: repeat(7, 1fr);

				.day {
					display: flex;
					position: relative;
					align-items: center;
					aspect-ratio: 1;
					border-radius: 12rpx;
					flex-direction: column;
					justify-content: center;
					background: var(--theme-bg-card);

					.number {
						color: var(--theme-text);
						font-size: 28rpx;
					}

					.dot {
						width: 8rpx;
						height: 8rpx;
						border-radius: 50%;
						background: var(--theme-primary);
					}

					&.other-month {
						opacity: .4;
					}

					&.has-journal {
						background: var(--theme-bg-journal);

						.day-number {
							color: var(--theme-wx);
							font-weight: bold;
						}

						&:active {
							opacity: .7;
						}
					}
				}
			}
		}
	}
}