@import 'sass/variables';

#electron-titlebar {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	width: 100%;
	height: 40px;
	-webkit-user-select: none;
	cursor: default;
	pointer-events: none;

	.drag {
		-webkit-app-region: drag;
	}
	.button img {
		position: absolute;
		cursor: default;
		-webkit-app-region: no-drag;
	}

	& > .button {
		position: absolute;
		cursor: default;
		pointer-events: all;
		-webkit-app-region: no-drag;
	}

	/* no-maximize or no-minimize */
	&.no-minimize > .button-minimize {
		display: none !important;
	}

	&.no-maximize > .button-maximize {
		display: none !important;
	}
}

html.darwin #electron-titlebar > .button {
	display: none;
}

html[electron-titlebar-platform=linux] #electron-titlebar > .button {
	top: 5px;
	width: 16px;
	height: 16px;
	&.hover {
		background-color: $btn-hover-background-color;
	}
	&:active {
		background-color: $btn-active-background-color;
	}
}

/* normal */

html[electron-titlebar-platform=linux] #electron-titlebar {
	& > .button-close {
		left: 5px;
	}
	& > .button-maximize {
		right: 5px;
	}
	& > .button-minimize {
		right: 28px;
	}

	&.no-maximize {
		& > .button-minimize {
			right: 5px;
		}
	}

	&.inset {
		& > .button {
			top: 12px;
		}
		& > .button-close {
			left: 12px;
		}
		& > .button-maximize {
			right: 12px;
		}
		&.no-maximize > .button-minimize {
			right: 12px;
		}
		& > .button-minimize {
			right: 40px;
		}
	}
}

html[electron-titlebar-platform=win32] #electron-titlebar {
	& > .button {
		top: 0;
		width: 45px;
		height: 29px;
		img {
			margin-top: 8.5px;
			margin-left: 16.5px;
		}

		&.hover {
			background-color: $btn-hover-background-color;
		}
		&:active {
			background-color: $btn-active-background-color;
		}
	}
	& > .button-close {
		right: 0;
		&.hover {
			background-color: $windows-close-btn-hover-color;
			img {
				-webkit-filter: invert(100%)
			}
		}
		&:active {
			background-color: $windows-close-btn-active-color;
			img {
				-webkit-filter: invert(100%)
			}
		}
	}
	& > .button-maximize {
		right: 45px;
	}
	& > .button-minimize {
		right: 90px;
	}

	&.no-maximize {
		& > .button-minimize {
			right: 45px;
		}
	}

	/* inset */
	&.inset {
		& > .button {
			width: 40px;
			height: 40px;
			img {
				margin-top: 14px;
				margin-left: 14px;
			}
		}
		& > .button-maximize {
			right: 40px;
		}
		& > .button-minimize {
			right: 80px;
		}
		&.no-maximize > .button-minimize {
			right: 40px;
		}
	}
}