@import "../../common";
.ub_table-of-contents {
	box-sizing: border-box;
	transition: all 0.5s ease-in-out;
	background-color: #fafafa;
	border: 1px solid #dfdfdf;
	padding: 30px;
	margin-top: 20px;
	margin-bottom: 20px;
	display: grid;
	overflow: hidden;

	* {
		box-sizing: border-box;
	}

	ul,
	ol {
		margin-bottom: 0;
		margin-left: 1.3em;
		padding-inline-start: 0;
		padding-left: 0;
		li:not(:first-child) {
			margin-top: var(--ub-toc-item-spacing, 0);
		}
		ul,
		ol {
			margin-top: var(--ub-toc-item-spacing, 0);
		}
	}
	ol {
		list-style-type: none;
		counter-reset: item;
		margin: 0;
		padding: 0;
		> li {
			display: table;
			counter-increment: item;
			&:before {
				content: counters(item, ".") ". ";
				display: table-cell;
				padding-right: 0.6em;
			}
		}
	}
	li ol > li {
		margin: 0;
		&:before {
			content: counters(item, ".") " ";
		}
	}
	&-header {
		text-align: center;
		font-size: 20px;
		font-weight: 500;
		display: grid;
		grid-template-columns: minmax(10px, 1fr) auto;
		transition: all 0.5s ease-in-out;
	}

	&-header-toggle {
		display: flex;
		align-items: center;
		padding-left: 5px;
	}

	&-collapsed {
		padding: 10px;
	}

	@for $i from 1 through 3 {
		&-#{$i}-column {
			column-count: $i;
		}
	}

	&-container {
		transition: all 0.5s ease-in-out;
		overflow: hidden;
	}
	.ub_table-of-contents-container ul > li:before {
		content: none;
	}
	&-header-container,
	&-extra-container {
		padding: 15px 30px;
		transition: all 0.5s ease-in-out;
	}
	&-header-container {
		display: grid;
	}
}

.ub_table-of-contents,
.ub_table-of-contents-collapsed {
	padding: 0;
}

.ub_table-of-contents-collapsed .ub_table-of-contents-extra-container {
	padding: 0;
}

@media screen and (max-width: 600px) {
	.ub_table-of-contents-1-column,
	.ub_table-of-contents-2-column,
	.ub_table-of-contents-3-column {
		column-count: 1;
	}
}
.ub-linked-to-toc {
	font-size: 11px;
	text-align: right;
	cursor: pointer;
	display: block;
	text-decoration: none;
	color: #73accf;
	width: 100%;
	white-space: pre;
}

/*** Show more ***/
.ub_table-of-contents-container:not(.ub-toc-show-all) .ub_table-of-contents-extra-item {
	display: none;
}

.ub_table-of-contents-show-more {
	display: block;
	//under all the columns of a multi-column list, not inside the last one
	column-span: all;
	//only the text is clickable, not the whole line
	width: fit-content;
	margin-top: 8px;
	cursor: pointer;

	//no focus ring from a mouse click, keyboard users still get one
	&:focus:not(:focus-visible) {
		outline: none;
	}
}