@use "@styles/color";
@use "@styles/var";

/* The calendar. A month at a time, with a mark under every day that has
 * writing on it - so it doubles as a picture of how the journal is kept. */
.calendar {
	width: 19rem;
	padding: 0.75rem;
	font-size: 0.85rem;
}

.calendar__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var.$elem-spacing;
	margin-bottom: 0.5rem;
}

.calendar__month {
	font-family: var.$font-hand;
	font-size: 1.35rem;
	line-height: 1;
	color: color.$ink;
	text-transform: capitalize;
}

.calendar__step {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 1.9rem;
	height: 1.9rem;
	border-radius: var.$block-radius;
	color: color.$ink-soft;
	transition: background-color var.$trans-quick, color var.$trans-quick;

	&:hover:not(:disabled) {
		color: color.$ink;
		background-color: color.$paper-shade;
	}

	&:disabled {
		opacity: 0.3;
		cursor: default;
	}
}

.calendar__grid {
	display: grid;
	grid-template-columns: repeat(7, 1fr);
	gap: 0.1rem;
}

.calendar__weekday {
	text-align: center;
	font-size: 0.66rem;
	letter-spacing: 0.03em;
	text-transform: uppercase;
	color: color.$ink-faint;
	padding-bottom: 0.25rem;
}

.calendar__day {
	position: relative;
	aspect-ratio: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: var.$block-radius;
	color: color.$ink;
	transition: background-color var.$trans-quick, color var.$trans-quick;

	&:hover:not(:disabled) {
		background-color: color.$paper-shade;
	}

	&:disabled {
		color: color.$ink-faint;
		cursor: default;
	}
}

.calendar__day--outside {
	color: color.$ink-faint;
	opacity: 0.55;
}

/* A day with writing on it. The dot is the affordance; the weight change is
 * what you actually notice when scanning a month. */
.calendar__day--written {
	font-weight: 600;

	&::after {
		content: "";
		position: absolute;
		bottom: 0.18rem;
		left: 50%;
		transform: translateX(-50%);
		width: 0.3rem;
		height: 0.3rem;
		border-radius: 50%;
		background-color: color.$ribbon;
	}
}

.calendar__day--today {
	box-shadow: inset 0 0 0 1px color.$caramel;
}

.calendar__day--current {
	color: #fff6e6;
	background-color: color.$ribbon;

	&:hover {
		background-color: color.$ribbon;
	}

	&::after {
		background-color: #fff6e6;
	}
}

.calendar__foot {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var.$elem-spacing;
	margin-top: 0.55rem;
	padding-top: 0.5rem;
	border-top: 1px solid color.$paper-edge;
}

.calendar__link {
	font-size: 0.78rem;
	color: color.$ink-soft;
	padding: 0.25rem 0.4rem;
	border-radius: var.$block-radius;

	&:hover {
		color: color.$ink;
		background-color: color.$paper-shade;
	}
}

.calendar__count {
	font-size: 0.72rem;
	color: color.$ink-faint;
}