// main: ../options.scss

@import "../../fields/ace_editor/field_ace_editor";
@import "../../fields/background/field_background";
@import "../../fields/group/field_group";
@import "../../fields/layout/field_layout";
@import "../../fields/layout2/field_layout2";
@import "../../fields/margin/field_margin";
@import "../../fields/typography/field_typography";
@import "../../fields/typography_collections/field_typography_collections";

// Button Set
.toggle-buttons,
.buttonset {
	overflow: hidden;

	input {
		position: absolute !important;
		visibility: hidden;
	}

	label {
		font-size: 13px;
		display: inline-block;
		min-width: 55px;
		max-width: 300px;
		padding: 6px 14px;
		-webkit-transition: all .1s ease-in-out;
		transition: all .1s ease-in-out;
		text-align: center;
		border: 1px solid #ccc;
		background-color: #f5f5f5;
		-webkit-box-shadow: inset 0 -1px 0 rgb(204, 204, 204);
		box-shadow: inset 0 -1px 0 rgb(204, 204, 204);

		&:first-of-type {
			border-right: 0;
			border-radius: 3px 0 0 3px;
		}

		&:last-of-type {
			border-left: 0;
			border-radius: 0 3px 3px 0;
		}
	}

	input:checked + label {
		background-color: #0085ba;
		color: #fff;
		border-color: #0073aa #006799 #006799;
		text-shadow: 0 -1px 1px #006799, 1px 0 1px #006799, 0 1px 1px #006799, -1px 0 1px #006799;
		-webkit-box-shadow: inset 0 -1px 0 rgb(0, 103, 153);
		box-shadow: inset 0 -1px 0 rgb(0, 103, 153);
	}
}

.toggle-buttons,
.buttonset {
	&.button-switch {
		input:first-of-type:checked + label {
			background-color: #999;
			border-color: #7d7d7d;
			text-shadow: 0 -1px 1px #757575, 1px 0 1px #757575, 0 1px 1px #757575, -1px 0 1px #757575;
			-webkit-box-shadow: inset 0 -1px 0 rgb(125, 125, 125);
			box-shadow: inset 0 -1px 0 rgb(125, 125, 125);
		}
	}
}

#mts-opts-main {
	.buttonset {
		label {
			margin: 0 !important;
			line-height: 1.3;
			float: left;
		}
	}
}

// textarea
.mts-type-textarea textarea {
	width: 100%;
}

// Radio Image
.mts-radio-img {
	margin: 0 -5px;
	input {
		display: none;
	}

	img {
		border: 1px solid #c1c1c1;
		width: 100%;
	}

	span {
		display: block;
		text-align: center;
		color: #858585;
		margin-top: 3px;
		font-size: 11px;
		line-height: 14px;
	}

	@at-root .form-table td fieldset#{&} label {
		margin: 5px!important;
	}

	.mts-radio-img-selected img {
		border-color: #fff;
		-webkit-box-shadow: 0 0 0 1px #1e8cbe;
		box-shadow: 0 0 0 1px #1e8cbe;
	}
}

// Media Upload
.mts-opts-screenshot {
	display: block;
	max-width: 300px;
	margin-bottom: 10px;
}

// Color Picker
.popup-colorpicker {

	 @at-root input#{&} {
		width: 75px !important;
		float: left;
		height: 28px;
	}

	&:hover {
		-webkit-box-shadow: none !important;
		box-shadow: none !important;
	}
}

// Wp Color Picker
.wp-picker-container .wp-color-result.button {
	height: 26px!important;

	&:after {
		font-size: 13px;
		line-height: 28px;
	}

  .wp-color-result-text { line-height: 24px; }
}
.button.button-small.wp-picker-default {
	font-size: 13px;
	line-height: 26px;
	float: right;
	height: 28px;
	margin: 0;
	padding: 0 10px 1px;
}
.wp-picker-holder {
	position: absolute;
	z-index: 999;
}
.wp-picker-open + .wp-picker-input-wrap {
	width: 145px;

	input { padding: 3px 5px; width: auto;}

	label {
		display: inline-block;
	}
}
.ui-accordion-content .wp-picker-container {
	position: relative;
	height: 36px;
	margin-top: 5px;
	margin-left: 0;
}

tr.site-preloader {
	label {
		width: 80px;
		height: 80px;
		line-height: 80px !important;
		text-align: center;
		float: left;
		background-repeat: no-repeat;
		background-position: center;
		border: 2px solid #fff;

		img {
	  vertical-align: middle;
			border: 0;
			width: 50px;
	}

		&.mts-radio-img-selected {
			border-color: #1e8cbe;
			-webkit-box-shadow: 0 0 0 1px #1e8cbe;
			box-shadow: 0 0 0 1px #1e8cbe;
			img {
				border: 0;
				-webkit-box-shadow: none;
				box-shadow: none;
			}
		}

		&:nth-child(1) {
	  background-color: #1ABC9C;
	  img { width: 40px }
	}
	&:nth-child(2) {
	  background-color: #34495E;
	  img { width: 60px }
	}
	&:nth-child(3) {
	  background-color: #F39C12;
	  img { width: 40px }
	}
	&:nth-child(4) {
	  background-color: #9B59B6;
	  img { width: 70px }
	}
	&:nth-child(5) {
	  background-color: #3498DB;
	}
	&:nth-child(6) {
	  background-color: #E74C3C;
	  img { width: 60px }
	}
	&:nth-child(7) {
	  background-color: #2ECC71;
	}
	&:nth-child(8) {
	  background-color: #2C3E50;
	}
	&:nth-child(9) {
	  background-color: #F1C40F;
	}
	&:nth-child(10) {
	  background-color: #8E44AD;
	}
	&:nth-child(11) {
	  background-color: #2980B9;
	  img { width: 40px }
	}
	&:nth-child(12) {
		background-color: #E74C3C;
	}
  }
}

// Select2 Script Styling
.select2.select2-container {
  max-width: 240px;

  li {
	margin-bottom: 0;
  }

  .select2-selection--multiple {
	min-height: 28px;
	border-radius: 3px;
	border: 1px solid #c5c5c5;
  }

  + .select_all {
	margin-left: 5px!important;
	display: inline-block;
  }

  &.select2-container--focus .select2-selection--multiple {
	  border-color: #0184bb;
  }
}
.select2-results__option[aria-selected=true] {
  display: none;
}

.mts-type-border {
	input,
	.wp-picker-container,
	select {
		display: inline-block;
		vertical-align: middle;
	}

	.wp-picker-container {
		position: relative;
		width: 110px;

		&.wp-picker-active .wp-picker-input-wrap {
			width: 172px;
			position: absolute;
			top: 0;
			right: -175px;
			background: #fff;
			padding-bottom: 5px;
		}
	}

	input {
		width: 90px;
	}

	select {
		width: 130px;
	}
}

// Border Field.
#border-mts_header_icon_border {
	.wp-picker-container, select, input {
		display: inline-block;
	}
	input {
		max-width: 90px;
	}
}
