/*
	Joblist (legacy) CSS menu toggle with HTML markup
	<joblist-menu>
		<input type="checkbox" id="joblist-menu">
		<label for="joblist-menu"></label>
		<menu></menu>
		<menu></menu>
	</joblist-menu>
*/
joblist-menu {
	&:has(input[type="checkbox"][id="joblist-menu"]:checked) {
		/* transform: translateX(-100%); */
	}
	&:has(input[type="checkbox"][id="joblist-menu"]:not(:checked)) {
		/* transform: translateX(0); */
	}
	:is(input[type="checkbox"][id="joblist-menu"]) {
		display: none;
	}
	:is(input[type="checkbox"][id="joblist-menu"]) {
		&:not(:checked) {
			& ~ :is(label:hover, label:active) {
				&::before {
					content: "⟻";
				}
			}
			& ~ :is(*:not(label)) {
				display: none;
			}
		}
		&:checked {
			& ~ :is(label:hover, label:active) {
				&::before {
					content: "⟼";
				}
			}
		}
	}
	:is(label[for="joblist-menu"]) {
		&::before {
			content: "⟻";
			position: absolute;
			top: 50%;
			left: 25%;
			transform: translateY(-50%);
			opacity: 0;
			line-height: 0.6;
			transition: all 222ms ease-in-out;
			font-size: 0.8rem;
		}
		&::after {
			content: "≡";
			transform: rotateY(0);
			transition: all 222ms ease-in-out;
			font-size: var(--s);
		}
		&:hover,
		&:active {
			&::before {
				opacity: 1;
				left: 0;
			}
			&::after {
				transform: rotateY(180deg);
			}
			color: var(--c-fg);
		}
		cursor: pointer;
		position: sticky;
		bottom: 0;
		display: flex;
		justify-content: center;
		align-items: center;
		padding: calc(var(--s) / 2);
	}
	:is(menu) {
		:is(a) {
			display: inline-flex;
			padding: calc(var(--s) / 3);
		}
		list-style-type: none;
		display: flex;
		flex-direction: column;
	}
	:is(menu + menu) {
		padding-top: calc(var(--s) / 2);
	}
	:is(joblist-favicon) {
		position: sticky;
		top: 0;
		bottom: 0;
		right: 0;
		padding: calc(var(--s) / 3);
	}
	transition: transform 100ms ease-in-out;
}

/* javascript menu */
joblist-menu {
	max-height: 100vh;
	flex-shrink: 0;
	overflow-y: scroll;
	scrollbar-width: none;
	-ms-overflow-style: none;
}
joblist-menu::-webkit-scrollbar {
	display: none;
}
joblist-menu button {
	position: sticky;
	top: 0;
	margin: 0.1rem;
	border-color: transparent;
	background-color: transparent;
	transition: all 200ms ease-in-out;
}

joblist-menu li {
	display: flex;
}

joblist-menu li a {
	flex-grow: 1;
	text-transform: capitalize;
}