:host {
	display: block;
	--other-month-opacity: 0.5;
	padding: 0.5em;
	border: 1px solid rgb(var(--smoothly-input-border));
}

:host>smoothly-input-month {
	padding: 0 0.5em
}

:host>table {
	table-layout: fixed;
	width: 100%;
}

:host>table>thead>tr>th,
:host>table>tr>td {
	text-align: center;
	padding: 0.5em;
	min-width: 2em;
	box-sizing: border-box;
	background-color: rgb(var(--smoothly-input-background));
	color: rgb(var(--smoothly-input-foreground));
	-webkit-user-select: none;
	user-select: none;
}
:host>table>tr>td {
	position: relative;
	cursor: pointer;
}

:host>table>tr>td.currentMonth {
	color: rgb(var(--smoothly-default-contrast));
}

:host>table>tr>td:not(.currentMonth) {
	color: rgba(var(--smoothly-default-contrast), var(--other-month-opacity));
}

:host>table>tr>td:nth-child(6):not(.currentMonth).selected,
:host>table>tr>td:nth-child(6):not(.currentMonth).dateRange,
:host>table>tr>td:nth-child(7):not(.currentMonth).selected,
:host>table>tr>td:nth-child(7):not(.currentMonth).dateRange {
	color: rgba(var(--smoothly-default-contrast));
}

:host>table>tr>td:nth-child(6),
:host>table>tr>td:nth-child(7) {
	color: rgb(var(--smoothly-calendar-weekend-foreground, var(--smoothly-danger-color)));
}

:host>table>tr>td:nth-child(6):not(.currentMonth),
:host>table>tr>td:nth-child(7):not(.currentMonth) {
	color: rgba(var(--smoothly-calendar-weekend-foreground, var(--smoothly-danger-color)), var(--other-month-opacity));
}

:host>table>tr>td:not(.selected, .disable):hover {
	color: rgb(var(--smoothly-primary-contrast));
	background: rgb(var(--smoothly-primary-tint));
}

:host>table>tr>td.selected {
	color: rgb(var(--smoothly-primary-contrast));
	background: rgb(var(--smoothly-primary-color));
}

:host>table>tr>td.today::before {
	content: "";
	inset: 2px;
	position: absolute;
	border: 1px solid currentColor;
}

:host>table>tr>td.dateRange {
	color: rgb(var(--smoothly-primary-contrast));
	background: rgb(var(--smoothly-primary-tint));
}

:host>table>tr>td.disable {
	cursor: not-allowed;
	opacity: 0.5;
}