///***  SASS  ***///

// Plugin Namespace
$ns: 'wph5o';

// The next comment goes in the compiled CSS, which otherwise lacks comments: 
/* For detailed comments, see the SASS file: #{$ns}-styles.scss */

// Colors
$toolbar-black:    #23282d;
$toolbar-blue:     #00b9eb;
$toolbar-sub-bg:   #32373c; // outline background
$toolbar-sub-text: #ccc;    // outline text
$toggle-titles:    #aaa;    // darkened to offset from outline text
$diagram-gray:     #999;    // tree diagram lines
$notice-yellow:    #e6a100;


///***  WP Toolbar Node for Plugin  ***///

.#{$ns}-outliner-toolbar-node {

	> .ab-empty-item:before {
 		content: "\f204"; // 'ordered list' icon
 		top: 2px;
	}

	.ab-sub-wrapper {

		.ab-empty-item {
			display: none !important; // Overwrites toolbar. Hides empty padded div.
		}

		.ab-submenu {
			padding: 0 !important; 	  // Overwrites toolbar
		}

	}

	///***  Container for Outlines. Used in Toolbar and Popout.  ***///

	##{$ns}-outline { // Toolbar only (the styles, not the element with this id)

		position: relative; 
		z-index: 1;  // Under ##{$ns}-outline-toggle

		.#{$ns}-sr-only { // From Bootstrap v4
			position: absolute;
			width: 1px;
			height: 1px;
			padding: 0 !important; // For chrome. Overwrites padding-top in ##{$ns}-h-level.
			overflow: hidden;
			clip: rect(0, 0, 0, 0);
			white-space: nowrap;
			border: 0;
		}

	} // ##{$ns}-outline

} // .#{$ns}-outliner-toolbar-node


///***  Wrapper for Plugin Output (except the Toolbar Node title)  ***///

.#{$ns}-wrapper { // Toolbar and Popout

	background: $toolbar-sub-bg;   // Matches poput to toolbar
	color: $toolbar-sub-text;      // Matches poput to toolbar
	font-family: sans-serif;       // Poput only. Toolbar overwrites
	margin: 0 !important;          // Overwrites toolbar
	padding: 0 2em 2em !important; // Overwrites toolbar

	.#{$ns}-outliner-toolbar-node & { // Toolbar only
		max-height: 600px;
		overflow-y: auto;
		width: 300px !important;      // Overwrites toolbar
	}

	* {
		line-height: 1.5 !important;  // Overwrites toolbar
	}

	.#{$ns}-heading b, 
	.#{$ns}-hgroup b {
		color: $toolbar-blue !important; // Overwrites $notice-yellow in ##{$ns}-h-level
		font-weight: 400;
	}

	.#{$ns}-heading-notice, 
	.#{$ns}-notice {
		color: $notice-yellow;
	}

	.#{$ns}-notice {
		padding-top: 2em !important; // Fills in empty .#{$ns}-wrapper padding-top
	}

} // .#{$ns}-wrapper


///***  Popout Icon   ***///

##{$ns}-popper { // Toolbar only. Not cloned to poput by JS.

	cursor: pointer;
	float: right;

	&:after { // Sits inside .#{$ns}-wrapper padding-right
		content: "\f504";           // 'new window' icon
		background: $toggle-titles;
		color: $toolbar-sub-bg;
		font-family: dashicons;
		font-size: 1.2em;
		line-height: 1;
		padding: .333em;            // Total size is 2em square, relative to .#{$ns}-wrapper
		position: fixed;
		z-index: 3;                 // Over ##{$ns}-outline-toggle
	}

	&:hover {

		&:after {
			background: $toolbar-sub-text;
		}

	}

} // ##{$ns}-popper


///***  Outline-type Toggle  ***///

##{$ns}-outline-toggle { // Toolbar and Popout

	background: $toolbar-sub-bg; 
	color: $toggle-titles;
	position: fixed;
	z-index: 2; // Over ##{$ns}-outline, under ##{$ns}-popper

	.#{$ns}-outliner-toolbar-node & { // Toolbar only
		line-height: 2 !important; // Centers text vertically. Overwrites toolbar.
		margin-left: -2em;         // Cancels padding-left on .#{$ns}-wrapper
		padding-left: 2em;         // Replaces padding-left on .#{$ns}-wrapper
		width: 300px;              // Fills width of .#{$ns}-wrapper
	}

	body.#{$ns}-wrapper > & { // Popout only
		background: $toolbar-black;
		left: 0;
		padding: 1em 0 1em 1.5em;
		width: 100%;		
	}

} // ##{$ns}-outline-toggle


///***  Outline Anchors  ***///

##{$ns}-show-s, 
##{$ns}-show-hl {

	color: inherit !important;  // Inherits color from ##{$ns}-outline-toggle
	display: inline !important; // Overwrites toolbar
	padding: 0 !important;      // Overwrites toolbar
	text-decoration: none;      // Same as toolbar. Set for poput.

	&:link, 
	&:visited {
		color: inherit;
	}

	&:hover, 
	&:focus, 
	&:active  {
		color: $toolbar-blue !important; // Overwrites color: inherit !important
	}

	.#{$ns}-outliner-toolbar-node & { // Toolbar only

		&.#{$ns}-active {
			color: $toolbar-blue !important; // Overwrites toolbar
		}

	}

} // ##{$ns}-show-s, ##{$ns}-show-hl


///***  Structural Outline, Heading-level Outline  ***///

##{$ns}-structural, 
##{$ns}-h-level {

	color: inherit !important;     // Stops Chrome from making all text $toolbar-blue
	padding-top: 2.5em !important; // Toolbar only. Leaves room for ##{$ns}-outline-toggle.

	&:focus {
		outline: none; // For Chrome and others
	}	

	body.#{$ns}-wrapper & { // Popout only
		padding-top: 4em !important; // Overwrites padding-top: 2.5em !important
	}

	.#{$ns}-outline-title { // Popout only. Titles hidden in toolbar using .sr-only 
		font-size: 1.5em;
		margin: 0;
	}

} // ##{$ns}-structural, ##{$ns}-h-level


///***  Structural Outline  ***///

##{$ns}-structural { // Toolbar and Poput

	.#{$ns}-heading, 
	.#{$ns}-heading-notice {

		display: inline;

		.#{$ns}-h-tag { // Shown only in ##{$ns}-h-level
			display: none;
		}

	} // .#{$ns}-heading

	%tree-lines {
		position: absolute;
		top: 0;
		left: -0.75em;
		width: 0.5em;
		border-color: $diagram-gray;
		border-style: none none solid solid;
		border-width: 1px;
		content: "" !important; // Overwrites toolbar, which uses content: normal

	}

	// .5em (half font-size) + .25em (half top-spacing from line-height) + .5em (padding-top in li)
	$tree-unit-length: 1.25em;

	> ol {
		margin: 0;
		padding: 0;
	}

	li {

		list-style-type: none;          // Same as toolbar. Set for poput
		margin: 0 !important;           // Overwrites toolbar		
		padding: .5em 0 0 0 !important; // Overwrites toolbar
		position: relative;             // Same as toolbar. Set for poput

		&:first-child::before {
			@extend %tree-lines;
			height: $tree-unit-length;
		}

		&:not(:last-child)::after {
			@extend %tree-lines;
			bottom: -1 * $tree-unit-length;
		}

		ol {
			margin: 0;             // Same as toolbar. Set for poput
			padding: 0 0 0 1.75em; // All but left same as toolbar. Set for poput
		}

	} // li

	.#{$ns}-subsections { // details element

		> .#{$ns}-parent-heading-container { // summary element

			cursor: pointer;
			list-style: none; // Removes marker

			&::-webkit-details-marker { 
				display: none; // Removes marker in Chrome and others
			}

			&:after { // Replace marker
				color: $toolbar-blue; 
				padding-left: .25em;
			}

		} // > .#{$ns}-parent-heading-container

		&:not([open]) > .#{$ns}-parent-heading-container:after {
			content: "▸";
			content: "\025B8"; // For Chrome and others
		}

		&[open] > .#{$ns}-parent-heading-container:after {
			content: "▾";
			content: "\025BE"; // For Chrome and others
		}

	} // .#{$ns}-subsections

} // ##{$ns}-structural


///***  Heading-level Outline  ***///

##{$ns}-h-level { // Toolbar and Poput

	.#{$ns}-heading, 
	.#{$ns}-missing-heading {
		margin-top: .5em;
		margin-bottom: 0;
	}

	.#{$ns}-missing-heading {
		color: $notice-yellow;
		font-weight: 400;
	}

	$i: 1;
	@while $i <= 6 {
		// level-1 0em, level-2 1.5em, level-3 3em, ... , level-6 7.5em
		.#{$ns}-level-#{$i} { margin-left: 0em + ( $i - 1 ) * 1.5; }
		$i: $i + 1;
	}

} // ##{$ns}-h-level