%toc-row-item {
	background: $panel-bg;
	position: relative;
	z-index: 1;
}

.tify-toc {
	@extend %panel;
	overflow-y: auto;
	position: relative;
	z-index: 0;
}

.tify-toc-header {
	display: flex;
	margin: 0 g(.25) g(.5);
}

.tify-toc-label {
	@extend %toc-row-item;
	padding-right: .2em;
}

.tify-toc-link {
	border-radius: $br;
	color: $link-color;
	cursor: pointer;
	display: block;
	overflow: hidden;
	padding: g(.25);
	position: relative;
	text-decoration: none;

	&:focus,
	&:hover {
		background: $base-color-paler;
		color: $link-hover-color;

		// Element label and page number
		> span {
			background: $base-color-paler;
		}
	}

	&.-dots {
		// Dotted line below
		&::after {
			border-top: 1px dotted;
			bottom: g(.5);
			content: '';
			left: g(.25);
			min-width: 4em;
			position: absolute;
			right: g(.25);
		}
	}
}

.tify-toc-list {
	margin: 0 0 g(.25) g(.25);
	padding: 0;
	position: relative;
	z-index: 0;

	& & {
		// Make space for vertical connector to the left
		margin: 0 0 0 g(1.25);
	}

	a {
		border: 0;
		box-shadow: none;
	}
}

.tify-toc-page {
	@extend %toc-row-item;
	float: right;
	padding-left: .2em;
	z-index: 1;
}

.tify-toc-structure {
	display: block;
	margin: 0; // For smooth embedding
	position: relative;

	&.-current {
		// Bold vertical marker
		box-shadow: g(-.5) 0 $panel-bg, g(-.75) 0 $base-color-pale;
	}

	&.-expanded {
		// Vertical connector to the left
		&::after {
			border-left: 1px solid $base-color-pale;
			content: '';
			height: 100%;
			left: calc(g(.75) - 1px);
			position: absolute;
			top: g(.25);
			z-index: -2;
		}

		&:last-child::after {
			height: calc(100% - g());
		}
	}

	& & {
		// Horizontal connector
		&::before {
			border-top: 1px solid $base-color-pale;
			content: '';
			display: block;
			height: 100%;
			left: calc(g(-.5) - 1px);
			position: absolute;
			top: g(.75);
			width: calc(g(.5) + 1px);
		}

		// Prevent vertical line from protruding at the bottom
		&:last-child::before {
			background: $panel-bg;
		}
	}
}

.tify-toc-toggle-all {
	@extend %button-small;
	margin: g(.25);
}

.tify-toc-toggle {
	@extend %button-small;
	float: left;
	margin: g(.25) 0 0 g(.25);
	padding: 0;
	position: relative;

	// Gap between vertical line and button
	&::after {
		border-top: calc(g(.25) + 1px) solid $panel-bg;
		content: '';
		pointer-events: none;
		position: absolute;
		top: 100%;
		width: g();
		z-index: -1;
	}
}