// borders
$layout-border-grey: #dfdfdf;
$layout-border-grey-darker: darken($layout-border-grey, 8);
$layout-border-grey-light: #E1E1E1;
$layout-border-blue: darken(#c7d7e2, 5);
$layout-border-blue-darker: darken($layout-border-blue, 5);

// bgs
$layout-bg-grey: #fafafa;
$layout-bg-grey-darker: #f5f5f5; //#f5f5f5;// darken( #fafafa, 5 );
$layout-bg-blue: lighten(#eaf2fa, 2);
$layout-bg-blue-darker: darken($layout-bg-blue, 2);

// Select2
span.select2-container {
	z-index: 1;
}
.select2-container--open {
	.select2-dropdown--below {
		margin-top: -1px;
	}
}

.select2-container--default {
	&.select2-container--focus, &.select2-container--open {
		.selection .select2-selection--multiple {
			border-color: $layout-border-blue-darker;
		}
	}
	.selection {
		.select2-selection--multiple {
			border-color: #ddd;
			border-radius: 0;
			box-shadow: inset 0 1px 2px rgba(0,0,0,.07);
		}
	}

	.select2-dropdown {
		border-color: $layout-border-blue-darker;

	}
	.select2-results__option[aria-selected=true] {
		display: none;
	}
}

// Menu
.layout-selector {
	overflow: hidden;
	margin: 16px 0 14px;

	ul {
		margin: 0;

		.first {
			margin-right: 4px;
		}
	}
}

.columns-container.saving {
	.spinner {
		visibility: visible;
	}
}

// Sidebar
.sidebox.layouts {
	box-shadow: none !important;
	background: transparent !important;
	border: none !important;

	.header {
		padding: 16px 10px;
		background-color: #fff;

		border-left: 1px solid $layout-border-grey-light;
		border-top: 1px solid $layout-border-grey-light;
		border-right: 1px solid $layout-border-grey-light;
		box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);

		h3 {
			margin: 0;
			padding: 0;

			span {
				position: relative;
				padding-right: 13px;
			}

			a {
				float: right;
				font-size: 13px;
				font-weight: normal;
				cursor: pointer;
				margin-top: -5px;
			}
		}

		.add-new {
			span {
				padding: 0;

				&.close {
					display: none;
				}
			}

			&.open {
				span.add {
					display: none;
				}
				span.close {
					display: inline-block;
				}
			}
		}
	}

	input.name {
		padding: 4px 5px;
	}

	.select2 {

		li.select2-search {
			width: auto;

			input {
				height: 20px;
				min-height: 20px;
				margin-top: 3px;
				background-image: none !important;
			}
		}
		.select2-selection__rendered {
			padding-top: 0px !important;
			padding-bottom: 0px !important;
			padding-left: 5px !important;
		}
		.select2-search__field {
			max-width: 155px !important;
			&::-webkit-input-placeholder {
				font-size: 14px;
			}
			&:-moz-placeholder {
				font-size: 14px;
			}
			&::-moz-placeholder {
				font-size: 14px;
			}
			&:-ms-input-placeholder {
				font-size: 14px;
			}
		}

		.select2-selection__choice {
			border-color: #bbb;
			background: #f9f9f9;
			box-shadow: 0 1px 0 rgba(255, 255, 255, 0.25) inset;
			margin: 5px 5px 0 0;

			.select2-selection__choice__remove {
				font-size: 14px;
			}
		}

		.select2-search--inline {
			margin-bottom: 0;
		}
	}

	.item {
		background-color: #fff;
		border: 1px solid $layout-border-grey;

		.body {
			box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
			padding-top: 15px;

			.row {
				padding: 0 15px;
				margin-bottom: 15px;

				label {
					display: none;
				}

				&.info {
					color: lighten(#444, 10);

					p {
						margin: 0;
					}
				}

				&.name {
					input {
						width: 100%;
						margin: 0;
						box-shadow: inset 0 1px 2px rgba(0,0,0,.07);
						border: 1px solid #ddd;

						&:focus {
							border-color: #5b9dd9;
							box-shadow: 0 0 2px rgba(30,140,190,.8);
							outline: none;
						}
					}
				}

				&.actions {
					margin: 0;
					overflow: hidden;
					padding-bottom: 15px;

					.spinner {
						float: right;
					}

					.save {
						float: right;

						&.button {
							background-color: #fff;
						}
					}

					.instructions {
						text-decoration: none;
						color: #808080;
						cursor: help;
						line-height: 26px;
					}
				}

				&.actions {
					border-top: 1px solid $layout-border-grey;
					background-color: $layout-bg-grey-darker;
					padding-top: 14px;
				}

				.ac-error-message {
					display: none;
				}

				&.save-error {
					.ac-error-message {
						background: #F55E4F;
						color: #fff;
						position: relative;
						display: block;
						border-radius: 3px;
						margin: 5px 0 15px;
						padding: 1px 10px;
						min-height: 0px;

						p {
							font-size: 13px !important;
							line-height: 1.4;
							margin: 8px 0;
							padding: 0;
							text-shadow: none;
							color: #fff;
							text-shadow: 0 1px 0 #DD4232;
						}

						&:after {
							content: "";
							width: 0;
							height: 0;
							border: transparent 5px solid;
							border-top-color: #F55E4F;
							display: block;
							position: absolute;
							bottom: -10px;
							left: 10px;
						}
					}
				}

			}
		}

		&.layout {
			margin-top: -1px;

			&.loading {
				position: relative;

				.body {
					position: relative;
					&:after {
						content: '';
						position: absolute;
						left: 0;
						top: 0;
						right: 0;
						bottom: 0;
						background: rgba(255, 255, 255, .5);
					}
				}
				.spinner {
					visibility: visible;
				}
			}

			&.not_editable {
				.head {
					span.title {
						color: lighten(#808080, 22);
					}
					.actions {
						.delete,
						.pipe {
							display: none;
						}
					}
				}
				.body {

					input.name {
						background-color: #eee;
					}

					.error-notice {
						background-color: darken(#ffb900, 4);
						color: #fff;
						padding: 6px 10px;
						line-height: 24px;
						margin-left: 15px;
						margin-right: 15px;
						margin-bottom: 15px;
					}
				}
				&.current {
					.head span.title {
						color: lighten(#808080, 12);
					}
				}
			}

			.head {
				color: #505050;
				font-size: 13px;
				margin: 0;
				font-weight: bold;
				text-decoration: none;
				padding: 10px 14px 6px;
				display: block;
				position: relative;
				min-height: 42px;
				border: 1px solid transparent;

				&:after {
					content: "";
					display: table;
					clear: both;
				}

				&:focus {
					box-shadow: none;
				}

				.left {
					margin-right: 38px;
				}
				.right {
					position: absolute;
					top: 10px;
					right: 14px;
					width: 38px;
				}

				.title-div {
					margin: 4px 0 2px;

					span.description {
						font-style: italic;
						color: darken(#ccc, 10);
						font-weight: normal;
						font-size: 13px;
						margin-left: 4px;
					}
				}

				.actions {
					display: none;
					position: relative;

					a {
						text-decoration: none;
						font-weight: normal;

						&.delete {
							color: #BC0B0B;
						}
					}
					form.delete {
						display: inline;

						input.delete {
							font-size: 13px;
							color: #BC0B0B;
							border: none;
							font-weight: normal;
							background: transparent;
							display: inline;
							cursor: pointer;
							padding: 0;
							margin: 0;

							&:hover {
								color: #f00;
							}
						}
					}

					.pipe {
						color: #ddd;
						padding-left: 3px;
						padding-right: 3px;
					}
				}

				.toggle {
					display: block;
					float: right;
					width: 38px;
					height: 38px;
					background: transparent url('../images/arrow.png') no-repeat 19px 15px;
					cursor: pointer;
				}

				span.label {
					text-transform: uppercase;
					font-size: 11px;
					font-weight: bold;
					color: #808080;
					margin-left: 10px;
				}

				&:hover {
					background-color: $layout-bg-grey;

					.actions {
						display: inline-block;
					}
				}
			}

			.body {
				display: none;
				box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
				border-top: 1px solid $layout-border-grey;
				position: relative;

				.save-message {
					display: none;
					background-color: #46b450;
					color: #fff;
					text-align: center;
					height: 34px;
					line-height: 34px;
					margin-left: 15px;
					margin-right: 15px;
					margin-bottom: 15px;
				}
			}

			&.current {
				border: 1px solid $layout-border-blue;
				position: relative;

				.head {
					background-color: $layout-bg-blue;

					.title {
						color: #000;
					}
					.body {
						border-color: #c7d7e2;
					}
				}

				&.open {
					border-color: $layout-border-blue-darker;

					.head {
						background-color: $layout-bg-blue-darker;
					}
				}
			}

			&.open {
				border-color: $layout-border-grey-darker;
				margin-bottom: 6px;

				.head {
					background-color: $layout-bg-grey;
					.title {
						text-shadow: 0 1px 0 #FFFFFF;
					}

					.toggle {
						background-position: 19px -112px;
					}
				}

				.body {
					//border-color: $layout-border-grey-darker;
				}
			}
		}
		// &.layout

		&.new {
			display: none;
			margin-bottom: 10px;
		}
		// &.new
	}
}