// ------------------------------------------------------------------------------------------------
// VISUAL COMPOSER
// ------------------------------------------------------------------------------------------------

//**** GENERAL ****//

.vc_ui-panel-content {
	margin-top: 0 !important; // NOTE REMOVE VC WINDOW ALIGN BOTTOM

	.wpb_element_label {
		margin-bottom: 10px;
	}

	.vc_column {
		margin-bottom: 15px;
		padding-top: 0 !important;
	}

	//**** COLOR PICKER ****//

	span.wp-picker-input-wrap {

		label {
			display: inline-block; // NOTE FIX COLOR PICKER PALLETE
		}
	}

	.vc_checkbox-label {
		display: inline-flex;
		align-items: center;
	}

	.vc_checkbox,
	.vc_checkbox-label {
		user-select: none;
	}

	.vc_edit-form-tab {
		@extend %xts-checkbox;
	}
}

//**** WOODMART SHORTCODE STYLES ****//

.wpb_edit_form_elements {

	input,
	select,
	textarea {
		@extend %woodmart-input-style;

		&:focus {
			box-shadow: none;
		}
	}

	.vc_column {
		-webkit-animation: wd-fadeInTooltip .5s ease;
		animation: wd-fadeInTooltip .5s ease;
	}

	.vc_autocomplete-field {

		.vc_autocomplete {
			padding-right: 6px;
			padding-left: 6px;
			border-radius: $woodmart-vc-options-border;

			&:hover {
				border-color: #BDBDBD;
			}
		}
	}

	.ui-autocomplete-input {
		box-shadow: none;
	}
}

.wpb_el_type_woodmart_empty_space {
	padding: 0 !important;
}

.wpb_el_type_woodmart_css_id {
	 display: none;

	& + .vc_col-xs-12 {
		padding-top: 0 !important;
	}
}

[data-vc-shortcode="woodmart_responsive_text_block"] {

	[data-tab-index="2"] {
		display: none;
	}
}

//**** OPTIONS ORDER ****//

.vc_ui-panel-content {

	.vc_column-order-first {
		order: -1;
	}
}

//**** WOODMART AUTOCOMPLETE DROPDOWN ****//

ul.ui-autocomplete {
	background-color: #FFF;
	color: #444;
	font-size: 13px;

	&.ui-widget {
		border: 1px solid #5B9DD9;
	}
}

// ------------------------------------------
// WOODMART IMAGE SELECT
// ------------------------------------------

.woodmart-vc-image-select {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	flex-wrap: wrap;
	margin-top: 0;
	margin-right: -5px;
	margin-bottom: 0;
	margin-left: -5px;

	-ms-flex-wrap: wrap;

	li {
		position: relative;
		flex-basis: calc(25% - 24px);
		margin-right: 5px;
		margin-bottom: 10px;
		margin-left: 5px;
		padding: 5px;
		min-width: 90px;
		max-width: 140px;
		border: 2px solid;
		border-color: #D9D9D9;
		border-radius: $woodmart-vc-options-border;
		cursor: pointer;
		transition: all .2s ease-in-out;

		.vc_col-sm-6 & {
			flex-basis: calc(33.3333333% - 24px);
			min-width: 40px;
			max-width: 80px;
		}

		&.selected {
			border-color: $woodmart-button-color;

			&:before {
				@extend %woodmart-image-checkmark;
			}
		}

		&.with-title {

			img {
				margin-bottom: 5px;
			}
		}

		&:not(.selected) {

			&:hover {
				border-color: #B9B9B9;
			}
		}
	}

	img {
		width: 100%;
	}

	h4 {
		margin: 0;
		color: #333;
		font-size: 12px;
		line-height: 1.4;
	}

	div[data-vc-shortcode="woodmart_portfolio"] & {

		 [data-value="inherit"] {
			display: flex;
			flex-direction: column;

			&:after {
				content: "";
				display: block;
				order: -1;
				padding-top: 100%;
			}

			h4 {
				z-index: 1;
			}

			img {
				position: absolute;
				top: 0;
				right: 0;
				bottom: 0px;
				left: 0;
				display: inline-block;
				width: 100%;
				height: 90%;
				vertical-align: middle;

				object-position: 50% 35%;
				object-fit: cover;
			}
		}
	}
}

// ------------------------------------------
// OPTION TOOLTIPS
// ------------------------------------------

.woodmart-css-tooltip {

	img {
		vertical-align: middle;
	}
}

.woodmart-tltp {
	position: relative;

	&:hover {

		.woodmart-tooltip-label {
			visibility: visible;
			opacity: 1;
			-webkit-animation: wd-fadeInTooltip .3s ease;
			animation: wd-fadeInTooltip .3s ease;
		}
	}
}

.woodmart-tooltip-label {
	position: absolute;
	bottom: 100%;
	left: 50%;
	z-index: 2;
	visibility: hidden;
	margin-bottom: 8px;
	padding: 0 15px;
	height: 34px;
	background-color: #000;
	color: #FFF;
	text-align: center;
	text-transform: capitalize;
	white-space: nowrap;
	letter-spacing: .3px;
	font-size: 12px;
	line-height: 34px;
	opacity: 0;
	pointer-events: none;

	 &:before {
		content: "";
		position: absolute;
		top: 100%;
		left: 50%;
		margin-left: -5px;
		border-width: 5px 5px 0;
		border-style: solid;
		border-color: transparent;
		border-color: transparent;
		border-top-color: #000;
	}
}

// ------------------------------------------
// FONT-WEIGHT
// ------------------------------------------

.wpb-select,
select[name$="[font-weight]"] {

	&[class$="100"],
	option[value="100"] {
		font-weight: 100;
	}

	&[class$="200"],
	option[value="200"] {
		font-weight: 200;
	}

	&[class$="300"],
	option[value="300"] {
		font-weight: 300;
	}

	&[class$="400"],
	option[value="400"] {
		font-weight: 400;
	}

	&[class$="500"],
	option[value="500"] {
		font-weight: 500;
	}

	&[class$="600"],
	option[value="600"] {
		font-weight: 600;
	}

	&[class$="700"],
	option[value="700"] {
		font-weight: 700;
	}

	&[class$="800"],
	option[value="800"] {
		font-weight: 800;
	}

	&[class$="900"],
	option[value="900"] {
		font-weight: 900;
	}
}

// ------------------------------------------
// GROUP OPTIONS
// ------------------------------------------

.woodmart-td-wrapper {
	margin-bottom: 30px;
	width: 100%;

	&:last-child {
		margin-bottom: 20px;
	}
}

.woodmart-td-title {
	color: $woodmart-vc-element-title;
	text-transform: uppercase;
	font-weight: 600;
	font-size: 16px;
}

.woodmart-td-content {
	display: flex;
	clear: both;
	flex-wrap: wrap;
	margin-top: 0;
	margin-right: 15px;
	margin-left: 15px;
	padding: 5px;
	padding-top: 20px;
	padding-bottom: 5px;
	border: 1px solid #E8E8E8;
	border-radius: 5px;
	background: #F9F9F9;

	.vc_column {

		select {
			padding: 6px 6px;
			height: 36px;
		}

		&.wpb_el_type_woodmart_image_select {
			margin-bottom: 5px;
		}
	}

	.wpb_el_type_vc_link {

		.button {
			height: 36px;
			border-radius: $woodmart-vc-options-border;
			box-shadow: none;
			line-height: 34px;
		}

		.vc_link_label {
			line-height: 36px;
		}
	}

	.wpb_el_type_attach_image {

		.added,
		.gallery_widget_add_images {
			border-radius: $woodmart-vc-options-border;
		}
	}

	.wp-media-buttons {

		button {
			border-radius: $woodmart-vc-options-border;
			box-shadow: none;
		}
	}

	.woodmart-vc-slider {
		position: relative;
	}
}

.wd-slider-field-value-display {
	position: absolute;
	right: 0;
	bottom: 22px;
	font-weight: 600;
	font-size: 16px;

	// .woodmart-td-content & {
	// 	right: 0;
	// }
}

// ------------------------------------------------------------------------------------------------
// OPTIONS
// ------------------------------------------------------------------------------------------------

// ------------------------------------------
// GRADIENT EDITOR
// ------------------------------------------

.woodmart-grad-line {

	.gradx {
		border: 1px solid #E8E8E8;
		border-radius: 5px;
		background: rgba(0, 0, 0, .02);
		// padding: 15px 15px 13px 15px;
	}

		.gradx_btn {
			padding: 8px 15px;
			border-color: #E6E6E6;
			border-radius: $woodmart-vc-options-border;
			background-image: none;

			@extend %woodmart-admin-btn;
		}

		.gradx_slider {

			&:after {
				border-width: 60px 1px 0 0;
			}
		}

		.cp-default {
			border-radius: 0 !important;
		}

	.gradx_start_sliders {
		margin-right: -6px;
		margin-left: -6px;
	}

		.sp-container {
			border: none;
		}

		.sp-picker-container {
		 border-left: none;
		}

		.sp-picker-container {
			padding-top: 5px;
		}

		#gradx_slider_controls {
			margin-left: 10px;
			padding-top: 5px;
		}

	.gradx_slectboxes {
		display: flexbox;
		display: flex;
		display: -webkit-flex;
		display: -ms-flex;
		-ms-flex-align: stretch;
		align-items: stretch;
		-webkit-flex-direction: row;
		-ms-flex-direction: row;
		flex-direction: row;
		justify-content: flex-start;
		margin-right: -5px;
		margin-left: -5px;

		-webkit-align-items: stretch;
		-webkit-justify-content: flex-start;
		-ms-justify-content: flex-start;

		select {
			flex-basis: 100%;
			margin-right: 5px;
			margin-left: 5px;
			padding: 0 8px;
			max-width: 100%;
			width: 100%;
			height: 28px;
			line-height: 28px;

			-webkit-flex-basis: 100%;
			-ms-flex-basis: 100%;
		}
	}
}

.woodmart-grad-preview {
	display: none;
}

// ------------------------------------------
// DATE PICKER
// ------------------------------------------

div.ui-datepicker {
	margin-top: 12px;

	.ui-datepicker-header {
	border: none;
	border-radius: 0;
	background-color: #F3F3F3;
	background-image: none;

	.ui-corner-all {
		border-radius: 0;
		cursor: pointer;
	}

	.ui-state-hover {
		border: none;
		background-image: none;
	}

	.ui-icon {
		background-image: none;
	}

	.ui-datepicker-next,
	.ui-datepicker-prev {

		.ui-icon {
			display: none !important;
		}

		&:before {
			position: absolute;
			top: 5px;
			left: 5px;
			display: block;
			width: 20px;
			height: 20px;
			font-weight: 400;
			font-size: 16px;
			font-family: dashicons;
		}
	}

	.ui-datepicker-next {

			&:before {
				content: "\f345";
			}
		}

		.ui-datepicker-prev {

			&:before {
				content: "\f341";
			}
		}
	}

	.ui-state-default {
		border: none;
		background-color: #F3F3F3;
		background-image: none;

		&.ui-state-hover,
		&.ui-state-active {
			background-color: #E0E0E0;
			color: #000;
		}
	}

	.ui-state-highlight {
		background-color: $woodmart-button-color;
		color: #FFF;
	}
}

// ------------------------------------------
// COLOR PICKER
// ------------------------------------------

.vc_ui-panel-content {

	.wp-picker-container {
		@extend %woodmart-colorpicker-style;

		.wp-color-picker[type=text] {
			padding: 8px 6px;
			height: 35px;
		}
	}
}

.woodmart-vc-colorpicker {

	.wp-picker-container {
		position: relative;

		.wp-color-result {

			&.wp-picker-open {

				 &:after {
					display: none;
				}
			}
		}

		.iris-picker {
			margin-bottom: 74px;
			border-bottom-right-radius: 0;
			border-bottom-left-radius: 0;
		}
	}

	.wp-picker-holder {
		position: absolute;
		top: 100%;
		left: 0;
	}
}

 .woodmart-opacity-container {
	position: absolute;
	bottom: -73px;
	left: -1px;
	z-index: 1000;
	padding: 6px;
	width: 243px;
	border: 1px solid #DFDFDF;
	border-radius: 0;
	border-bottom-right-radius: $woodmart-vc-options-border;
	border-bottom-left-radius: $woodmart-vc-options-border;
	background-color: #FFF;

	.woodmart-opacity-field {
		padding-right: 0;
		padding-left: 0;
	}
}

// ------------------------------------------
// WOODMART ANIMATIONS SELECTOR
// ------------------------------------------

.vc_param-animation-style-preview {

	.vc_btn {
		height: 36px;
	}
}

.wd-slide-from-bottom,
.wd-slide-from-top,
.wd-slide-from-left,
.wd-slide-from-right,
.wd-left-flip-y,
.wd-right-flip-y,
.wd-top-flip-x,
.wd-bottom-flip-x,
.wd-zoom-in,
.wd-rotate-z {
	-webkit-transition: opacity .7s cubic-bezier(0, .87, .58, 1);
	transition: opacity .7s cubic-bezier(0, .87, .58, 1);

	&.animated {
		-webkit-animation-duration: .7s;
		animation-duration: .7s;
		-webkit-animation-timing-function: cubic-bezier(0, .87, .58, 1);
		animation-timing-function: cubic-bezier(0, .87, .58, 1); 
	}
}

.wd-slide-from-top {
	-webkit-animation-name: wd-SlideFromTop;
	animation-name: wd-SlideFromTop;
}

.wd-slide-from-bottom {
	-webkit-animation-name: wd-SlideFromBottom;
	animation-name: wd-SlideFromBottom;
}

.wd-slide-from-left {
	-webkit-animation-name: wd-SlideFromLeft;
	animation-name: wd-SlideFromLeft;
}

.wd-slide-from-right {
	-webkit-animation-name: wd-SlideFromRight;
	animation-name: wd-SlideFromRight;
}

.wd-right-flip-y {
	-webkit-animation-name: wd-RightFlipY;
	animation-name: wd-RightFlipY;
}

.wd-left-flip-y {
	-webkit-animation-name: wd-LeftFlipY;
	animation-name: wd-LeftFlipY;
}

.wd-top-flip-x {
	-webkit-animation-name: wd-TopFlipX;
	animation-name: wd-TopFlipX;
}

.wd-bottom-flip-x {
	-webkit-animation-name: wd-BottomFlipX;
	animation-name: wd-BottomFlipX;
}

.wd-zoom-in {
	-webkit-animation-name: wd-ZoomIn;
	animation-name: wd-ZoomIn;
}

.wd-rotate-z {
	-webkit-animation-name: wd-RotateZ;
	animation-name: wd-RotateZ;

	will-change: animation;
}

// ------------------------------------------
// WOODMART BUTTON SET
// ------------------------------------------

.woodmart-vc-button-set-list {
	display: flex;
	flex-wrap: wrap;
	margin-top: 0;
	margin-bottom: 0;

	li {
		display: inline-block;
		margin-bottom: 0;
		padding: 0 10px;
		background-color: #E3E3E3;
		color: #444;
		font-weight: 600;
		cursor: pointer;
		transition: all .2s ease-in-out;

		span {
			display: block;
			line-height: 36px;
		}

		&:hover {
			background-color: #7A7A7A;
			color: #FFF;
		}

		&.xts-active {
			background-color: $woodmart-button-alt-color;
			color: #FFF;
		}

		&:first-child {
			border-top-left-radius: $woodmart-vc-options-border;
			border-bottom-left-radius: $woodmart-vc-options-border;
		}

		&:last-child {
			border-top-right-radius: $woodmart-vc-options-border;
			border-bottom-right-radius: $woodmart-vc-options-border;
		}
	}
}

// ------------------------------------------
// WOODMART BUTTON SWITCH
// ------------------------------------------

.woodmart-vc-switch {
	font-size: 0;

	.switch-controls {
		display: inline-block;
		min-width: 50px;
		height: 36px;
		background-color: #EFEFF0;
		color: #444;
		text-align: center;
		text-transform: uppercase;
		font-weight: 600;
		font-size: 12px;
		cursor: pointer;
		transition: all .2s ease-in-out;

		span {
			display: block;
			line-height: 36px;
		}

		&:hover {
			background-color: #DDDDDF;
		}

		&:first-child {
			border-top-left-radius: $woodmart-vc-options-border;
			border-bottom-left-radius: $woodmart-vc-options-border;
		}

		&:last-child {
			border-top-right-radius: $woodmart-vc-options-border;
			border-bottom-right-radius: $woodmart-vc-options-border;
		}
	}

	.switch-inactive {

		&.xts-active {
			background-color: #B1B1B0;
			color: #FFFF;
		}
	}

	.switch-active {

		&.xts-active {
			background: $woodmart-button-alt-color;
			color: #FFFF;
		}
	}
}

// ------------------------------------------
// RANGE SLIDER
// ------------------------------------------

// .wd-slider-field-value-display {
// 	padding-top: .5em;
// 	color: #5E5E5E;
// 	font-weight: 400;
// 	font-size: 12px;
// }

.wpb_el_type_woodmart_slider {
	margin-bottom: 5px;
}

.wd-slider-field {
	margin-top: 20px;

	.ui-widget-header {
		background: $woodmart-button-color;
	}

	&.ui-widget {

		&.ui-widget-content {
			border: none;
			background-color: #F1F1F1;
		}
	}

	&.ui-slider {

		 .ui-slider-handle {
			 top: -5px;
			 width: 12px;
			 height: 12px;
			 border: solid 2px $woodmart-button-color;
			 border-radius: 50%;
			 background: #FFF;
			 cursor: pointer;

			&:hover {
				box-shadow: 0 0 0 2px #89BCE8;
			}

			&:focus {
				box-shadow: 0 0 0 3px #89BCE8;
			}
		}
	}

	&.ui-slider-horizontal {
		height: 4px;
		cursor: pointer;
	}
}

//**** CUSTOM CONTENT WIDTH OPTIONS SET ****//

.wd-custom-width {

	.vc-button-set-item {
		padding: 0;
		background-color: transparent !important;

		@extend %xts-devices-tabs;

		span {
			line-height: 1;
		}
	}

	~ .wpb_el_type_woodmart_slider {

		.wpb_element_label {
			display: none;
		}
	}
}

.woodmart-td-content {

	.wd-custom-width {
		margin-bottom: 0 !important;
	}
}

.vc_edit-form-tab {

	> .wd-custom-width {

		~ .wpb_el_type_woodmart_slider {
			margin-top: -15px;
			padding-top: 0 !important;
		}
	}
}

// ------------------------------------------
// BOX SHADOW
// ------------------------------------------

.wd-box-shadow {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	padding: 5px 15px 10px 15px;
	border: 1px solid #E8E8E8;
	border-radius: 5px;
	background-color: rgba(0,0,0,.02);

	.wd-box-shadow-item {
		display: flex;
		flex-direction: column;

		.wp-picker-container {

			&:not(.wp-picker-active) {

				.wp-color-result {
					margin-right: 0px;
				}
			}
		}

		.add-on {
			height: 28px;
			line-height: 26px;
		}

		label {
			font-size: 12px;
			line-height: 30px;
		}

		&:not(.wd-color) {
			margin-right: 5px;

			input {
				padding: 3px 6px;
				min-height: 30px;
				max-width: 55px;
				max-width: 45px;
				height: 30px;
				line-height: 1;
				// border-color: #dadada;
			}
		}
	}
}

// ------------------------------------------------------------------------------------------------
// TABS
// ------------------------------------------------------------------------------------------------

// ------------------------------------------
// DESIGN OPTIONS
// ------------------------------------------

.vc_edit-form-tab {

	.vc_layout-onion {
		position: absolute;
		top: 30px;
		left: 0;
		margin-top: 0;

		input {
			padding: 2px !important;
			width: 34px !important;
			height: 24px !important;
		}

		&.wd-responsive-spacing {
			top: 53px;
			left: 3px;
		}

		&:not(.xts-active) {

			+ .vc_settings {

				// > label:nth-last-child(2),
				> .vc_checkbox {
					visibility: hidden;
					opacity: 0;
				}
			}
		}
	}
}

.vc_wrapper-param-type-css_editor {

	.vc_css-editor {
		display: flex;
		align-items: flex-start;
		flex-wrap: nowrap !important;
	}

	div.vc_settings {
		position: static;
		display: flex;
		flex-grow: 1;
		flex-basis: 0%;
		flex-wrap: wrap;
		margin-top: 5px;
		margin-right: 15px;
		margin-left: 15px;
		padding-right: 0;
		padding-left: 0;
		width: auto;

		flex-shrink: 0;

		> * {
			order: 1;
			margin-top: 0;
			margin-bottom: 12px;
		}

		> label {
			margin-top: 0;
			margin-bottom: 10px;
			padding-right: 5px;
			width: 100%;
			white-space: nowrap;
			font-weight: 600;
			font-size: 13px;
		}

		> label,
		> div {
			margin-left: 345px;
		}

		> .vc_border-radius + label,
		> .vc_border-radius + label + .color-group,
		> .vc_background-image,
		> .vc_background-style {
			order: 3;
			margin-bottom: 0;
			margin-left: 0;
		}

		> .vc_border-radius + label {
			margin-top: 120px;
			margin-bottom: 10px;
		}

		select {
			padding-top: 0;
			padding-bottom: 0;
			min-width: 130px;
		}

		.color-group {
			margin-top: 0;
			margin-right: 5px;

			.wp-color-result {
				margin-bottom: 0;
			}

			.wp-picker-open + .wp-picker-input-wrap {
				display: flex;
			}

			.wp-picker-input-wrap {
				position: absolute;
				top: 40px;
				left: 0;
				z-index: 10;
				align-items: flex-start;
				height: 60px;
				background-color: #FFF;
			}

			.iris-picker {
				margin-top: 6px;
			}

			.vc_color-control {
				margin-left: 0 !important;
				width: 112px !important;
			}

			.wp-picker-holder {
				top: 74px;
				left: 0 !important;
			}

			&:nth-child(2) {

				.wp-picker-holder {
					right: -47px;
					left: auto !important;
				}
			}
		}

		.vc_background-image {

			.vc_image {
				margin: 0;

				.added {

					> div {
						max-width: inherit;
						max-height: inherit;
						width: auto !important;
						height: auto !important;

						img {
							position: absolute;
							top: 0;
							right: 0;
							bottom: 0;
							left: 0;
							display: block;
							max-height: 100%;
							width: 100%;
							height: 100%;

							object-fit: cover;
						}
					}
				}

				&:not(:empty) {

					+ .vc_add-image{
						display: none;
					}
				}
			}

			.vc_image .added,
			.vc_add-image {
				margin-right: 6px;
				margin-bottom: 0;
				min-width: 90px;
				max-width: 90px;
				max-height: 33px;
				border: 1px solid #E7E7E7;
				border-radius: $xts-option-border-radius;
			}

			.vc_add-image {
				display: flex;
				align-items: center;
				justify-content: center;
				color: #333 !important;
				text-decoration: none;
				font-size: 12px;

				i {
					position: static !important;
					margin-inline-end: 6px;
					transform: none !important;
				}
			}
		}

		> label {

			&:nth-last-child(2) {
				display: none;
			}

			&.vc_checkbox {
				position: absolute;
				top: 321px;
				left: 27px;
				margin: 0 !important;
				max-width: 110px;
				font-size: 11px;
				transition: all .12s ease;
			}

		}
	}
}

// -------------------------------
// RESPONSIVE CONTROLS
// -------------------------------

.wpb_el_type_woodmart_responsive_spacing {
	margin-bottom: 0 !important;

	&.vc_col-xs-12 {
		position: static;
	}
}

//**** SHOW/HIDE CONTROLS ****//

.vc_layout-onion {
	margin-top: 15px;

	&:not(.xts-active) {
		visibility: hidden;
		opacity: 0;
	}

	&.xts-active {
		transition: all .6s ease;
	}

}

//**** CONTROLS POSITION ****//

.wd-responsive-spacing {

	&[data-device] {

		.vc_content {

			i {
				background: none !important;
				line-height: 32px;

				&:before {
					content: "\f470";
					color: #C9C9C9;
					font-style: normal;
					font-size: 26px;
					font-family: "dashicons";
				}
			}
		}
	}

	&[data-device="tablet"] {

		.vc_content {

			i {

				&:before {
					content: "\f471";
				}
			}
		}
	}

	&[data-device="mobile"] {

		.vc_content {

			i {

				&:before {
					content: "\f470";
				}
			}
		}
	}
}

.wd-spacing-devices {
	position: absolute;
	top: 21px;
	left: 80px;
	background-color: #FFF; // NOTE REMOVE CONFLICT WITH ABSOLUTE SIMPLIFY CONTROLS

	> span {
		@extend %xts-devices-tabs;

		.vc-composer-icon {
			margin-right: 5px;
			font-weight: 400;
		}
	}

	span {

		span {
			font-size: 13px;
		}
	}
}

// ------------------------------------------
// RESPONSIVE FONT SIZE CONTROL
// ------------------------------------------

.wpb_el_type_woodmart_responsive_size {
	-ms-flex: 1 1 auto;
	flex: 1 1 auto;
	width: auto !important; //overwright theme styles

	-webkit-box-flex: 1;
}

.woodmart-rs-wrapper {

	> div {
		display: inline-block;
		margin-right: 10px;
		vertical-align: middle;
	}

	.woodmart-rs-item {

		.woodmart-rs-input {
			padding: 8px 6px;
			width: 60px;
			height: 36px;
			border-top-left-radius: 0;
			border-bottom-left-radius: 0;
			vertical-align: middle;
		}
	}

	.woodmart-rs-item {
		display: inline-flex;

		&.hide {
			display: none;
		}
	}

	.woodmart-rs-unit {
		margin-right: 0;
	}
}

.woodmart-rs-icon {
	display: inline-block;
	padding: 8px;
	border-top-left-radius: $woodmart-vc-options-border;
	border-bottom-left-radius: $woodmart-vc-options-border;
	background-color: #F0F0F0;
}

.woodmart-rs-trigger {
	cursor: pointer;
}

// ------------------------------------------------------------------------------------------------
// ELEMENTS
// ------------------------------------------------------------------------------------------------

// ------------------------------------------
// SECTION
// ------------------------------------------

// [data-vc-shortcode="vc_section"] {

// 	[data-vc-shortcode-param-name="el_id"] {

// 		&,
// 		~ * {
// 			order: 2;
// 		}
// 	}

// 	[data-vc-shortcode-param-name="woodmart_parallax"] {
// 		order: 1;
// 	}
// }

// ------------------------------------------
// ROW
// ------------------------------------------

// [data-vc-shortcode="vc_row"] {

// 	[data-vc-shortcode-param-name="el_id"] {

// 		&,
// 		~ * {
// 			order: 2;
// 		}
// 	}

// 	[data-vc-shortcode-param-name="woodmart_parallax"] {
// 		order: 1;
// 	}

// }

// [data-vc-shortcode="vc_row_inner"] {

// 	[data-vc-shortcode-param-name="disable_element"] {

// 		&,
// 		~ * {
// 			order: 2;
// 		}
// 	}

// 	[data-vc-shortcode-param-name="woodmart_parallax"] {
// 		order: 1;
// 	}
// }

// ------------------------------------------
// COLUMN
// ------------------------------------------

[data-vc-shortcode="vc_column"],
[data-vc-shortcode="vc_column_inner"] {

	[data-vc-shortcode-param-name="el_id"] {

		&,
		~ * {
			order: 2;
		}
	}

	[data-vc-shortcode-param-name="woodmart_color_scheme"] {
		order: -2;
	}

	[data-vc-shortcode-param-name="woodmart_text_align"] {
		order: -1;
	}

	// [data-vc-shortcode-param-name="woodmart_parallax"],
	[data-vc-shortcode-param-name="parallax_scroll"],
	[data-vc-shortcode-param-name*="scroll_"],
	[data-vc-shortcode-param-name="woodmart_sticky_column"],
	[data-vc-shortcode-param-name*="wd_collapsible_"] {
		order: 1;
	}
}

// ------------------------------------------------------------------------------------------------
// RTL
// ------------------------------------------------------------------------------------------------

.rtl {

	// ------------------------------------------------------------------------------------
	// VISUAL COMPOSER
	// ------------------------------------------------------------------------------------

	.vc_shortcode-param[data-param_type=dropdown] select.wpb_vc_param_value,
	.vc_shortcode-param[data-param_type=dropdown] select.wpb_vc_param_value option {
		text-align: right;
	}

	.vc_general.vc_ui-tabs-line> li,
	.vc_css-editor .vc_settings .vc_background-image .vc_image .added,
	.gallery_widget_attached_images_list li,
	.gallery_widget_img_select li,
	.vc_media-sm [class*="vc_col-sm-"],
	.vc_css-editor .vc_settings .vc_background-image .vc_add-image,
	.wpb_el_type_attach_image .gallery_widget_add_images,
	.wpb_el_type_attach_images .gallery_widget_add_images {
		float: right;
	}

	//**** OPTION SECTION STYLE ****//

	.wd-slider-field-value-display {
		right: auto;
		left: 15px;
	}

	.woodmart-td-content {

		.wd-slider-field-value-display {
			right: auto;
			left: 0;
		}
	}

	//**** WOODMART BUTTON SET ****//

	.woodmart-vc-button-set-list {

		li {

			&:first-child {
				border-top-left-radius: 0;
				border-top-right-radius: $woodmart-vc-options-border;
				border-bottom-right-radius: $woodmart-vc-options-border;
				border-bottom-left-radius: 0;
			}

			&:last-child {
				border-top-left-radius: $woodmart-vc-options-border;
				border-top-right-radius: 0;
				border-bottom-right-radius: 0;
				border-bottom-left-radius: $woodmart-vc-options-border;
			}
		}
	}

	//**** WOODMART BUTTON SWITCH ****//

	.woodmart-vc-switch {

		.switch-controls {

			&:first-child {
				// margin-right: 0;
				// margin-left: 2px;
				border-top-left-radius: 0;
				border-top-right-radius: $woodmart-vc-options-border;
				border-bottom-right-radius: $woodmart-vc-options-border;
				border-bottom-left-radius: 0;
			}

			&:last-child {
				border-top-left-radius: $woodmart-vc-options-border;
				border-top-right-radius: 0;
				border-bottom-right-radius: 0;
				border-bottom-left-radius: $woodmart-vc-options-border;
			}
		}
	}

	//**** CUSTOM CONTENT WIDTH OPTIONS SET ****//

	.wd-custom-width {

		.vc-button-set-item {

			&:not(:first-child) {
				margin-right: 10px;
				margin-left: 0;
			}

			&:before {
				margin-right: 0;
				margin-left: 5px;
			}
		}
	}

	//**** RESPONSIVE FONT SIZE ****//

	.woodmart-rs-wrapper {

		> div {
			margin-right: 0;
			margin-left: 10px;
		}

		.woodmart-rs-item {

			.woodmart-rs-input {
				border-top-right-radius: 0;
				border-bottom-right-radius: 0;
			}

			.woodmart-rs-unit {
				margin-right: 0;
			}
		}
	}

	.woodmart-rs-icon {
		border-top-right-radius: $woodmart-vc-options-border;
		border-bottom-right-radius: $woodmart-vc-options-border;
	}

	//**** SHORTCODE OPTIONS HINT ****//

	// .woodmart-hint {
	// 	margin-right: 10px;
	// 	margin-left: 0;
	// }

	// .woodmart-hint-content {

	// 	.woodmart-hint-left & {
	// 		right: 100%;
	// 		left: auto;
	// 		margin-right: 6px;
	// 		margin-left: 0;

	// 		&:before {
	// 			right: -3px;
	// 			left: auto;;
	// 		}

	// 		&:after {
	// 			right: -25px;
	// 			left: auto;
	// 		}
	// 	}

	// 	.woodmart-hint-right & {
	// 		right: auto;
	// 		left: 100;
	// 		margin-right: 0;
	// 		margin-left: 6px;;

	// 		&:before {
	// 			right: auto;
	// 			left: -3px;
	// 		}

	// 		&:after {
	// 			right: auto;
	// 			left: -25px;
	// 		}
	// 	}
	// }

	.woodmart-tooltip-label {
		right: 50%;
		left: auto;

		&:before {
			right: 50%;
			left: auto;
			margin-right: -5px;
			margin-left: 0;
		}
	}

	// ------------------------------------------------------------------------------------------------
	// OPTIONS
	// ------------------------------------------------------------------------------------------------

	// ------------------------------------------
	// BOX SHADOW
	// ------------------------------------------

	.wd-box-shadow {

		.wd-box-shadow-item {

			.wp-picker-container {

				&:not(.wp-picker-active) {

					.wp-color-result {
						margin-left: 0;
					}
				}
			}

			&:not(.wd-color) {
				margin-left: 5px;
			}
		}
	}

	// ------------------------------------------------------------------------------------------------
	// TABS
	// ------------------------------------------------------------------------------------------------

	// ------------------------------------------
	// DESIGN OPTIONS
	// ------------------------------------------

	.vc_edit-form-tab {

		.vc_layout-onion {
			// position: absolute;
			// top: 30px;
			// left: 0;
			// margin-top: 0;

			&.wd-responsive-spacing {
				right: 3px;
				left: auto;;
			}
		}
	}

	.vc_wrapper-param-type-css_editor {

		div.vc_settings {

			> label {
				padding-right: 0;
				padding-left: 5px;
			}

			.vc_background-image {

				.vc_image .added,
				.vc_add-image {
					margin-right: 0;
					margin-left: 6px;
				}
			}

			> label,
			> div {
				margin-right: 345px;
				margin-left: 0;
			}

			> .vc_border-radius + label,
			> .vc_border-radius + label + .color-group,
			> .vc_background-image,
			> .vc_background-style {
				margin-right: 0;
			}

			> .vc_border-radius + label + .color-group {
				margin-right: 0;
				margin-left: 5px;
			}

			.color-group {

				.wp-picker-input-wrap {
					right: 0;
					left: auto;
				}

				.wp-picker-holder {
					right: 0 !important;
					left: auto !important;
				}

				&:nth-child(2) {

					.wp-picker-holder {
						right: auto !important;
						left: -47px !important;
					}
				}
			}

			> label {

				&.vc_checkbox {
					right: 27px;
					left: auto;
				}
			}
		}
	}

	// -------------------------
	// RESPONSIVE CONTROLS
	// -------------------------

	.vc_layout-onion {
		right: 0;
		left: auto;
	}

	//**** CONTROLS POSITION ****//

	.wd-responsive-spacing {
		right: 3px;
		left: auto;
	}

	.wd-spacing-devices {
		right: 80px;
		left: auto;

		> span {

			&,
			.vc-composer-icon,
			&:before {
				margin-right: 0;
				margin-left: 5px;
			}
		}
	}
}