/**
 * Custom CSS at Add New / Edit Views screen
 *
 * @package   GravityView
 * @license   GPL2+
 * @author    Katz Web Services, Inc.
 * @link      http://gravityview.co
 * @copyright Copyright 2014, Katz Web Services, Inc.
 *
 * @since 1.0.0
 */
@import "admin-widgets-php";
@import "admin-merge-tags";
@import "admin-tooltips";
@import "admin-metabox";

// http://blog.teamtreehouse.com/a-better-clearfix-with-sass
%clearfix {
	&:after {
		content: "";
		display: table;
		clear: both;
	}
}

$dismiss-red: #C62D2D;

/**
 * Convert buttons to not having any style
 */
.gv-reset-button-style {

	/**
	 * Begin from normalize.css
	 */
	font-family: inherit; /* 1 */
	font-size: 100%; /* 1 */
	margin: 0; /* 2 */
	overflow: visible;
	text-transform: none;
	-webkit-appearance: button;

	// Remove the inner border and padding in Firefox.
	&::-moz-focus-inner {
		border-style: none;
		padding: 0;
	}
	// Restore the focus styles unset by the previous rule.
	&:-moz-focusring {
		outline: 1px dotted ButtonText;
	}
	/**
	 * End from normalize.css
	 */

	border: none;
	background: none;
	padding: 0;
	cursor: pointer;
}

$gv-overlay-index: 10000;

/* GV Grid
--------------------------------------- */

.gv-grid {
	box-sizing: border-box;
	margin-bottom: 2em;
}

.gv-grid:before,
.gv-grid:after {
	content: " ";
	display: table;
}

.gv-grid:after {
	clear: both;
}

.gv-grid-pad {
	padding: 1em 0 0 1em;
}

.gv-grid-pad > [class*='gv-grid-col-'] {
	padding-right: 1em;
}

.gv-grid-border {
	border: 1px solid #999;
}

[class*='gv-grid-col-'] {
	float: left;
	padding-right: 1%;
	box-sizing: border-box;
}


.gv-grid-col-1-4 {
	width: 25%;
}

.gv-grid-col-1-2 {
	width: 49.5%;
	padding-right: 2%;
}
.gv-grid-col-1-2 + .gv-grid-col-1-2 {
	padding-right: 0;
}

.gv-grid-col-1-8 {
	width: 12.5%;
}

.gv-grid-col-1-3 {
	width: 33.33%;
	padding-right: 2%;
}
.gv-grid-col-2-3 {
	width: 66.66%;
	padding-right: 1%;
}



.gv-grid-col-1-1 {
	width: 100%;
}

// Clear the left footer area
.gv-grid-col-1-1 + .gv-grid-col-1-3 + .gv-grid-col-2-3 + .gv-grid-col-1-2,
.gv-grid-col-1-1 + .gv-grid-col-2-3 + .gv-grid-col-1-3 + .gv-grid-col-1-2 {
	clear: left;
}

#edit-active-fields,
#single-active-fields,
#directory-footer-widgets {
	margin-bottom: 0;
}

/* GV Sections
--------------------------------------- */

.gv-section:before,
.gv-section:after {
	content: " ";
	display: table;
}

.gv-section:after {
	clear: both;
}

.gv-section h4 {
	font-size: 1.25em;
	font-weight: bold;
	margin-bottom: .75em;
}

.gv-section h4 span {
	font-size: 14px;
	display: block;
	color: #636D77;
	font-weight: normal;
}

/* GV View Types
--------------------------------------- */

.gv-view-types-module {
	padding: 1em;
	margin-bottom: 1em;
	background: #eee;
	position: relative;
	border: 2px solid transparent;
	box-sizing: border-box;
}

.gv-view-types-module:hover .gv-view-types-hover {
	display: block;
}

.gv-view-types-module img {
	display: block;
	width: 100%;
	height: auto;
	margin: 0;
	padding: 0;
}

.gv-view-types-module h5 {
	white-space: nowrap; // Prevent different size boxes in responsive because title wraps to two lines
	margin: 0.5em 0;
	padding: 0;
	font-size: 18px;
}

.gv-view-types-module .description {
	margin: 0;
	padding: 0;
	height: 3em;
	overflow: hidden;
}

.gv-view-types-module.gv-selected {
	border: 2px solid #1e8cbe;
}

.gv-view-types-hover {
	display: none;
	background: rgba(0, 0, 0, .6);
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 100%;

	.gv-site-preview {
		color: #fff;
		text-decoration: none;
	}

	.dashicons {
		font-size: 24px;
		width: 24px;
		height: 24px;
		position: absolute;
		top: 5px;
		right: 5px;
		opacity: .5;

		&:hover, &:focus {
			opacity: 1;
		}
	}
}

// Select / Preview buttons container
.gv-view-types-hover > div {

	padding-top: 31%;

	// .button-large is 30px; we want to vertically-center
	margin-top: -15px;

	p {
		margin: 0.5em 0 1.5em;
		padding: 0;
		text-align: center;

		a {
			display: inline-block;
			width: 60%;
		}
	}

}

/* button buy now */
.button-primary.button-buy-now {

	background: #2ecc37;
	border-color: #00a213;
	box-shadow: inset 0 1px 0 rgba(120, 230, 129, .5), 0 1px 0 rgba(0, 0, 0, .15);

	&.focus,
	&:focus,
	&.hover,
	&:hover {
		border-color: #00a213;
		background: #1ebe41;
		box-shadow: inset 0 1px 0 rgba(120, 230, 129, .6);
	}

	&.focus,
	&:focus {
		border-color: #0e5025;
		box-shadow: inset 0 1px 0 rgba(120, 230, 129, .6), 1px 1px 2px rgba(0, 0, 0, .4);
	}

	&.active,
	&.active:hover,
	&.active:focus,
	&:active {
		border-color: #00842d;
		background: #1ebe41;
	}
}

// Don't display the arrow toggle for collapsing the metabox
#gravityview_select_form .handlediv {
	display: none;
}

/**
 * Form Information Links
 */
.gv-form-links {

    .metabox-prefs & {
      display: none;
    }

	color: #ddd;
	font-weight: normal;
	padding: 0 0 0 10px;

	.row-actions {
		visibility: visible;
		padding: 0;
		left: auto;
	}
	.gv-form-title {
		display: none;
	}
}

#gv_switch_view_button {
	display: inline-block;
}

#gravityview_select_template {
	display: none; // Don't display by default
}

#gravityview_select_template .inside {
	max-height: 450px;
	overflow-x: auto;
}

#gravityview_select_template .gv-grid-col-1-3 {
	max-width: 250px;
	min-width: 200px;
}

/** template preview */
.gv-template-preview {
	display: none;
	width: 90%;
}

/**
 * Sidebar Widget: View Settings
 */
#gravityview_settings th {
	white-space: nowrap;
	font-weight: normal;
	max-width: 200px; // Default th width in forms.css
	width: auto;

	// Copied from forms.css > .form-table td
	margin-bottom: 9px;
	padding: 15px 10px;
	line-height: 1.3;
	vertical-align: middle;
}

// Hide until shown by JS
#gravityview_sort_filter,
#gravityview_view_config {
	display: none;
}

/** Show spinner cursor while the View is being AJAX updated. **/
.gv-wait,
.gv-wait a {
  cursor: wait;
}

// Fix issue with theme conflicts where .gv-overlay gets in the way
.ui-front {
  z-index: $gv-overlay-index + 1 !important;
}

/** View configuration tabs */
.ui-tabs {
	position: relative;
	padding: .1em;
	zoom: 1;
	margin-top: 1em;

	.ui-tabs-nav {
		margin: 0;
		padding: .1em .1em 0;
		-webkit-margin-before: 0;
		-webkit-margin-after: 0;
		-webkit-margin-start: 0;
		-webkit-margin-end: 0;
		-webkit-padding-start: 0;

		li {
			list-style: none;
			float: left;
			position: relative;
			top: 2px;
			margin: 0 .2em 1px 0;
			border-bottom: 0;
			padding: 0;
			white-space: nowrap;
			outline: none;

			// The tab anchor link
			.nav-tab {
				float: left;
				padding: .5em 1em;
				text-decoration: none;
				font-size: 14px;
				font-weight: 400;

				&:link, &:visited, &:hover, &:active, &:focus {
				  outline: none;
                  -webkit-box-shadow: none;
				}
			}

			// Non-active state
			.dashicons {
				color: #999;
				font-size: 24px;
				height: 24px;
				width: 24px;
			}

			&.ui-state-active,
			&.ui-state-active.ui-state-hover {

				a {
					background-color: #fff;
					border-bottom: 1px solid #fff;
				}

				// Active text is #555D66 - we want a bit lighter
				// since it's bolder.
				.dashicons {
					color: #555D66;
				}
			}

			&.ui-state-hover .dashicons {
				color: #737373;
			}

		}
	}

	// Tab content area
	.ui-tabs-panel {
		display: block;
		padding: 1em;
		background: #fff;
		border: none;
		border-top: 1px solid #ccc;
	}

	.ui-tabs-hide {
		display: none !important;
	}
}

.gv-dialog {
	position: absolute;
	z-index: $gv-overlay-index + 1 !important;
}

.gv-overlay {
	cursor: pointer;
	position: fixed;
	z-index: $gv-overlay-index !important;
	background: transparent; // For browsers without support for rgba
	background: rgba(225, 225, 225, .4);
	width: 100%;
	height: 100%;
	overflow: hidden;
}

/** Sections */

hr {
	border: 0;
	height: 0;
	border-bottom: 1px solid #ddd;
	margin: 2em 0 2em 0;
}

/* GV Droppable Areas
--------------------------------------- */

.gv-droppable-area {
	margin-bottom: 1.25em;

	border: 1px dotted #b5bcc2;
	border-radius: 4px;

	.gv-droppable-area-action {
		padding: 7px 9px 5px;
		background: #eee;
	}

	.gv-droppable-area-action:before,
	.gv-droppable-area-action:after {
		content: " ";
		display: table;
	}

	.gv-droppable-area-action:after {
		clear: both;
	}

	.gv-droppable-area-title {
		margin: 0;
		font-size: .9rem;
		color: #555D66;
		font-weight: normal!important;
	}

	.gv-droppable-area-subtitle {
		margin: 0.25em 0 0 0;
		padding: 0;
		font-size: .8rem;
		color: #636D77;
	}

	.button-secondary {
		float: right;
		margin-right: .5em;

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

}

// End .gv-droppable-area

.active-drop {
	padding: 5px 8px;
	min-height: 44px;
	position: relative;

	.drop-message {
		color: #6D7883;
		margin: 0;
		display: block;
		text-align: center;
		width: 90%;
		padding: 0 5%;
		z-index: 1;
		min-height: 40px;
		font-size: 13px;

		// Vertically center
		position: absolute;
		top: 50%;
		margin-top: -8px;
		line-height: 16px;

	}

}

// End .active-drop

.gv-grid-col-1-2 .drop-message {
	padding-top: 0;
	padding-bottom: 0;
}

.fields-placeholder {
	margin: 5px 2px;
	height: 32px; // .active-drop height - margin-top - margin-bottom - 2px border
	border: 1px dashed #ccc;
}

.gv-fields {
	cursor: move;
	border: 1px solid #ddd;
	background: #f7f7f7;
	overflow: hidden;
	padding: 0.6em .75em;
	margin: 5px 0;
	width: 100%;
	z-index: 100; // Above .drop-message
	box-sizing: border-box;
	border-radius: 3px;

	h5 {
		float: left;
		width: 100%;
		font-weight: 600;
		font-size: 14px;
		margin: 0;
		padding: 0 0 0 .25em;
		user-select: none;
		box-sizing: border-box;

		// Parent field name
		small {
			color: #777;
			font-weight: 600;
		}
	}

	span.gv-field-controls {
		padding-left: .33em; // Give some space.
		box-sizing: border-box;
	}

	&:hover {

		background: #fefefe;

		.gv-field-controls .dashicons {
			color: #136cb9;
		}

		h5 small,
		.gv-field-info {
			color: #636D77;
		}
	}

	.gv-field-controls button {

		@extend .gv-reset-button-style;

		color: #0073aa;

		&.gv-remove-field {
			float: right;
		}

		.dashicons {

			width: 24px; // Give a larger click target
			font-size: 20px;
			height: 20px;
			line-height: 20px;
			margin-top: -1px;

			&:hover,
			&:active {
				color: #2ea2cc;
			}

			&.dashicons-dismiss {
				color: #999;

				&:hover,
				&:active,
				&:focus {
					color: $dismiss-red;
				}
			}

			&.dashicons-admin-links {
				color: #aaa;
				width: 20px;
				font-size: 16px;
				line-height: 20px;
				cursor: default;
			}
		}
	}

	/**
	 * Field information
	 */
	.gv-field-info {

		// In the zones, don't display the field info;
		// that's being handled by tooltips
		display: none;

		// In the field picker, display the field info.
		.ui-tooltip & {
			display: block;
			font-weight: normal;
			color: #999;
			text-shadow: none;

			span {
				&:after {
					content: ", ";
				}

				&.gv-sublabel,
				&:last-child {
					@extend %clearfix;
				}
			}
		}
	}

}

// End .gv-fields

.ui-dialog-content,
.ui-dialog {
	cursor: default;
}

// Fix the Merge Tag dropdowns triggering scroll
// inside the modal
.post-type-gravityview .ui-dialog-content {
	overflow: inherit;
	padding: 0;
}

.ui-draggable-dragging {
	max-width: 400px !important;
}

/**
 * Field Picker ( + Add Field )
 */
#directory-available-fields,
#directory-available-widgets,
#single-available-fields {

	.gv-fields {

		h5 {
			padding: 0 !important;
		}

		span.gv-field-controls {
			display: none !important;
		}

	}
}

.gv-sublabel {
	font-size: .9em;
	display: block;
}

.ui-dialog-titlebar {
	min-height: 1.25em;
	line-height: 1.25;
	padding: 10px;
	height: auto;
}

.gv-dialog-options {

	@extend %clearfix;

	display: none;
	width: 90%;
	padding: 10px 0 !important;

    /** @since 1.8 **/
    .subtitle {
      margin: 0 15px .8em;
      padding: .5em 0 .8em;
      border-bottom: 1px solid #eee;
    }

	&.gv-dialog-warning p {
		font-size: 1.1em;
        margin: 0 !important;
        padding: 1.5em !important;
	}

	&.gv-dialog-warning .dashicons {
		font-size: 70px;
		width: 70px;
		height: 70px;
		line-height: .8;
		float: right;
		text-align: right;
		color: #ddd;
	}

	// Each setting row ( Used to be ul and ul li )
	.gv-setting-container {
		@extend %clearfix;
		margin: 0;
		padding: .4em 15px .8em;
		// border-bottom: 1px solid #f9f9f9;
		display: block;
		font-size: 1.1em;
		clear: left;

		// Hide search mode by default
		&.gv-setting-container-search_mode {
		  display: none;
		}

		&:last-child {
			// border-bottom: none;
			padding-bottom: .5em;
		}

		label {
			margin: 0;
			font-weight: normal;
			display: inline-block;
			padding-right: .75em;
			max-width: 100%; // Fix https://github.com/katzwebservices/GravityView-AZ-Filters/issues/14
		}

		.howto {
			margin: 0 0 .25em;
		}

		/**
		  * This fixes the horrible italic lowercase L issue
		  * @see https://secure.helpscout.net/conversation/100064704/2718/
		  */
		code {
			font-style: normal!important;
		}

		// Vertically stacked radios
		&.gv-setting-container-choice_display .gv-label-radio {
			display: block;
			margin: .5em 0;
		}
	}

	// Currently only used in "checkboxes" field type
	fieldset legend {
		font-size: 1.1em;
		padding-bottom: .2em;
	}

	// Grouped <ul> in "checkboxes" field type
	.gv-setting-list {
		@extend %clearfix;

		li {
			list-style: none;
			display: block;
			padding: .2em .2em .4em;

			// Dependent settings
			&.gv-sub-setting {
				padding-left: 1.7em;
			}
		}
	}

	input[type="text"] {
		display: block;
		display: inline-block; // Inline-block for the merge tags dropdown
		clear: left;
	}

	table, table select {
		width: 95%;
		margin: 0 auto;
	}

}

.gv-widget-search-fields, .postbox .gv-dialog-options {

	table {
		padding-bottom: 15px;
	  	margin: .5em auto; // Give rows some breathing room around other settings

		td, th {
			text-align: left;

			// Standard `.form-table td` is 15px 10px
			padding: 10px 5px;
		}

		.no-search-fields td {
			text-align: center;
			font-size: 15px;
			padding: 15px 0;
		}

		.cell-sort {
			cursor: ns-resize;

			&.no-sort {
				cursor: default;
			}
		}

	  	.gv-search-fields,
		.gv-search-inputs {
			width: 100%;
		}

		.cell-sort,
		.cell-add-remove {

			//width: 40px;

			button {
				@extend .gv-reset-button-style;

				&.gv-remove-search-field {
					margin-left: 6px;
				}

				.dashicons {
					font-size: 20px;
					height: 20px;
					width: 20px;
					opacity: .8;
					cursor: pointer;

					&:hover, &:focus {
						opacity: 1;
					}
				}

				.dashicons-plus-alt {
					color: #328540;
				}

				.dashicons-dismiss {
					margin-top: 2px;
					font-size: 17px;
					height: 17px;
					width: 17px;
					color: $dismiss-red;
				}
			}
		}

		.cell-sort {
			width: 24px;
		}

	  	.cell-add-remove {
		  width: 50px;
		}

	}
}

// Only modify GV post type
.post-type-gravityview,
.widgets-php {

	// Make the dropdown icon fit on the same line as the text field
	input.merge-tag-support {
		width: 90%;
	}

	// Sort by field width issue
	.gravityview_sort_field {
		max-width: 300px;
	}

	#gv-loading {
		text-align: center;
		font-size: 16px;
		line-height: 20px;
		padding: 0 40px; // When there's error text, have it be narrow
		display: block;

		.spinner {
			display: inline-block;
			margin-top: -3px;
			float: none;
		}
	}

}

.gv-label {
	display: inline-block;
	clear: right;
	margin-bottom: .1em;
}

.gv-label-checkbox {
	padding-right: 1em;
	display: block;
	width: 100%;
}

.gv-label-textarea,
.gv-label-text {
	float: left;
	clear: both;
	width: 100%;
	display: block;
	margin-bottom: 0.5em;
}

.gv-shortcode {
	.dashicons-editor-code {
		color: #888;
		left: -1px;
		font-size: 20px;
		line-height: 1;
	}
}