button.svelte-2e08qh {
		font-size: var(--vats-text-ms);
		color: var(--vats-text);
		background: transparent;
		cursor: pointer;
		border: 0;
	}

	:root {
		--sidebar-book-shadow: drop-shadow(1px 3px 4px var(--vats-text3));
		--sidebar-book-currentshadow: drop-shadow(
			1px 3px 4px hsl(from var(--vats-coloredtext) h s l / 20%)
		);
		--sidebar-book-hovershadow: drop-shadow(0 0px 4px var(--vats-coloredtext));
	}

	[data-theme='dark'] {
		--sidebar-book-shadow: drop-shadow(1px 1px 3px hsl(from var(--vats-text2) h s l / 30%));
		--sidebar-book-currentshadow: drop-shadow(
			2px 2px 5px hsl(from var(--vats-text2) h s l / 30%)
		);
		--sidebar-book-hovershadow: drop-shadow(0 0px 8px var(--vats-text));
	}

	.side-bar.svelte-2e08qh {
		flex: none;
		overflow-y: auto;
		overflow-x: hidden;
		background-color: var(--vats-sidebar-background);
		width: auto;
		height: 100%;
		box-sizing: border-box;
		border-right: 1px solid var(--vats-topbar-bordercolor);
		padding: 0rem;
		padding-top: 1.5rem;

		& > div:where(.svelte-2e08qh) {
			width: calc(100% - 0.25rem);
			/* 150%; */
			height: 100%;
			overflow: hidden;
			grid-template-columns: auto 1fr;
			display: grid;
		}
	}

	ul.svelte-2e08qh {
		list-style: none;
	}

	.sidebar-icons.svelte-2e08qh {
		width: content;
		height: content;
		overflow: auto;
		text-align: center;
		border-right: 0.5px solid var(--vats-topbar-bordercolor);
		padding: 0;

		li:where(.svelte-2e08qh) {
			display: flex;
			flex-direction: column;
			align-items: center;
			padding: 1rem 2rem 2rem 1rem;
			gap: 0;
			text-transform: uppercase;
			-webkit-filter: var(--sidebar-book-shadow);
			filter: var(--sidebar-book-shadow);

			.icon:where(.svelte-2e08qh) {
				max-height: var(--vats-bookicon-size);
				max-width: var(--vats-bookicon-size);
				width: var(--vats-bookicon-size);
			}

			.icon:where(.svelte-2e08qh):hover {
				-webkit-filter: var(--sidebar-book-hovershadow);
				filter: var(--sidebar-book-hovershadow);
			}

			&.current {
				border-right: 1px solid var(--vats-coloredtext);

				.icon:where(.svelte-2e08qh) {
					-webkit-filter: var(--sidebar-book-currentshadow);
					filter: var(--sidebar-book-currentshadow);
				}
			}
		}
	}

	.sidebar-toc.svelte-2e08qh {
		overflow-y: auto;
		padding-left: 2rem;
		padding-top: 0.5rem;
		font: 400 var(--vats-text-m) var(--vats-font);
		color: var(--vats-text2);

		.title:where(.svelte-2e08qh) {
			color: var(--vats-coloredtext);
			font-size: var(--vats-text-l);
			font-weight: 500;
		}

		& > ul:where(.svelte-2e08qh) {
			line-height: 170%;
			padding-top: 0.5rem;

			& > li:where(.svelte-2e08qh) {
				& > span:where(.svelte-2e08qh) {
					padding-top: 2rem;
					text-transform: uppercase;
					font-size: var(--vats-text-ms);
					color: var(--vats-text2);
					font-weight: 500;
				}

				& > ul:where(.svelte-2e08qh) > li:where(.svelte-2e08qh) {
					font-size: var(--vats-text-ms);
					padding-left: 1rem;
				}
			}

			hr:where(.svelte-2e08qh) {
				width: 50%;
				margin: 1.5rem 0 1.5rem 0;
			}
		}

		button:where(.svelte-2e08qh) {
			width: 100%;
			color: inherit;
			text-underline-offset: 0.35rem;

			& > div:where(.svelte-2e08qh) {
				overflow: hidden;
				white-space: nowrap;
				text-overflow: ellipsis;
				text-align: left;
			}

			&:hover {
				text-decoration: underline;
				text-decoration-thickness: 0.1rem;
			}

			&.current {
				font-weight: 500;
				color: var(--vats-coloredtext);

				&:hover {
					text-decoration: none;
				}
			}
		}
	}