/**
 * Mixins
 */

@mixin clearfix() {
	*zoom: 1;

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

	&:after {
		clear: both;
	}
}

@mixin ir() {
	display: block;
	text-indent: -9999px;
	position: relative;
	height: 1em;
	width: 1em;
}

@mixin icon( $glyph: "\e001" ) {
	font-family: 'dashicons';
	speak: none;
	font-weight: normal;
	font-variant: normal;
	text-transform: none;
	line-height: 1;
	-webkit-font-smoothing: antialiased;
	margin:0;
	text-indent: 0;
	position: absolute;
	top:0;
	left:0;
	width:100%;
	height: 100%;
	text-align: center;
	content: $glyph;
}

/* Settings */
.recipe-hero {
	&.settings {
		table.form-table {
			margin: 0 0 0;
			.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 {
				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 {
				margin: 0 -24px 0 0;
				float: right;
			}
			fieldset {
				margin-top: 4px;
				img.help_tip {
					margin: -3px 0 0 5px;
				}
				p.description {
					margin-bottom: 8px;
				}
				&:first-child {
					margin-top: 0;
				}
			}
			.image_width_settings {
				vertical-align: middle;
				label {
					margin-left: 20px;
				}
			}
		}
	}
}

// Recipe Image Gallery
#recipe-hero-recipe-images {
	.inside {
		margin: 0;
		padding: 0;
		.add_recipe_images {
			padding: 0 12px 12px;
		}
		#recipe_images_container {
			padding: 0 0 0 9px;
			ul {
				@include clearfix();
				margin: 0;
				padding: 0;
				li.image, li.add, li.rh-metabox-sortable-placeholder {
					width: 80px;
					float: left;
					cursor: move;
					border: 1px solid #d5d5d5;
					margin: 9px 9px 0 0;
					background: #f7f7f7;
					-webkit-border-radius: 2px;
					-moz-border-radius: 2px;
					border-radius: 2px;
					position: relative;
					-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
					-moz-box-sizing: border-box;    /* Firefox, other Gecko */
					box-sizing: border-box;         /* Opera/IE 8+ */
					img {
						width: 100%;
						height: auto;
						display: block;
					}
				}
				li.rh-metabox-sortable-placeholder {
					border: 3px dashed #dddddd;
					position: relative;
					&:after {
						@include icon( "\f128" );
						font-size:2.618em;
						line-height: 72px;
						color: #ddd;
					}
				}
				ul.actions {
					position: absolute;
					top:-8px;
					right: -8px;
					padding: 2px;
					display: none;
					li {
						float: right;
						margin: 0 0 0 2px;
						a {
							width: 1em;
							height:1em;
							margin: 0;
							height: 0;
							display: block;
							overflow: hidden;
							&.tips {
								cursor: pointer;
							}
						}
						a.view {
							@include ir();
							font-size:1.4em;
							&:before {
								@include icon( "\f128" );
								background-color: #000;
								color: #fff;
							}
						}
						a.delete {
							@include ir();
							font-size:1.4em;
							&:before {
								@include icon( "\f182" );
								color:white;
								background-color: #000;
								-webkit-border-radius:100%;
								border-radius:100%;
								box-shadow:0 1px 2px rgba(0,0,0,0.2);
							}
							&:hover:before {
								background-color: red;
							}
						}
					}
				}
				li:hover ul.actions {
					display: block;
				}
			}
		}
	}
}

/* List of all Recipes - columns */
.post-type-recipe {
	#posts-filter {
		.wp-list-table {
			tr {
				th {
					&#id {
						width: 50px;
					}
				}
			}
		}
	}
}

/* Recipe Ordering */

.wp-list-table .ui-sortable tr {
	cursor: move;
}

.wp-list-table .spo-updating tr,
.wp-list-table .ui-sortable tr.inline-editor {
	cursor: default;
}

.wp-list-table .ui-sortable-placeholder {
	outline: 1px dashed #bbb;
	background: #F1F1F1;
	visibility: visible !important;
}
.wp-list-table .ui-sortable-helper {
	background-color: #fff;
	outline: 1px solid #e1e1e1;
}
.spo-updating-row .check-column {
	background: url('../../../../../../wp-admin/images/spinner.gif') 10px 9px no-repeat;
}
@media print,
(-o-min-device-pixel-ratio: 5/4),
(-webkit-min-device-pixel-ratio: 1.25),
(min-resolution: 120dpi) {
	.spo-updating-row .check-column {
		background-image: url('../../../../../../wp-admin/images/spinner-2x.gif');
		background-size: 20px 20px;
	}
}
.spo-updating-row .check-column input {
	visibility: hidden;
}

/**
jQuery UI Autocomplete Styles
**/

.ui-autocomplete {
	background: #fff;
}

/* Addons */
.recipe_hero_extensions_wrap {
	.products {
		overflow: hidden;
		li {
			display: inline-block;
			margin: 0 10px 10px 0 !important;
			padding: 0 0 36px;
			vertical-align: top;
			width: 280px;
			border: 1px solid #ddd;
			-webkit-box-shadow:
				inset 0 1px 0 rgba(255,255,255,0.2),
				inset 0 -1px 0 rgba(0,0,0,0.1);
			box-shadow:
				inset 0 1px 0 rgba(255,255,255,0.2),
				inset 0 -1px 0 rgba(0,0,0,0.1);
			overflow: hidden;
			position: relative;
			a {
				color: inherit;
				text-decoration: none;
			}
			img {
				max-width: 100%;
				height: auto;
				display: block;
				margin: 0;
				background: #fff;
				border-bottom: 1px solid rgba(0,0,0,0.1);
				&:hover {
					opacity: 0.8;
				}
			}
			h3 {
				margin: 0 !important;
				padding: 10px 10px !important;
				line-height: 1;
				background: rgba(255,255,255,0.6);
				border-bottom: 1px solid rgba(0,0,0,0.1);
				color: #000;
				text-align: center;
				position: absolute;
				width: 260px;
				bottom: 0;
				left: 0;
				font-size: 16px;
				text-shadow: none;
			}
			p {
				padding: 20px !important;
				margin: 0 !important;
				border-top: 1px solid #f1f1f1;
			}
			.price {
				display: none;
			}
		}
	}
}