:host {
	position: fixed;
	top: 0;
	left: 0;
}

#container {
	z-index: 1000;
	position: fixed;
	bottom: -100%;
	left: 5px;
	right: 5px;
	background: #fff9;
	backdrop-filter: blur(10px);
	border-radius: var(--border-radius);
	transition: bottom 0.2s ease;
	height: calc(100% - 10px);
	box-shadow: var(--shadow);
	padding: 10px;
}

#container.visible {
	bottom: 5px;
}

#close-button {
	position: absolute;
	top: 10px;
	right: 10px;
	width: 25px;
	height: 25px;
	border-radius: 100%;
	background: var(--page-background);
	cursor: pointer;
}

#title {
	font-size: 1.2em;
	user-select: none;
	margin-bottom: 10px;
}

#month-container {
	height: calc(100% - 30px);
	overflow-y: auto;
	overscroll-behavior: contain;
}

.month-item {
	padding: 10px;
	padding-left: 20px;
	margin: 5px;
	border-radius: var(--border-radius);
	user-select: none;
	cursor: pointer;
	position: relative;
}

.month-item.none {
	font-style: italic;
}

.month-item:before {
	content: '';
	display: block;
	position: absolute;
	background: var(--primary);
	top: 0px;
	left: 0px;
	width: 4px;
	height: 47px;
}

.month-item:after {
	content: '';
	display: block;
	position: absolute;
	background: var(--primary);
	top: 50%;
	transform: translate(0, -50%);
	left: 0px;
	width: 12px;
	height: 4px;
}

.month-item:first-child:before {
	top: 50%;
	height: 27px;
}

.month-item.none:before {
	top: 0;
	height: 20px;
}

.month-item:hover {
	background: var(--primary);
	color: var(--fg-primary);
}

.year-item {
	padding: 10px 20px;
	font-size: 1.1em;
	margin: 5px;
	position: relative;
	font-weight: bold;
	background: #fffa;
	border-radius: var(--border-radius);
	box-shadow: #22322355 1px 1px 2px;
}

.year-item:before {
	content: '';
	display: block;
	position: absolute;
	background: var(--primary);
	top: 0px;
	left: 0px;
	width: 4px;
	height: 50px;
}

.year-item:after {
	content: '';
	display: block;
	position: absolute;
	background: var(--primary);
	top: 50%;
	transform: translate(0, -50%);
	left: -4px;
	width: 12px;
	height: 12px;
	border-radius: 100%;
}