@import "mixins";

#siteorigin-custom-css {
	margin: 0 0 0 -20px;

	h2 {
		background: #f8f8f8;
		padding: 20px;
		border-bottom: 1px solid #d0d0d0;
		margin-bottom: 20px;

		.icon {
			width: 40px;
			height: auto;
			margin: -8px 10px -8px 0;
		}

		box-shadow: 0 1px 1px rgba(0,0,0,0.035);
	}

	.updated {
		margin: 0 20px 20px 20px ;
	}

	#poststuff {
		padding: 0 20px;

		.postbox {
			border: 1px solid #D0D0D0;

			h3.hndle {
				cursor: default;
				border-bottom: 1px solid #D0D0D0;
				background: #efefef;
				position: relative;

				.hide {
					position: absolute;
					top: 50%;
					line-height: 1em;
					margin-top: -0.5em;
					right: 12px;
				}
			}
		}

		#so-custom-css-getting-started {
			.inside {
				padding: 0 6px 6px 6px;

				img {
					display: block;
					width: 100%;
					height: auto;
				}
			}
		}
	}
}

#so-custom-css-form {
	margin-right: 340px;
}

#so-custom-css-info{
	width: 315px;
	float: right;

	*:first-child {
		margin-top: 0;
	}

	*:last-child {
		margin-bottom: 0;
	}
}

#so-custom-css-revisions {
	ol {
		list-style: none;
		margin: 0;

		li{
			margin: 0;
			line-height: 2.2em;
		}
	}
}

#so-custom-css-form {

	.custom-css-preview {
		iframe {
			display: none;
		}
	}

	.custom-css-toolbar {
		border:1px solid #D0D0D0;
		border-bottom: none;
		background: #efefef;
		padding: 8px 10px;
		overflow: auto;

		.toolbar-function-buttons{
			float: left;

			.toolbar-functions-dropdown {
				display: none;
			}

			ul.toolbar-buttons {
				margin: 0;

				li {
					display: inline-block;
					margin: 0;
					padding: 0;
				}
			}
		}

		.toolbar-action-buttons {
			float: right;

			a {
				&.active {
					border-color: #b4c4cf;
					background-color: #e9f9ff;
					color: #596872;
				}
			}

			.editor-expand {
				float: right;
				text-decoration: none;
				color: #666;

				.fa-compress {
					display: none;
				}
			}
		}

		.fa {
			font-size: 14px;
		}
	}

	.custom-css-container {
		border:1px solid #D0D0D0;
		background: #f7f7f7;
		cursor: text;
		overflow: hidden;

		.CodeMirror {
			height: auto;
		}

		.CodeMirror-scroll {
			min-height: 300px;
		}

		.CodeMirror-lines {
			padding: 8px 0 8px 0;
		}

		textarea {
			border: 0;
			padding: 8px 0 8px 4px;
			width: 100%;
			min-height: 300px;
			display: block;
			font-family: monospace;
			font-size: 13px;
			line-height: 1.4em;
			border-left: 1px solid #ddd;
			margin-left: 16px;
		}
	}

	.decoration {
		display: none;
	}

	&.expanded {
		@expanded_form_width: 340px;

		z-index: 100000;
		position: fixed;
		top: 0;
		left: 0;
		bottom: 0;
		width: @expanded_form_width;

		.custom-css-toolbar {

			.editor-expand {

				.fa-expand {
					display: none;
				}
				.fa-compress {
					display: inline-block;
				}

			}
		}

		.decoration {
			display: block;
			position: absolute;
			top: 0;
			bottom: 0;
			left: @expanded_form_width - 1px;
			width: 2px;
			background: rgba(0,0,0,0.1);
		}

		.description {
			display: none;
		}

		.submit {
			display: none;
		}

		.custom-css-preview {
			position: fixed;
			display: block;
			top: 0;
			right: 0;
			bottom: 0;
			left: @expanded_form_width;
			background: #ffffff;

			iframe {
				display: block;
				width: 100%;
				height: 100%;
				overflow-x: hidden;
			}

		}
	}
}

#so-custom-css-properties {

	display: none;

	position: fixed;
	top: 0;
	left: -338px;
	bottom: 0;
	width: 338px;
	background: #ffffff;
	border:1px solid #D0D0D0;
	overflow-y: auto;

	z-index: 100000;

	.toolbar {
		display: block;
		padding: 7px 10px;
		border-bottom: 1px solid #aaa;
		background: #F6F6F6;
		text-align: left;

		select {
			line-height: 1;
			font-size: 13px;
			max-width: 265px;
			.transition(0.5s);

			&.highlighted {
				background: #daeaf7;
			}
		}

		.close {
			float: right;
			margin: 2px 4px 0 0;
		}
	}

	.section-tabs {
		list-style: none;
		height: auto;
		margin: 0;
		box-shadow: 0 1px 1px rgba(0,0,0,0.1);

		li {
			box-sizing: border-box;
			float: left;
			width: 33.333%;
			padding: 10px 7px;
			border: 1px solid #aaa;
			background: #F6F6F6;
			font-weight: bold;

			border-top: 0;
			border-left: 0;
			font-size: 13px;
			line-height: 1em;

			cursor: pointer;
			white-space: nowrap;
			overflow: hidden;

			color: #666;

			&:hover {
				background: #fff;
			}

			.fa {
				float: left;
				display: block;
				margin: -1px 6px -1px 0;
				font-size: 15px;
				color: #666;
			}

			&:last-child {
				border-right: 0;
			}

			&.active {
				color: #444;
				background: #e8e8e8;

				.fa {
					color: #333;
				}
			}
		}
	}

	.sections {

		.section {
			display: none;
			padding: 10px;
		}

		.fields-table {
			width: 100%;
			padding-top: 5px;

			th, td {
				position: relative;
				.clearfix();
			}

			th[scope="row"] {
				font-weight: bold;
				font-size: 12px;
				padding-right: 10px;
				text-align: left;
				width: 36%;
				vertical-align: top;
			}

			td {
				padding: 0 0 12px 0  ;
			}
			
			input, select {
				display: block;
				margin: 0 25px 0 0;
				border: 1px solid #c0c0c0;
				width: 175px;

				box-sizing: border-box;
				border-radius: 0;
			}

			.select {
				display: block;
				position: absolute;
				top: 0px;
				right: 1px;

				padding: 5px;
				cursor: pointer;
				font-size: 15px;
			}

			.select-tabs {
				margin: 0;
				height: 40px;

				.select-tab {
					cursor: pointer;
					float: left;

					-webkit-box-sizing: border-box;
					-moz-box-sizing: border-box;
					box-sizing: border-box;

					text-align: center;
					border: 1px solid #c0c0c0;
					padding: 4px 2px;
					border-right-width: 0;
					background: #f7f7f7;

					.fa {
						line-height: 14px;
						font-size: 14px;
						color: #777;
					}

					&:last-child {
						border-right-width: 1px;
					}

					&:hover, &.active {
						background: #e9e9e9;

						.fa {
							color: #333;
						}
					}

				}

			}

			.side-tabs {
				height: 26px;

				.side-tab {
					width: 20%;
					text-align: center;
					padding: 5px;
					line-height: 0;

					div {
						display: inline-block;
						width: 10px;
						height: 10px;
						border: 2px solid #aaa;
					}

					@border_color: #12609b;

					.spacing-all {
						border-color: @border_color;
					}

					.spacing-top {
						border-top-color: @border_color;
					}

					.spacing-left {
						border-left-color: @border_color;
					}

					.spacing-bottom {
						border-bottom-color: @border_color;
					}

					.spacing-right {
						border-right-color: @border_color;
					}
				}
			}

			.sides {
				.side > div {
					margin-bottom: 5px;

					&:last-child {
						margin-bottom: 0;
					}
				}
			}

		}
	}
}

.css-editor-snippet-browser {
	display: none;

	.snippet-browser-overlay {
		position: fixed;
		z-index: 100000;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background: rgba(0,0,0,0.8);
	}

	.snippet-browser-dialog {

		@dialog_side_space: 40px;

		> div {
			position: fixed;
			z-index: 100001;
			background: #fff;
			box-sizing: border-box;
		}

		.toolbar {
			top: @dialog_side_space;
			left: @dialog_side_space;
			right: @dialog_side_space;
			height: 50px;
			background: #FCFCFC;
			border-bottom: 1px solid #dddddd;
			overflow: hidden;

			h1 {
				padding: 0 16px;
				font-size: 22px;
				line-height: 50px;
				margin: 0;
				color: #444;
			}

			.close {
				cursor: pointer;
				color: #777;
				background-color: transparent;
				height: 50px;
				width: 50px;
				padding: 15px 0 0 0;
				position: absolute;
				text-align: center;
				border: 0;
				border-left: 1px solid #ddd;
				top: 0;
				right: 0;
				text-decoration: none;
				box-sizing: border-box;

				&:hover {
					background: #dddddd;
				}

				.icon {
					&:before {
						content: '\f158';
						font: normal 20px/1 'dashicons';
						vertical-align: middle;
						-webkit-font-smoothing: antialiased;
						-moz-osx-font-smoothing: grayscale;
						color: #666;
					}
				}
			}
		}

		.sidebar {
			top: @dialog_side_space + 50px;
			left: @dialog_side_space;
			bottom: @dialog_side_space + 50px;
			width: 300px;
			background: #f3f3f3;
			border-right: 1px solid #dddddd;
			padding: 16px;
			overflow: auto;

			.snippet-search {
				width: 100%;
				margin-bottom: 20px;
				padding: 8px;
			}

			.snippets {
				margin: 0;

				.snippet {
					cursor: pointer;
					font-size: 1.1em;
					line-height: 1.35em;
					margin-bottom: 20px;

					&.active {
						font-weight: bold;
					}
				}
			}
		}

		.main {
			top: @dialog_side_space + 50px;
			left: @dialog_side_space + 300px;
			right: @dialog_side_space;
			bottom: @dialog_side_space + 50px;
			background: #fff;
			overflow: auto;

			.snippet-view {
				padding: 20px;

				.snippet-title {
					margin: 0 0 0.75em 0;
					padding: 0;
				}

				.snippet-description {
					font-size: 1.1em;
					color: #666;
					margin-bottom: 2em;
				}

				.snippet-code {
					padding: 20px;
					border: 1px solid #d0d0d0;
					background: #f8f8f8;
				}
			}
		}

		.buttons {
			bottom: @dialog_side_space;
			left: @dialog_side_space;
			right: @dialog_side_space;
			height: 50px;
			background: #FCFCFC;
			border-top: 1px solid #dddddd;
			text-align: right;
			padding: 10px 20px;
			overflow: hidden;
		}


	}
}

.socss-field-measurement {

	position: relative;

	input.socss-field-input {
		min-height: 1.5em;
		padding-right: 50px;
		width: 120px !important;
		box-sizing: border-box;
	}

	.dashicons-arrow-down {
		position: absolute;
		top: 4px;
		left: 97px;
		cursor: pointer;
	}

	.dropdown {
		display: none;
		background: #F5F5F5;
		border: 1px solid #c0c0c0;
		position: absolute;
		top: 27px;
		left: 120px - 50px + 1px;
		width: 50px;
		z-index: 2;
		margin: 0;

		box-sizing: border-box;
		box-shadow: 0 1px 1px rgba(0,0,0,0.15);

		li {
			padding: 5px 0;
			text-align: center;
			line-height: 1.1em;
			font-size: 11px;
			margin: 0;

			&:hover, &.active  {
				background: #e8e8e8;
				cursor: pointer;
			}
		}
	}

	.units {
		position: absolute;
		top: 5px;
		left: 12px;
		color: #bbb;
		pointer-events: none;
	}
}

.socss-diw {
	position: absolute;
	top: 0px;
	left: 124px;

	.inc-button,
	.dec-button{
		cursor: pointer;
		box-sizing: border-box;
		float: left;
		padding: 8px;
		user-select: none;
		text-align: center;
		margin: 0;
		width: 27px;
		height: 27px;
		font-size: 10px;
	}

	.inc-button {
		border-left: 0;
	}
}

.socss-button {
	cursor: pointer;

	line-height: 1em;
	display: inline-block;
	border: 1px solid #c0c0c0;
	background: #f7f7f7;
	text-decoration: none;
	padding: 6px;
	font-weight: bold;
	color: #555;
	font-size: 0.95em;
	margin-left: 5px;

	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	-o-user-select: none;
	user-select: none;

	&:hover {
		border-color:#b0b0b0;
		background: #fff;
		box-shadow: 0 1px 2px rgba(0,0,0,0.1);

		.fa {
			color: #333;
		}
	}

	.fa {
		color: #555;
	}
}

.CodeMirror-lint-tooltip,
.CodeMirror-hints {
	/* This is above the editor in full-screen mode */
	z-index: 100002;
}