.root {
	background-color: var(--color-bg);
	border-radius: var(--radius-box);
	padding: var(--s-4);
	border: var(--border-style);
	max-width: fit-content;
}

.header {
	display: flex;
	gap: var(--s-2);
	justify-content: space-between;
	align-items: center;
	margin-block-end: var(--s-1);
	min-width: 250px;
}

.heading {
	font-size: var(--font-lg);
}

.navButton {
	background-color: transparent;
	color: var(--color-text-accent);
	border: none;
	padding: 0;
	border-radius: 100%;

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

.navIcon {
	width: 27.5px;
}

.grid {
	width: 100%;
}

.headerCell {
	color: var(--color-text-high);
}

.cell {
	display: grid;
	place-items: center;
	font-size: var(--font-sm);
	padding: var(--s-1-5);
	width: 35px;
	height: 35px;
	border-radius: var(--radius-field);
	outline-color: var(--color-accent);

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

	&[data-outside-month] {
		display: none;
	}

	&[data-disabled] {
		opacity: 0.5;
		background-color: transparent !important;
	}

	&[data-selected] {
		background-color: var(--color-bg-high);
		color: var(--color-text-accent);
	}

	&:hover {
		background-color: var(--color-bg-high);
		outline: initial;
	}
}
