/* ==============================================================
   Widget Toc
   style declarations for widget_toc.xhtml
   ==============================================================*/
/* WIDGET TOC */
.widget-toc {
	&__overlay {
		background-color: @bg-content-box;
		opacity: .85;
	}
	/* TITLE */
	&__title {
		background-color: @ci-color1;
		h2 {
			margin: 0;
		}
	}
	&__title-expand {
		a {
			color: @white;
			&:hover,
			&:active,
			&:focus {
				color: @white;
			}
			&:first-child {}
			.fa {
			color: @white;
				&:hover,
				&:active,
				&:focus {
					color: @lh-content-box;
				}
			.btn {
				&:hover,
				&:active,
				&:focus,
				&:active:focus,
				&.active,
				&.active.focus,
				&.active:focus,
				&.focus,
				&:active.focus {
					.fa {
						color: @ci-color1;
					}
					}
				}
			}

		}
	}
	/* ELEMENTS */
	&__elements {
		border: @border;
		border-top: 0;
		ul {
			border: 0;
		}
	}
	&__element {
		&:hover {}
		&.parent {}
		&.child {}
		&:focus,
		&:hover,
		&.active {
			background-color: @bg-general;
			& when (@colorModes = true) {
				.mx-light-mode-rules ({
					background-color: @bg-general;
				});
				.mx-dark-mode-rules ({
					background-color: @bg-active;
					color: @fg-content-box;
				});
			}
		}
	}
	&__element-expand {}
	&__element-link {
		a {
			&:hover,
			&:active,
			&:focus {}
		}
		&.has-pagenumber {}
		&.non-tree-view {
			&.has-pagenumber {}
		}
		&.active {
			a {}
		}
	}
	&__element-pagenumber {}
	/* LOADING */
	&__loader,
	&__overlay {}
	&__loader {}
	&__overlay {}
}

/* BREAKPOINT FOR LARGE DESKTOPS */
@media screen and (max-width: @largeBreakpoint) {}

/* BREAKPOINT FOR DESKTOPS */
@media screen and (max-width: @mediumBreakpoint) {}

/* BREAKPOINT FOR TABLETS */
@media screen and (max-width: @smallBreakpoint) {}

/* BREAKPOINT FOR SMARTPHONES */
@media screen and (max-width: @xSmallBreakpoint) {}
