.calendar {
	display: grid;
	grid-template-columns: repeat(7, minmax(0, 55px));
	gap: var(--s-2);
	width: max-content;
	max-width: 100%;
}

.calendarContainer {
	display: flex;
	flex-direction: column;
	gap: var(--s-2);
	height: max-content;
	overflow-x: visible;
	max-width: 100%;
}

.calendarDayHeader {
	font-size: var(--font-md);
	font-weight: var(--weight-semi);
}

.calendarDay {
	aspect-ratio: 1;
	font-size: var(--font-xs);
	font-weight: var(--weight-semi);
	background-color: var(--color-bg-high);
	padding: var(--s-1);
	position: relative;
	display: grid;
	place-items: center;
}

.calendarDayDate {
	position: absolute;
	top: 1px;
	left: 6px;
}

.calendarDayLogo {
	position: absolute;
	border-radius: var(--radius-box);
	top: 50%;
	left: 50%;
	transform: translate(-15%, -20%);
	width: 48%;
	height: auto;
	max-width: 28px;
	max-height: 28px;
}

.calendarDayManyEvents {
	position: absolute;
	border-radius: var(--radius-box);
	top: 50%;
	left: 50%;
	transform: translate(-15%, -20%);
	width: 48%;
	height: auto;
	aspect-ratio: 1;
	max-width: 28px;
	max-height: 28px;
	border: var(--border-style);
	display: grid;
	place-items: center;
	font-size: var(--font-md);
	background-color: var(--color-bg-higher);
}

.calendarDayToday {
	color: var(--color-text-accent);
	font-weight: var(--weight-bold);
}

.calendarDayPrevious {
	background-color: var(--color-bg);
}

.calendarMonthSelector {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--s-2);
	font-weight: var(--weight-bold);

	& a {
		font-size: var(--font-xl);
	}

	& > div {
		font-size: var(--font-lg);
		margin-block-start: var(--s-1);
	}
}

.sectionDivider {
	font-size: var(--font-md);
	font-weight: var(--weight-bold);
	color: var(--color-text-high);
	border-bottom: var(--border-style);
	width: 100%;
	padding-block: var(--s-1);
}

.eventsContainer {
	display: flex;
	flex-direction: column;
	gap: var(--s-16);
	align-items: center;
}

@container (width >= 720px) {
	.eventsContainer {
		flex-direction: row;
		gap: var(--s-8);
		overflow-x: initial;
		align-items: flex-start;
	}

	.calendarContainer {
		position: sticky;
		top: 47px;
	}
}

.eventInfo {
	display: flex;
	align-items: center;
	gap: var(--s-2);
	font-weight: var(--weight-semi);
	color: var(--color-text);
	width: max-content;

	& img {
		border-radius: var(--radius-avatar);
	}
}

.eventInfoTime {
	display: block;
	color: var(--color-text-high);
	font-size: var(--font-sm);
}

.leaderboardList {
	display: flex;
	gap: var(--s-4);
	flex-direction: column;

	& li::marker {
		font-size: var(--font-lg);
		font-weight: var(--weight-bold);
		color: var(--color-accent);
		padding-inline-end: var(--s-2);
	}
}

.leaderboardListRow {
	display: flex;
	flex-direction: column;
	gap: var(--s-2);
	padding-inline-start: var(--s-3);
}

.socialLink {
	font-size: var(--font-sm);
	color: var(--text-main);
	display: flex;
	gap: var(--s-2);
	align-items: center;
	max-width: max-content;

	& svg {
		width: 18px;
	}
}

.socialLinkIconContainer {
	background-color: var(--color-bg-higher);
	display: grid;
	place-items: center;
	border-radius: var(--radius-box);
	padding: var(--s-2);
}

.socialLinkTwitch {
	& svg {
		fill: #9146ff;
	}
}

.socialLinkYoutube {
	& svg {
		fill: #f00;
	}
}

.socialLinkBsky {
	& path {
		fill: #1285fe;
	}
}
