/* Stylesheet for DokuWiki Nuropa template
 * by Sascha Leib
 * File name: toc.css
 */

#toc {
	& {
		position: relative;
		width: max-content;
		float: right;
		margin-top: 3rem;
		margin-left: .5rem;
		border-radius: 2px 2px .25rem .25rem;
		background-color: @ini_background;
	}
	#toc-menu {
		overflow: hidden;
	}
	#toc_header {
		& {
			display: flex;
			justify-content: space-between;
		}
		h2 {
			font-size: .85rem;
			color: @ini_headline_color;
			font-family: @ini_headline_fonts;
			font-weight: normal;
			line-height: 1.25rem;
			margin: .25rem;
			padding-left: .5rem;
		}
		svg {
			& {
				width: 1.1rem;
				height: 1.1rem;
				fill: @ini_toc_link_color;
			}
			&:hover {
				fill: @ini_link;
			}
			rect {
				transform: none;
				transition-duration: .5s;
				transform-origin: center;
			}
		}
	}
	&.toggle_show {
		& {
			max-width: 40%;
			box-shadow: 0 0 4px 0 rgba(0,0,0,0.3);
			z-index: 3;
		}
		#toc-menu {
			overflow: initial;
			height: auto;
		}
		#toc_header {
			& {
				border-bottom: @ini_border_color solid 1px;
			}
			svg {
				rect {
					transition-duration: .5s;
					transform-origin: center;
				}
				.top-bar {
					transform: rotate(-45deg) scale(150%, 100%) translateY(20%);
				}
				.middle-bar {
					transform: scale(5%, 100%);
				}
				.bottom-bar {
					transform: rotate(45deg) scale(150%, 100%) translateY(-20%);
				}
			}
		}
	}
	&.toggle_hide {
		& {
			width: 1.62rem;
		}
		#toc-menu {
			height: 0;
		}
		h2 {
			display: none;
		}
	}
}

#toc-menubutton {
	& {
		padding: .25rem;
		border: none;
		background-color: transparent;
		cursor: pointer;
	}
	&:hover {
		background-color: transparent;
	}
	&:focus {
		outline: @ini_focus_outline 1.5pt solid;
	}
	span {
		display: none;
	}
}

#toc-menu {
	ol {
		& {
			list-style: none inside;
			margin: 0 .25em .5em .25rem;
			padding: 0;
		}
		ol {
			margin: 0 0 0 .67em;
		}
		li {
			margin: 0; padding: 0;
			font-size: .86rem;
			line-height: 1em;
		}
		a:link, a:visited {
			display: block;
			color: @ini_toc_link_color;
			text-decoration: none;
			padding: .5em .25em .5em .5rem;
		}
		a:hover, a:focus {
			text-decoration: underline;
			text-decoration-style: dotted;
		}
	}
}