.buttonsContainer {
	display: flex;
	justify-content: space-between;
	gap: var(--s-6);
	align-items: start;
	flex-wrap: wrap-reverse;
}

.navigateButtonsContainer {
	display: flex;
	flex-wrap: wrap;
	gap: var(--s-4);
	width: 100%;
}

.navigateButton {
	all: unset;
	background-color: var(--color-bg-higher);
	border: var(--border-style);
	display: flex;
	align-items: center;
	gap: var(--s-2);
	font-weight: var(--weight-bold);
	border-radius: var(--radius-field);
	padding: var(--s-1) var(--s-2);
	font-size: var(--font-xs);
	flex: 1 1 0;

	&:focus-visible {
		outline: var(--focus-ring);
	}

	&:not(.navigateArrowButton) {
		justify-content: center;
		flex-basis: 100%;
		background-color: var(--color-bg);
		min-height: 30px;
	}

	& svg {
		max-width: 1.75rem;
		min-width: 1.75rem;
		max-height: 1.75rem;
	}
}

@container (width >= 640px) {
	.navigateButton {
		flex: initial;
	}

	.navigateButtonsContainer {
		width: initial;
	}
}

.navigateArrowButtonRange {
	font-variant-numeric: tabular-nums;
	color: var(--color-text-high);
	font-size: var(--font-2xs);
}

@container (width >= 640px) {
	.navigateArrowButton {
		min-width: 7.25rem;
		flex-basis: auto;
	}

	.navigateButton:not(.navigateArrowButton) {
		flex-basis: auto;
	}
}

.navigateArrowButton {
	gap: var(--s-1);

	& svg {
		margin-inline-start: -5px;
	}
}

.columnsContainer {
	display: grid;
	grid-template-columns: repeat(var(--columns-count), 225px);
	gap: var(--s-12);
	overflow-x: auto;
}

.dayHeader {
	border: var(--border-style);
	border-radius: var(--radius-box);
	background-color: var(--color-bg-high);
	padding: var(--s-2);
	text-align: center;
	font-size: var(--font-md);
	font-weight: var(--weight-bold);
}

.dayHeaderToday {
	background-color: var(--color-bg-higher);
	border: var(--border-style-high);
}

.dayHeaderWeekday {
	font-size: var(--font-xs);
	font-weight: var(--weight-semi);
	color: var(--color-text-high);
}

.dayEvents {
	margin-block-start: var(--s-4);
	display: flex;
	flex-direction: column;
	gap: var(--s-4);
}

.clockHeader {
	font-weight: var(--weight-semi);
	font-size: var(--font-sm);
}

.clockHeaderDivider {
	width: 100%;
	height: 3px;
	background-color: var(--color-bg-high);
	border-radius: var(--radius-box);
}

.hiddenEventsButton {
	& svg {
		width: 1rem;
		height: 1rem;
	}
}

.calendar {
	background-color: initial;
	padding: var(--s-2);
	border: none;
}
