@import "definitions.css.scss";
$dialogue-title-height: 32px;

#dialogue-wrap {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	top: 0;
	overflow: auto;
	z-index: 1001;
	$dialogue-frame-width: 2px;
	#dialogue-outer {
		@include rounded;
		@include display-box;
		@include box-orient($direction: vertical);
		@extend .shadow;
		background-color: $chrome-bg;
		position: absolute;
		top: 50px;
		bottom: 50px;
		left: 25%;
		right: 25%;

		#dialogue-title {
			@include box-sizing;
			@extend .controls-gradient;
			@include header;
			@include rounded-top;
			position: absolute;
			right: 0;
			left: 0;
			height: $dialogue-title-height;
			color: #fff;
			padding: 0 $unit 0 ($unit+$dialogue-frame-width);
			padding-top: 6px;
			font-weight: 100;
		}
		#dialogue-body {
			position: absolute;
			top: $dialogue-title-height;
			right: 0;
			left: 0;
			bottom: $dialogue-title-height;
			// min-height: 100px;
			overflow: auto;
			margin: 0 $dialogue-frame-width;
			background-color: #fff;
			// max-height: 70%;
			// margin-top: 32px;
			// margin-bottom: 32px;
		}
		#dialogue-control-wrap {
			position: absolute;
			bottom: 0;
			width: 100%;
			// z-index: 1002;

			#dialogue-controls {
				position: relative;
				// display: block;
				// height: 46px;
				.dialogue-actions {
					@include display-box;
					.spacer {
						@include box-flex;
					}
					.button {
						display: block;
						width: 128px;
						margin: $unit 0;
						& + .button {
							margin-left: $unit;
						}
					}
					.button:last-child {
						margin-right: $unit;
					}
					.cancel {
						@include button-color(#6b6b6b);
					}
					.save {
						background-color: $action;
						float: right;
					}
					.disabled, .disabled:hover {
						background-color: #333333 !important;
						color: #6b6b6b !important;
					}
				}
			}
		}
	}
}

.dialogue-wrapper {
	@include rounded;
	@include box-sizing;
	position: relative;
	// top: 32px;
	background-color: #cccccc;
	width: $dialogue-width;
	// margin: 32px auto;
}

#create-home-dialogue {
	.instructions {
		@include interface;
		margin: 0;
		background-color: #f2f2f2;
		color: #666;
		padding: $unit/2 $unit;
		margin-bottom: $unit;
		.button {
			padding-left: 2px;
			padding-right: 2px;
		}
	}

	.type {
		@include rounded;
		@include display-box;
		cursor: pointer;
		padding: $unit/2 $unit;
		background-color: #fbfbfb;
		border: solid 1px #f2f2f2;
		margin: $unit;
		margin-top: 0;
		color: #333333;
		&:hover {
			background-color: #666;
			color: #fff;
		}
		&.selected {
			background-color: $action;
			color: #fff;
		}
	}
}


#dialogue-wrap #dialogue-outer.publishing {
	left: 5%;
	right: 5%;
}

#publishing-dialogue {
	@include fullsize;
	@include display-box;
	@include box-orient(row);

	.spinner {
		position: absolute;
		width: 48px;
		height: 48px;
		left: 50%;
		top: 40%;
		canvas {
			position: relative;
			left: -50%;
		}
		div {
			left: -50%;
			width: 100%;
			p {
				@include interface;
				width: 200px;
				position: relative;
				left: -100px;
				top: 10px;
				text-align: center;
				color: #ccc;
				margin: 0;
			}
		}
	}
	.change-list {
		@include box-flex;
		position: absolute;
		left: 0;
		top: 0;
		bottom: 0;
		width: 50%;
		&#changes {
			border-right: solid 2px #000;
		}
		.actions {
			@include interface;
			@include display-box;
			@include box-orient(row);
			@include box-align(center);
			@include box-sizing;
			position: absolute;
			left: 0;
			right: 0;
			top: 0;
			height: 25px;

			color: #666;
			background-color: #f2f2f2;
			padding: $unit/2 $unit;

			div {
				@include box-flex;
			}
			.button {
				padding-left: $unit;
				padding-right: $unit;
			}
		}
		&#to-publish {
			position: absolute;
			left: auto;
			right: 0;
			.actions {
				left: 2px;
			}
		}
		.change-sets {
			@include fullsize(25px, 0, 0, 0);
			overflow: auto;
			padding-bottom: $unit;
			padding-top: $unit;
			.instructions {
				font-family: $headline-font-family;
				color: #999;
				text-align: center;
				position: relative;
				padding-top: 50px;
			}
		}
	}
	// background-color: #fff;
	// width: 600px;
	// @extend .dialogue-wrapper;
	// padding-top: $container-padding / 2;
	// padding-bottom: $container-padding / 2;
	.publish-up-to-date {
		@include rounded;
		@extend .shadow;
		position: absolute;
		left: 0;
		right: 0;
		top: 0;
		bottom: 0;
		margin: 60px 200px 60px 200px;
		text-align: center;
		background-color: #333;
		opacity: 0.95;
		font-family: $headline-font-family;
		font-size: 24px;
		padding-top: 24px;
		color: #fff;
		// margin: $container-padding / 2;
		// margin-top: 0;
		// .publish-all {
			// 	@include button(#666);
			// 	@include interface;
			// 	width: 128px;
			// 	float: right;
			// 	text-align: left;
			// 	// background-color: #666666;
			// 	input {
				// 		margin: 1px 8px 0 8px;
				// 		padding: 0;
				// 		vertical-align: top;
				// 		position: relative;
			// 	}
		// }
		// .publish-all.checked {
			// 	background-color: $action;
		// }
	}
	.change-set {
		cursor: pointer;
		// padding: $unit $unit 0 $unit;
		.inner {
			@include rounded;
			@include display-box;
			// border: solid 3px transparent;
			background-color: #fbfbfb;
			// border: solid 1px #f2f2f2;
			// border: solid 1px #f2f2f2;
			margin-left: $unit;
			margin-right: $unit;
			margin-bottom: 2 * $unit;
		}
		.pages {
			@include box-flex;
			.title {
				padding: $unit/2 $unit;
				color: #333;
				font-size: $target-name-size;
				& + .title {
					border-top: solid 1px #f2f2f2;
				}
			}
			.title.dependent {
				color: #666;
				font-size: 0.7em;
			}
			.title:hover {
				color: $action;
			}
			.url, .dates {
				margin-top: 4px;
				font-size: 10px;
				color: #aaaaaa;
				// color: transparent;
			}
			.dates {
				color: transparent;
			}
			.url {
				font-size: 11px;
			}
			.dates {
				color: #bbb;
			}
			.modification-date, .publication-date {
				display: inline-block;
			}
			.modification-date {
				width: 40%;
			}
			.publication-date {
				margin-left: 4px;
				.never {
					font-weight: bold;
				}
			}
		}
		// &:hover {
		// 	.dates {
		// 		color: #999;
		// 	}
		// }
		.add {
			@include rounded-right;
			@include display-box;
			@include no-select;
			@include box-pack(center);
			@include box-align(center);
			width: $container-padding;
			background-color: #f2f2f2;
			position: relative;
			color: #999;
			span {
				position: relative;
				top: 1px;
				&:before {
					@include awesome-icon("\f054");
				}
				&.active {
					top: 0px;
					&:before {
						@include awesome-icon("\f00d");
					}
				}

			}
			&:hover {
				background-color: $action;
				color: #fff;
			}
		}
		.titles a {
			display: block;
			margin-bottom: 2px;
			span {
				font-size: 11px;
				margin-left: 1em;
			}
		}
		&.unpublished {
			.title .page-title {
				&:after {
					// \00a0 is a nbsp
					@include awesome-icon("\f005\00a0new");
					font-size: 10px;
					line-height: 10px;
					text-transform: uppercase;
					color: $highlight;
					position: relative;
					top: -1px;
					margin-left: $unit/2;
				}
			}
			.title.dependent .page-title {
				&:after {
					content: "";
				}
			}
		}
	}
	.change-set:hover {
		border-color: $action;
	}
	.change-set.selected {
	}
	.change-set.locked {
		.pages {
			position: relative;
		}
		.info {
			@include rounded-left;
			position: absolute;
			overflow: hidden;
			right: 0;
			top: 0;
			bottom: 0;
			width: 0;
			background-color: rgba(33, 33, 33, 0.9);
			color: #aaaaaa;
			font-size: 0.7em;
			.lock-state {
				overflow: auto;
				padding: $unit/2;
			}
			.locks {
				strong {
					margin-right: $unit/2;
					&:after {
						content: ":";
					}
				}
				p {
					margin: 0 0 $unit/2 0;
				}
			}
			h3 {
				font-size: 1em;
				font-weight: normal;
				margin: 0;
				color: #fafafa;
				margin: 0;
				margin-bottom: $unit/2;
			}
		}
		.page-title {
			color: #999;
		}
		.add {
			span {
				&:before {
					@include awesome-icon("\f023");
				}
			}
		}
	}
	&.first-publish {
		#changes {
			display: none;
		}
		#to-publish {
			position: absolute;
			left: 0;
			right: 0;
			width: auto;
		}
	}
}

#root-menu {
	ul {
		margin-bottom: 2 * $unit;
		li {
			@include interface;
			font-size: 11px;
			color: #999;
			margin-bottom: $unit/2;
			a {
				font-family: $content-font-family;
				text-transform: none;
				color: #fff;
				cursor: pointer;
				&:hover {
					color: $action;
				}
			}
		}
		.title {
			padding-bottom: $unit/2;
			border-bottom: solid 1px #333;
		}
	}
	li.user:before {
		@include awesome-icon("\f007");
	}
	.external-services li.title:before {
		@include awesome-icon("\f013");
	}
	li.user:before, .external-services li.title:before {
		position: relative;
		top: 1px;
		font-size: 1.3em;
		width: 2*$unit;
	}
}