guidance-panel {
	panel[side="top"] {
		&::part(content) {
			margin-top: 9px;
		}
		
		&::before {
			-moz-context-properties: fill, stroke;
			background: url("chrome://global/skin/arrow/panelarrow-vertical.svg") no-repeat left 9px;
			content: "";
			fill: var(--color-toolbar);
			height: 20px;
			position: absolute;
			stroke: var(--color-border);
			top: -9px;
			width: 20px;
			left: var(--anchor-x);
		}
	}
		
	.panel-container {
		width: 400px;
		display: flex;
		align-items: center;
		font-size: 1.1em;
		padding: 8px 0;
		@media (-moz-platform: linux) {
			padding: 8px;
		}
	}
	#nav-buttons {
		-moz-box-align: end;
		-moz-box-pack: end;
	}

	#nav-buttons > toolbarbutton {
		-moz-appearance: none; /* Necessary on Linux for button to be shown */
		width: 22px;
		height: 22px;
		border: 1px solid lightgray;
		border-radius: 3px;
		background-position: 5px 5px;
		background-size: 10px;
		background-repeat: no-repeat;
		margin: 0;
		margin-bottom: -7px;
	}

	#nav-buttons > toolbarbutton:hover {
		border-color: var(--toolbarbutton-hover-bordercolor);
		box-shadow: var(--toolbarbutton-hover-boxshadow);
	}

	#nav-buttons > toolbarbutton:active:hover {
		border-color: var(--toolbarbutton-active-bordercolor);
		box-shadow: var(--toolbarbutton-active-boxshadow);
		transition-duration: 10ms;
	}

	#back-button {
		background-image: url("chrome://zotero/skin/chevron-left_808080_32.png");
	}

	#forward-button {
		margin-right: -16px;
		background-image: url("chrome://zotero/skin/chevron-right_808080_32.png");
	}

	#close-button-box {
		-moz-box-align: start;
		-moz-box-pack: end;
	}

	#close-button {
		margin: -16px -16px;
	}
}
