borgmatic/docs/_includes/components/toc.css

.elv-toc {
	font-size: 1rem; /* Reset */
}
.elv-toc details {
	--details-force-closed: (max-width: 79.9375em); /* 1023px */
}
.elv-toc details > summary {
	font-size: 1.375rem; /* 22px /16 */
	margin-bottom: .5em;
}
@media (min-width: 80em) {
	.elv-toc {
		position: absolute;
		left: 3rem;
		width: 16rem;
		z-index: 1;
	}
	.elv-toc details > summary {
		margin-top: 0;
	}
	.js .elv-toc details > summary {
		display: none;
	}
}

.elv-toc-list {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	padding-left: 0;
	padding-right: 0;
	margin: 0 0 2.5em;
	list-style: none;
}
.elv-toc-list li {
	font-size: 0.9375em; /* 15px /16 */
	line-height: 1.466666666667; /* 22px /15 */
}
/* Nested lists */
.elv-toc-list ul {
	padding: 0 0 .75em 0;
	margin: 0;
	list-style: none;
}

/* Menus nested 2 or more deep */
.elv-toc-list ul ul {
	padding-bottom: 0;
	padding-left: 0.625rem; /* 10px /16 */
}

/* Display inline menus 4 or more deep */
.elv-toc-list ul ul ul > li {
  display: inline-block;
}

/* List items */
.elv-toc summary,
.elv-toc-list a {
	padding: .15em .25em;
}
.elv-toc-list a {
	display: block;
}
.elv-toc-list a:not(:hover) {
	text-decoration: none;
}
.elv-toc-list li {
	margin: 0;
	padding: 0;
}
.elv-toc-list > li {
	flex-grow: 1;
	flex-basis: 14.375rem; /* 230px /16 */
}
/* Top level links */
.elv-toc-list > li > a {
	color: #222;
	font-weight: 600;
	border-bottom: 1px solid #ddd;
	margin-bottom: 0.25em; /* 4px /16 */
}

/* Active links */
.elv-toc-list li.elv-toc-active > a {
	background-color: #dff7ff;
}
.elv-toc-list ul .elv-toc-active > a:after {
	content: "";
}

/* Show only active nested lists */
.elv-toc-list ul.elv-toc-active,
.elv-toc-list li.elv-toc-active > ul {
	display: block;
}

/* Footer category navigation */
.elv-cat-list-active {
	font-weight: 600;
}

.breadcrumb-item.active {
  color: var(--primary-color);
}

#breadcrumb ol,
#breadcrumb ul {
  margin: 0;
  padding: 0 0 1em;
}

#breadcrumb li {
  display: inline;
}

#breadcrumb li:not(:last-child)::after {
  content: " ˃"
}

#breadcrumb a:not(:hover) {
	text-decoration: none;
}

#breadcrumb a {
	text-decoration-color: #00bcd4;
}