/* Stylesheet for DokuWiki Nuropa template
 * by Sascha Leib
 * File name: site-toolbar.css
 */

#toolbar-layout {
	& {
		background-color: @ini_toolbar_background;
		color: @ini_toolbar_text;
		font-family: @ini_toolbar_fonts;
		font-size: @ini_toolbar_font_size;
		clear: both;
		border-bottom: @ini_toolbar_border solid 1px;
	}
	button {
		height: 100%;
		font-family: @ini_toolbar_fonts;
		font-size: inherit;
		border: none;
		background: transparent;
		color: @ini_toolbar_text;
		padding: 0 3pt;
		cursor: pointer;
		border-radius: .25rem;
	}
	svg {
		fill: @ini_toolbar_text;
	}
	a:link, a:visited {
		color: @ini_toolbar_text;
		border-radius: .25rem;
	}
	a:hover, button:hover {
		background-color: @ini_toolbar_hl_bg;
	}
}

#site-toolbar {
	& {
		display: flex;
		justify-content: space-between;
		align-items: center;
		line-height: 1.0rem;
		overflow: hidden;
		white-space: nowrap;
	}
	button {
		&:focus {
			outline-color: @ini_toolbar_focus_color;
		}
	}
}

#site-toolbar-group {
	display: grid;
	grid-template-columns: auto 1.8rem;
}
#tb-menu-group {
	display: grid;
	grid-template-columns: 0 1.5em;
	height: ~"calc(100% - 1px)";
}
#tb-menu-group::before {
	content: ' ';
	display: inline-block;
	width: 4px;
	height: ~"calc(100% - 2px)";
	background: linear-gradient(90deg, transparent 0, @ini_toolbar_background 80%);
	position: relative;
	left: -5px;
}

/* languages menu (TODO!) */
#language-button {
	& {
		display: inline-grid;
		grid-template-columns: 1rem auto;
		gap: .5em;
		align-items: center;
	}
	svg {
		width: 1rem; height: auto;
	}
	.label {
		padding: .25rem 0;
	}
}
#lang-action-menu {
	li a {
		& {
			display: block;
			padding: .25em 1em .25em .5em;
		}
		&:link, &:visited {
			text-decoration: none;
		}
		&:focus {
			outline-color: @ini_toolbar_focus_color;
		}
		&::before {
			content: attr(lang);
			display: inline-block;
			font-family: @ini_mono_fonts;
			font-size: @ini_mono_font_size;
			padding: 1pt 3pt;
			border: @ini_toolbar_text solid 1px;
			margin-right: .25em;
		}
	}
	li.current {
		a {
			font-weight: bold;
		}
		a::before {
			font-weight: normal;
		}
	}
}

/* toolbar is fixed if the user is logged in: */
body.loggedIn {
	& {
		margin-top: 34px;
	}
	#toolbar-layout {
		& {
			position: fixed;
			top: 0; left: 0; right: 0;
			opacity: .93;
			-webkit-box-shadow: .5px .5px .5px 0px rgba(0,0,0,0.4);
			box-shadow: .5px .5px .5px 0px rgba(0,0,0,0.4);
			z-index: 101;
		}
		#site-toolbar {
			opacity: 1;
		}
	}
}

/* style the user menu, if in the toolbar: */
#tb-siteinfo {
	& {
		padding: 0 .5rem;
	}
	#user-button {
		& {
			display: inline-grid;
			grid-template-columns: min-content auto 0;
			gap: .25rem;
			border: transparent none 0;
			border-width: 0 1px;
			border-radius: .25rem;
			padding: .5rem .25rem;
		}
	}
	#user-action-buttons {
		& {
			list-style: none;
			font-family: @ini_toolbar_fonts;
			height: 100%;
		}
		li {
			& {
				height: 100%;
				display: flex;
			}
			a {
				grid-template-columns: 1.5em auto;
				align-items: center;
				padding: .25rem;
			}
			a:link,
			a:visited {
				text-decoration: none;
				display: inline-grid;
				gap: .125rem;
				width: 100%;
			}
		}
	}
}

/* tools menu button */
#pagetools-btn {
	& {
		height: ~"calc(100% - 1pt) !important";
		width: 2.2em;
		margin-top: 1pt;
	}
	svg {
		width: 1rem; height: 1rem;
		rotate: 0deg;
		transition-duration: .5s;
		transform-origin: center;
	}
	&[aria-expanded="true"] {
		svg {
			rotate: 90deg;
			transition-duration: .5s;
			transform-origin: center;
		}
	}
}

/* tools toolbar */
#site-toolbar {

	#pagetools-menu,
	#pagetools-popup,
	#user-action-menu {
		li {
			a {
				& {
					display: inline-grid;
					grid-template-columns: 1.5em auto;
					gap: .4em;
					height: ~"calc(100% - 7px)";
					width: 100%;
					box-sizing: border-box;
					padding: .25rem .5rem;
				}
				&:link,
				&:visited {
					text-decoration: none;
				}
				&:focus, button:focus {
					outline-color: @ini_toolbar_focus_color;
				}
				svg {
					width: 1.5em; height: auto;
				}
				span {
				}
			}
			button:focus {
				outline-color: @ini_toolbar_focus_color;
			}
		}
	}

	#user-action-menu,
	#lang-action-menu,
	#pagetools-popup {
		& {
			position: absolute;
			top: ~"calc(" @ini_toolbar_font_size ~" + 1.7rem)";
			background: @ini_toolbar_background;
			list-style: none inside;
			width: max-content;
			border: @ini_toolbar_border solid 1px;
			border-radius: 2px;
			box-shadow: 1.5px 1.5px 1px .5px rgba(0,0,0,.4);
			z-index: 101;
			padding: 2pt;
		}
		li {
			& {
				border-bottom: @ini_toolbar_border solid 1px;
			}
			&:last-child {
				border-bottom: transparent none;
			}
		}
	}

	#pagetools-menu {
		& {
			display: flex;
			flex-wrap: nowrap;
			overflow: hidden;
		}
		&.compact {
			max-width: 0 !important;
		}
		li {
			& {
				display: inline-block;
				height: 100%;
				padding: 4px;
			}
		}
	}

	/* triangles: */
	#user-action-menu::after,
	#user-action-menu::before,
	#pagetools-popup::after,
	#pagetools-popup::before,
	#lang-action-menu::after,
	#lang-action-menu::before {
		bottom: 100%;
		border: solid transparent;
		content: '';
		width: 0; height: 0;
		position: absolute;
		pointer-events: none;
	}
	#user-action-menu::before,
	#pagetools-popup::before,
	#lang-action-menu::before {
	  border-color: transparent;
	  border-bottom-color: @ini_toolbar_border;
	  border-width: 9px;
	  margin-left: -9px;
	}
	#user-action-menu::after,
	#pagetools-popup::after,
	#lang-action-menu::after {
	  border-color: transparent;
	  border-bottom-color: @ini_toolbar_background;
	  border-width: 8px;
	  margin-left: -8px;
	}
	#user-action-menu::after,
	#user-action-menu::before,
	#lang-action-menu::after,
	#lang-action-menu::before {
		left: 1rem;
	}
	#pagetools-popup::after,
	#pagetools-popup::before {
	  left: ~"calc(100% - 10px)";
	}
}

/* always use compact menu on small screens: */
@media (max-width: 359px) {
	#site-toolbar #pagetools-menu {
		max-width: 0 !important;
	}
}
