@import "definitions.css.scss";
.pop-over {
	$popover-border-radius: 4px;
	display: inline-block;
	background-color: $chrome-bg;
	// border: solid 2px #4f4f4f;
	margin: 0px;
	@include padding-start(0);
	@include rounded($popover-border-radius);
	@extend .shadow;
	position: absolute;
	opacity: 0px;
	z-index: 1000000;

	& > div {
		// background-color: white;
		margin: 0px 8px 8px 8px !important;
		@include rounded($popover-border-radius);
	}
	& > header {
		@extend .controls-gradient;
		@include box-sizing;
		@include rounded-top($popover-border-radius);
		position: relative;
		padding: 8px 8px 8px 8px;
		// height: 22px;
}
	& > header > h3 {
		@include interface;
		@include box-flex(1);
		text-transform: none;
		margin: 0px;
		margin-bottom: 0;
		color: white;
		font-size: 14px;
		line-height: 22px;
		display: block;
		text-align: center;
		font-weight: normal;
	}
	header .button {
		min-width: 50px;
	}
	.po-button.back {
		position: relative;
		padding-left: 5px;
		margin-left: 8px;
	}
	.back.black > .pointer {
		background-image: -webkit-gradient(linear, left top, right bottom, from(#7d828c), color-stop(0.5, #303749), color-stop(0.5, #121a2e), to(#121a2e));
		border-left: solid 1px rgba(79, 79, 79, 0.75);
		border: solid 1px rgba(79, 79, 79, 0.75);

		@include corners(6px, 0, 6px, 0);
		// -webkit-border-top-left-radius: 6px;
		// -webkit-border-bottom-right-radius: 6px;
		height: 19px;
		width: 19px;
		display: inline-block;
		@include transform(rotate(45deg));
		// -webkit-transform: rotate(45deg);
		-webkit-mask-image: -webkit-gradient(linear, left bottom, right top, from(black), color-stop(0.5, black), color-stop(0.5, transparent), to(transparent));
		position: absolute;
		left: -7px;
		top: 1px;
		// -webkit-background-clip: content;
		@include background-clip(content);
	}
	.back:hover .pointer, .back.hover .pointer {
		background-image: -webkit-gradient(linear, left top, right bottom, from(#4286f5), color-stop(0.5, #4286f5), color-stop(0.5, #194fdb), to(#194fdb));
	}
	.button {
		min-width: 100px;
	}
	.button.close,
	.button.cancel {
			// background-color: $chrome-accent;
		@include button($chrome-accent);
			min-width: 50px;
	}
	.po-button.forward {
		position: relative;
		padding-right: 5px;
		margin-right: 8px;
	}
	.forward.black > .pointer {
		background-image: -webkit-gradient(linear, left top, right bottom, from(#7d828c), color-stop(0.5, #303749), color-stop(0.5, #121a2e), to(#121a2e));
		border-left: solid 1px rgba(79, 79, 79, 0.75);
		border: solid 1px rgba(79, 79, 79, 0.75);
		border-top-left-radius: 6px;
		border-bottom-right-radius: 6px;
		height: 19px;
		width: 19px;
		display: inline-block;
		@include transform(rotate(45deg));
		-webkit-mask-image: -webkit-gradient(linear, right top, left bottom, from(black), color-stop(0.5, black), color-stop(0.5, transparent), to(transparent));
		position: absolute;
		right: -7px;
		top: 1px;
		@include background-clip(content);
		// -webkit-background-clip: content;
	}
	.forward:hover > .pointer, .forward.hover > .pointer {
		background-image: -webkit-gradient(linear, left top, right bottom, from(#4286f5), color-stop(0.5, #4286f5), color-stop(0.5, #194fdb), to(#194fdb));
	}
	header {
		@include display-box;
		@include box-orient(row);
		@include box-align(stretch);
	}
	.menuHandle {
		position: absolute;
		top: -8px;
		left: 8px;
		height: 30px !important;
		width: 30px;
		border: solid 2px #4f4f4f;
		border-bottom: none;
		border-right: none;
		background-color: $chrome-accent !important;
		@include transform(rotate(45deg));
		-webkit-transform: rotate(45deg);
		-webkit-mask-image: -webkit-gradient(linear, left top, right bottom, from(black), color-stop(0.5, black), color-stop(0.5, transparent), to(transparent));
	}
	.hide {
		@include transform(translate3d(-1000px, 0px));
		// -webkit-transform: translate3d(-1000px, 0px);
	}
	.show {
		@include transform(translate3d(0px, 0px));
		// -webkit-transform: translate3d(0px, 0px);
	}
	.fade-in {
		@include transition(opacity 0.25s ease-in-out);
		// -webkit-transition: opacity 0.25s ease-in-out;
		opacity: 1;
	}
	.fade-out {
		@include transition(opacity 0.25s ease-in-out);
		// -webkit-transition: opacity 0.25s ease-in-out;
		opacity: 0;
	}
	ul.dropdown-menu-basic, .dropdown-menu-basic li {
		margin: 0px;
		padding: 0px;
		list-style: none;
	}
	.dropdown-menu-basic li {
		border-bottom: 1px solid #666666;
		font-size: 18px !important;
		line-height: 36px;
		padding: 0px 8px;
	}
	.dropdown-menu-basic li:hover, .dropdown-menu-basic li.hover {
		background-image: -webkit-gradient(linear, left top, left bottom, from(#4286f5), to(#194fdb));
		color: white;
	}
	.dropdown-menu-basic li:first-of-type {
		@include rounded-top(5px);
		// -webkit-border-top-left-radius: 5px;
		// -webkit-border-top-right-radius: 5px;
	}
	.dropdown-menu-basic li:last-of-type {
		@include rounded-bottom(5px);
		// -webkit-border-bottom-left-radius: 5px;
		// -webkit-border-bottom-right-radius: 5px;
	}
	.buttons {
		@include display-box;
		@include box-orient(row);
		@include box-pack(space-between);
		a {
			display: block;
		}
	}
}

.pop-over {
	.pop-insert-link {
		// border: solid 1px red;
		// padding: 8px;
		p {
			margin-top: 0;
			margin-bottom: $unit;
		}
		.buttons {

		}
		label {
			@include interface;
			@include rounded;
			display: block;
			background-color: $chrome-accent;
			color: #fff;
			padding: 0;
			span {
				display: block;
				padding: ($unit/2) 0 ($unit/2) ($unit/2);
			}

		}
		input, textarea {
			@include box-sizing;
			@include rounded-bottom;
			border: none;
			display: block;
			outline: none;
			width: 100%;
			padding: ($unit/2);
			margin: 0;
		}
	}
}

.pop-over {
	.link-page-browser {
		label {
			@include corners($radius, $radius, 0, 0);
		}
		margin-bottom: $unit;
		.page-list {

			@include rounded-bottom;

			background-color: #fff;
			padding: $unit 0;
			max-height: 350px;
			overflow: auto;

			$deeper-width: 80px;

			.page {
				cursor: pointer;
				color: #333;
				@include interface;
				text-transform: none;
				padding: $unit/2 $unit/2;
				padding-right: $deeper-width;
				position: relative;
				font-size: 11px;

				border-bottom: solid 1px #eee;

				&:last-child {
					border-bottom: none;
				}
				&:hover {
					background-color: #999;
					color: #fff;
				}

				&.active {
					background-color: $action;
					color: white;
					span:hover {
						background-color: darken($action, 5%);
					}
				}
				span {
					@include box-sizing;
					@include rounded;
					display: block;
					position: absolute;
					right: 0;
					top: 0;
					bottom: 0;
					font-size: 16px;
					line-height: 13px;
					font-weight: normal;
					width: $deeper-width;
					margin: 2px;
					background: url("/@spontaneous/static/page-browser-next-ce781a242c23b980b99b9db7abc20b05.png") right 1px no-repeat;
					&:hover {
						background-position: right -39px;
						background-color: #8d8d8d;
					}
					&:active {
						background-color: $action;
					}
				}
			}
		}
		.page-ancestors {
			// @include rounded-top;
			background-color: lighten($chrome-accent, 5%);

			ul {
				@include display-box;
				@include box-orient(row);
				margin: 0;
				padding: 0;
				// outline: solid 1px red;

				padding: $unit/2;
				li {
					@include interface;
					font-size: 10px;
					text-transform: none;
					cursor: pointer;
					&, a {
						color: #ccc;
					}
					span {
						display: inline-block;
						color: #777;
						margin: 0 2px;
						padding: 0;
					}
					&:hover a {
						color: #fff;
					}
					&:active a {
						color: $action;
					}
				}
			}
		}
	}
	#popover-delete {
		@include display-box;
		@include box-orient(row);
		@include box-pack(space-between);

		a.ok {
			@include button;
			display: block;

		}
		a.cancel {
			@include button($chrome-accent);
			display: block;
		}
		a {
			@include box-flex(1);
			max-width: 100px
		}
	}
}