.windowbar {
	box-sizing: content-box;
	z-index: 9999;
	
	* { box-sizing: inherit; }
	
	&.draggable {
		-webkit-app-region: drag;
		
		.windowbar-controls {
			-webkit-app-region: no-drag;
		}
	}
	
	&:not(.fixed) {
		position: relative;
	}
	&.fixed {
		position: absolute;
		top: -1000px;
		width: 0;
		height: 0;
		
		.windowbar-title,
		.windowbar-controls {
			position: fixed !important;
		}
	}
	
	.windowbar-title {
		display: block;
		position: absolute;
		z-index: 9998;
		text-align: center;
		user-select: none;
	}
	
	.windowbar-controls {
		z-index: 9999;
		
		&::after {
			content: ' ';
			display: table;
			clear: both;
		}
	}
	
	
	&.wb-mac {
		min-height: 22px;
		
		&:not(.transparent) {
			background-image: linear-gradient(to bottom,
				#ededed 0%,
				#d2d1d2 100%);
			border-top: 1px solid #f5f5f5;
			border-bottom: 1px solid #b7b4b7;
			border-radius: 5px 5px 0 0;
		}
		
		&.alt:not(.fullscreen) {
			svg.fullscreen-svg {
				display: none;
			}

			svg.maximize-svg {
				display: block !important;
			}
		}
		
		&.fullscreen {
			svg.fullscreen-svg {
				display: none;
			}

			svg.exit-fullscreen-svg {
				display: block !important;
			}
		}

		.windowbar-title {
			font-family: "Lucida Grande", Roboto, sans-serif;
			font-size: 14px;
			color: #333;
			top: calc(22px / 2);
			left: 50%;
			transform: translate(-50%, -50%);
		}

		.windowbar-controls {
			position: absolute;
			top: 0; left: 0;
			padding: 5px 8px;
			
			&:hover {
				svg {
					opacity: 1 !important;
				}
			}
			
			svg {
				width: 8px;
				height: 8px;
				margin-top: 2px;
				margin-left: 2px;
				opacity: 0;
			}
		}

		.windowbar-close,
		.windowbar-minimize,
		.windowbar-maximize {
			float: left;
			width: 12px;
			height: 12px;
			border-radius: 50%;
			margin-right: 8px;
			line-height: 0;
		}

		.windowbar-close {
			border: 1px solid #e24d47;
			background-color: #ff6157;

			&:active {
				border-color: #b43737;
				background-color: #c64845;
			}
		}

		.windowbar-minimize {
			border: 1px solid #dfa32c;
			background-color: #ffc12f;

			&:active {
				border-color: #b07b2e;
				background-color: #c38e34;
			}
		}

		.windowbar-maximize {
			border: 1px solid #24ae34;
			background-color: #2acb42;
			margin-right: 0;
			
			&:active {
				border-color: #138532;
				background-color: #009a3c;
			}
			
			svg.exit-fullscreen-svg, svg.maximize-svg {
				display: none;
			}
		}

		&.unfocused .windowbar-controls:not(:hover) > * {
			background-color: #dcdcdc;
			border-color: #d1d1d1;
		}
		
		&.dark {
			&:not(.transparent) {
				background-image: linear-gradient(to bottom,
					#4a4a4a 0%,
					#3d3d3d 100%);
				border-top: 1px solid #5d5d5d;
				border-bottom: 1px solid #2b2b2b;
			}
			
			.windowbar-title {
				color: #fff;
			}
			
			.windowbar-close,
			.windowbar-minimize,
			.windowbar-maximize {
				width: 14px;
				height: 14px;
				border: none;
				
				svg {
					margin-top: 3px;
					margin-left: 3px;
				}
			}
		}
		
		&.tall {
			min-height: 38px;
			
			.windowbar-title {
				top: calc(38px / 2);
			}
			
			.windowbar-controls {
				padding: 13px;
			}
		}
	}
	
	
	&.wb-win {
		min-height: 30px;
		padding: 0;
		
		&:not(.transparent) { background-color: #fff; }
		&.unfocused .windowbar-controls:not(:hover) svg { opacity: 60%; }
		
		.windowbar-title {
			font-family: "Segoe UI", "Open Sans", sans-serif;
			font-size: 14px;
			color: #333;
			top: calc(30px / 2);
			left: 10px;
			transform: translateY(-50%);
		}
		
		.windowbar-controls {
			position: absolute;
			top: 0; right: 0;
		}

		.windowbar-minimize,
		.windowbar-maximize,
		.windowbar-close {
			float: left;
			width: 45px;
			height: 29px;
			margin: 0 0 1px 1px;
			text-align: center;
			line-height: 29px;

			-webkit-transition: background-color .2s;
			-moz-transition: background-color .2s;
			-ms-transition: background-color .2s;
			-o-transition: background-color .2s;
			transition: background-color .2s;
			
			svg {
				width: 10px;
				height: 10px;
			}
		}
		
		.windowbar-close svg polygon {
			-webkit-transition: fill .2s;
			-moz-transition: fill .2s;
			-ms-transition: fill .2s;
			-o-transition: fill .2s;
			transition: fill .2s;
		}
		
		// Not really liking the changing height. May cause issues with electron.
		/* &.fullscreen {
			min-height: 21px;
			
			.windowbar-minimize,
			.windowbar-maximize,
			.windowbar-close {
				height: 21px;
				line-height: 21px;
			}
		} */

		&:not(.fullscreen) .windowbar-maximize svg.unmaximize-svg { display: none; }
		&.fullscreen .windowbar-maximize svg.maximize-svg { display: none; }

		.windowbar-minimize:hover,
		.windowbar-maximize:hover {
			background-color: rgba(127,127,127, 0.2);
		}
		.windowbar-close:hover {
			background-color: #e81123;
			
			svg polygon {
				fill: #fff;
			}
		}
		
		&.dark {
			&:not(.transparent) { background-color: #1f1f1f; }
			
			.windowbar-title {
				color: #fff;
			}
			
			svg {
				> rect, > polygon, > path {
					fill: #fff;
				}
			}
		}
	}
	
	&.wb-default {
		min-height: 30px;
		padding: 0;
		
		&:not(.transparent) { background-color: #fff; }
		&.unfocused .windowbar-controls:not(:hover) svg { opacity: 60%; }
		
		.windowbar-title {
			font-family: "Roboto", sans-serif;
			font-size: 14px;
			color: #333;
			top: calc(30px / 2);
			left: 50%;
			transform: translate(-50%, -50%);
		}
		
		.windowbar-controls {
			position: absolute;
			top: 0; right: 0;
		}

		.windowbar-minimize,
		.windowbar-maximize,
		.windowbar-close {
			float: left;
			width: 30px;
			height: 30px;
			text-align: center;
			line-height: 30px;
			opacity: 0.8;
			
			&:hover {
				opacity: 1;
				background-color: rgba(127,127,127, 0.2);
			}
			
			svg {
				width: 10px;
				height: 10px;
			}
		}
		
		&.dark {
			&:not(.transparent) { background-color: #000; }
			
			.windowbar-title {
				color: #fff;
			}
			
			svg {
				> * {
					fill: #fff;
				}
			}
		}
	}
}