/**
 * admin.scss
 * General EasySocialSharing admin styles.
 */

/**
 * Imports
 */
@import "parts/mixins";
@import "parts/variables";
@import "parts/animation";
@import "parts/fonts";
@import 'parts/icon-style';
@import 'parts/sidebar';
@import 'parts/inline';
@import 'parts/popup';
@import 'parts/fly-in';

/**
 * Styling begins
 */
.blockUI.blockOverlay {
	@include loader();
}

/**
 * BlankSlate.
 */
.ess-pro-blankSlate {
	padding: 7.5em 0;
	margin-top: 10px;
	text-align: center;
	background: #f9f9f9;
	border: 1px solid #e5e5e5;
	box-shadow: 0 1px 1px rgba(0,0,0,0.04);
	-webkit-box-shadow: 0 1px 1px rgba(0,0,0,0.04);

	.ess-pro-BlankState-message {
		color: #aaa;
		margin: 0 auto 1.5em;
		line-height: 1.5em;
		font-size: 1.2em;
		max-width: 500px;

		&::before {
			color: #ddd;
			text-shadow: 0 -1px 1px rgba(0, 0, 0, .2), 0 1px 0 rgba(255, 255, 255, .8);
			font-size: 8em;
			display: block;
			position: relative!important;
			top: auto;
			left: auto;
			line-height: 1em;
			margin: 0 0 .1875em;
			@include icon_dashicons( '\f488' );
		}
	}

	a.ess-pro-BlankState-cta {
		display: inline-block;
	}
}

table.ess-social-networks {
	td, th {
		vertical-align: top;
		line-height: 24px;
		padding: 1em;
		font-size: 14px;
		background: #fff;
		li {
			line-height: 24px;
			font-size: 14px;
		}
	}
	tbody.ess-social-network-rows {
		tr:nth-child(odd) {
			td {
				background: #f9f9f9;
			}
		}
	}
	ul, p {
		margin: 0;
	}
	td.ess-social-network-sort {
		cursor: move;
		font-size: 15px;
		width: 17px;
		text-align: center;

		&:before {
			content: "\f333";
			font-family: 'Dashicons';
			text-align: center;
			line-height: 1;
			color: #999;
			display: block;
			width: 17px;
			float: left;
			height: 100%;
			line-height: 24px;
		}
		&:hover {
			&:before {
				color: #333;
			}
		}
	}
	.ess-social-network-icon {
		width: 6%;
		.socicon {
			top: 0;
			color: #fff;
			padding: 7px;
		}
	}
	.ess-social-network-name {
		width: 20%;
	}
	.ess-social-network-description {
		width: 40%;
		mark {
			margin-left: 30px;
		}
	}
	.ess-social-network-min-count,
	.ess-social-network-api-support {
		width: 15%;
		text-align: center;
	}
	.ess-social-network-icon,
	.ess-social-network-name,
	.ess-social-network-description,
	.ess-social-network-min-count,
	.ess-social-network-api-support {
		mark {
			background: transparent none;
			&.no {
				color: $red;
			}
			&.yes {
				color: $green;
			}
			&.dash {
				color: #999;
			}
		}
		input, select, textarea {
			width: 100%;
		}
		a.ess-social-network-delete {
			color: red;
		}
	}
	tfoot {
		input, select {
			vertical-align: middle !important;
		}
		.button-secondary {
			float: right;
		}
	}
	.editing {
		.ess-social-network-view, .ess-social-network-edit {
			display: none;
		}
	}
}

.easy-social-sharing {

	h2.ess-nav-tab-wrapper {
		margin-bottom: 1em;
	}

	nav.ess-nav-tab-wrapper {
		margin: 1.5em 0 1em;
		border-bottom: 1px solid #ccc;
	}

	.subsubsub {
		margin: -8px 0 0;
	}

	textarea[disabled="disabled"] {
		background: #DFDFDF !important;
	}

	table.form-table {
		margin: 0;
		position: relative;

		.select2-container {
			display: block;
			max-width: 350px;
		}

		.forminp-radio ul {
			margin: 0;
			li {
				line-height: 1.4em;
			}
		}

		textarea.input-text {
			height: 100%;
			min-width: 150px;
			display: block;
		}

		input.regular-input {
			width: 25em;
		}

		textarea.wide-input {
			width: 100%;
		}

		img.help_tip,
		.easy-social-sharing-help-tip {
			padding: 0;
			margin: -4px 0 0 5px;
			vertical-align: middle;
			cursor: help;
			line-height: 1;
		}

		span.help_tip {
			cursor: help;
			color: $blue;
		}

		th {
			position: relative;
			padding-right: 24px;
		}

		.select2-container {
			vertical-align: top;
			margin-bottom: 3px;
		}

		table.widefat th {
			padding-right: inherit;
		}

		th img.help_tip,
		th .easy-social-sharing-help-tip {
			margin: 0 -24px 0 0;
			float: right;
		}

		.wp-list-table .easy-social-sharing-help-tip {
			float: none;
		}

		fieldset {
			margin-top: 4px;

			img.help_tip,
			.easy-social-sharing-help-tip {
				margin: -3px 0 0 5px;
			}

			p.description {
				margin-bottom: 8px;
			}

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

		.iris-picker {
			z-index: 100;
			display: none;
			position: absolute;
			border: 1px solid #ccc;
			border-radius: 3px;
			box-shadow: 0 1px 3px rgba(0,0,0,0.2);

			.ui-slider {
				border: 0 !important;
				margin: 0 !important;
				width: auto !important;
				height: auto !important;
				background: none transparent !important;

				.ui-slider-handle {
					margin-bottom: 0 !important;
				}
			}
		}

		.colorpickpreview {
			padding: 3px;
			padding-left: 20px;
			border: 1px solid #ddd;
			border-right: 0;
		}

		.colorpick {
			border-left: 0;
		}

		.image_width_settings {
			vertical-align: middle;

			label {
				margin-left: 10px;
			}
		}
	}

	.ess-form-inner {
		width: 60%;
	}
	.ess-form-inner,
	.ess-setting-preview {
		display: inline-block;
		vertical-align: top;
		margin-right: -5px;
		box-sizing: border-box;
	}

	.ess-setting-preview {
		background: #fff;
		width: 40%;
		padding: 30px;

		.ess-setting-preview__title {
			margin: 0;
		}

		&.ess-setting-preview--show {
			visibility: visible;
			opacity: 1;
		}

		&#ess-main-wrapper {

			.ess-sidebar-networks-container {
				position: initial;

				.ess-social-network-lists {
					.ess-social-networks {
						background: none;
					}
				}
			}

			.ess-fly-layout-wrapper {
				position: initial;
				box-shadow: none;

				&.ess-rounded-icon {
					.ess-social-network-lists {
						.ess-social-networks {
							height: 92px;

							.socicon {
								line-height: 3.8;
							}

							.ess-social-count {
								line-height: 4.1;
							}
						}
					}
				}
			}
		}
	}
}

/**
 * Reports
 */
.ess-reports-wrap,
.ess-reports-wide {

	.widefat {
		td {
			vertical-align: top;
			padding: 7px;
			.description {
				margin: 4px 0 0;
			}
		}
	}

	.postbox {
		&::after {
			content: '.';
			display: block;
			height: 0;
			clear: both;
			visibility: hidden;
		}

		h3 {
			cursor: default !important;
		}

		.inside {
			padding: 10px;
			margin: 0 !important;
		}

		div.stats_range,
		h3.stats_range {
			border-bottom-color: #dfdfdf;
			margin: 0;
			padding: 0 !important;

			.specific_location {
				float: right;
				line-height: 26px;
				width: 200px;
				margin: 8px;
				text-decoration: none;
			}

			ul {
				list-style: none outside;
				margin: 0;
				padding: 0;
				zoom: 1;
				background: #f5f5f5;
				border-bottom: 1px solid #ccc;

				&::before,
				&::after {
					content: ' ';
					display: table;
				}

				&::after {
					clear: both;
				}

				li {
					float: left;
					margin: 0;
					padding: 0;
					line-height: 26px;
					font-weight: bold;
					font-size: 14px;

					a {
						border-right: 1px solid #dfdfdf;
						padding: 10px;
						display: block;
						text-decoration: none;
					}

					&.active {
						background: #fff;
						-webkit-box-shadow: 0 4px 0 0 #fff;
						box-shadow: 0 4px 0 0 #fff;

						a {
							color: #777;
						}
					}

					&.custom {
						padding: 9px 10px;
						vertical-align: middle;

						form,
						div {
							display: inline;
							margin: 0;

							input.range_datepicker {
								padding: 0;
								margin: 0 10px 0 0;
								background: transparent;
								border: 0;
								color: #777;
								text-align: center;
								-webkit-box-shadow: none;
								box-shadow: none;

								&.from {
									margin-right: 0;
								}
							}
						}
					}
				}
			}
		}

		span.spinner.is-active {
			margin-top: 12px;
		}
	}
}

/**
 * Tooltips
 */
.tips {
	cursor: help;
	text-decoration: none;
}

img.tips {
	padding: 5px 0 0 0;
}

img.help_tip {
	margin: 0 0 0 9px;
	vertical-align: middle;
}

#tiptip_holder {
	display: none;
	z-index: 8675309;
	position: absolute;
	top: 0;
	/*rtl:ignore*/
	left: 0;

	&.tip_top {
		padding-bottom: 5px;

		#tiptip_arrow_inner {
			margin-top: -7px;
			margin-left: -6px;
			border-top-color: #333;
		}
	}

	&.tip_bottom {
		padding-top: 5px;

		#tiptip_arrow_inner {
			margin-top: -5px;
			margin-left: -6px;
			border-bottom-color: #333;
		}
	}

	&.tip_right {
		padding-left: 5px;

		#tiptip_arrow_inner {
			margin-top: -6px;
			margin-left: -5px;
			border-right-color: #333;
		}
	}

	&.tip_left {
		padding-right: 5px;

		#tiptip_arrow_inner {
			margin-top: -6px;
			margin-left: -7px;
			border-left-color: #333;
		}
	}
}

#tiptip_content,
.ess_error_tip {
	color: #fff;
	font-size: 0.8em;
	max-width: 150px;
	background: #333;
	text-align: center;
	border-radius: 3px;
	padding: 0.618em 1em;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);

	code {
		padding: 1px;
		background: #888;
	}
}

#tiptip_arrow,
#tiptip_arrow_inner {
	position: absolute;
	border-color: transparent;
	border-style: solid;
	border-width: 6px;
	height: 0;
	width: 0;
}

/*rtl:raw:
#tiptip_arrow {
	right: 50%;
	margin-right: -6px;
}
*/

.ess_error_tip {
	max-width: 20em;
	line-height: 1.8em;
	position: absolute;
	white-space: normal;
	background: #d82223;
	margin: 1.5em 1px 0 -1em;
	z-index: 9999999;

	&::after {
		content: '';
		display: block;
		border: 8px solid #d82223;
		border-right-color: transparent;
		border-left-color: transparent;
		border-top-color: transparent;
		position: absolute;
		top: -3px;
		left: 50%;
		margin: -1em 0 0 -3px;
	}
}

/**
 * Help Tip
 */
.easy-social-sharing-help-tip {
	color: #666;
	display: inline-block;
	font-size: 1.1em;
	font-style: normal;
	height: 16px;
	line-height: 16px;
	position: relative;
	vertical-align: middle;
	width: 16px;

	&::after {
		@include icon_dashicons( '\f223' );
		cursor: help;
	}
}

h2 .easy-social-sharing-help-tip {
	margin-top: -5px;
	margin-left: 0.25em;
}

/**
 * Select2 elements.
 */
.select2-drop,
.select2-dropdown {
	z-index: 999999 !important;
}
.select2-results {
	line-height: 1.5em;
	.select2-results__option, .select2-results__group {
		margin: 0;
		padding: 8px;
	}
}
.select2-dropdown {
	border-color: #ddd;
}
.select2-dropdown--below {
	box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
}
.select2-dropdown--above {
	box-shadow: 0 -1px 1px rgba(0, 0, 0, 0.1);
}
.select2-container {
	.select2-selection__rendered.ui-sortable li {
		cursor: move;
	}
	.select2-selection {
		border-color: #ddd;
	}
	.select2-search__field {
		min-width: 150px;
	}
	.select2-selection--single {
		height: 32px;
		.select2-selection__rendered {
			line-height: 32px;
			padding-right: 24px;
		}
		.select2-selection__arrow {
			right: 3px;
			height: 30px;
		}
	}
	.select2-selection--multiple  {
		min-height: 28px;
		border-radius: 0;
		line-height: 1.5;
		li {
			margin: 0;
		}
		.select2-selection__choice {
			padding: 2px 6px;
		}
	}
	.select2-selection__clear {
		color: #999;
		margin-top: -1px;
	}
	.select2-search--inline {
		.select2-search__field {
			font-family: inherit;
			font-size: inherit;
			font-weight: inherit;
			padding: 3px 0;
		}
	}
}
.easy-social-sharing table.form-table {
	.select2-container {
		min-width: 400px !important;
	}
}