// ------------------------------------------
// EXTEND OLD
// ------------------------------------------ 

%woodmart-admin-header {
	border-bottom: 3px solid lighten($woodmart-primary-color,20%);
	background-color: $woodmart-primary-color;

	h1, h2, h3, h4, h5, h6 {
		color: #FFF;
	}
}

%woodmart-admin-footer {
	background-color: $woodmart-gray-color;
	font-size: 14px;
}

%woodmart-admin-btn {
	padding: 10px 15px;
	height: auto;
	border-radius: 0;
	border-radius: $woodmart-vc-options-border;
	box-shadow: none;
	text-transform: uppercase;
	text-shadow: none;
	font-weight: 600;
	font-size: 12px;
	line-height: 1;
	-webkit-transition: all .2s ease;
	transition: all .2s ease;

	&:hover,
	&:focus,
	&:active {
		box-shadow: none;
	}

	&:active {
		transform: none;
	}
}

%woodmart-admin-btn-primary {
	border-color: $woodmart-button-color;
	background-color: $woodmart-button-color;
	color: #FFF;

	&:hover,
	&:focus,
	&:active {
		border-color: $woodmart-button-color-hover;
		background-color: $woodmart-button-color-hover;
		color: #FFF;
	}

	&[disabled] {
		border-color: $woodmart-button-color-hover !important;
		background-color: $woodmart-button-color-hover !important;
		color: #FFF !important;
		opacity: .5;
	}
}

%woodmart-admin-btn-alternative {
	border-color: $woodmart-button-alt-color;
	background-color: $woodmart-button-alt-color;
	color: #FFF;

	&:hover,
	&:focus,
	&:active {
		border-color: $woodmart-button-alt-color-hover;
		background-color: $woodmart-button-alt-color-hover;
		color: #FFF;
	}

	&[disabled] {
		border-color: $woodmart-button-alt-color-hover !important;
		background-color: $woodmart-button-alt-color-hover !important;
		color: #FFF !important;
		opacity: .5;
	}
}

%woodmart-input-style {
	border-radius: $woodmart-vc-options-border;
	box-shadow: none;

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

	&:focus {
		border-color: #999;
	}
}

%woodmart-colorpicker-style {

	.wp-color-result {
		// margin-right: 0 !important;
		// margin-bottom: 0 !important;
		padding-inline-start: 34px;
		height: var(--xts-input-height) !important;
		border-color: #DDD;

		@extend %woodmart-input-style;

		// &.button {
		// 	margin-inline-end: 6px;
		// 	margin-bottom: 6px;
		// }
	}

	.wp-color-result-text {
		border-left-color: #DDD;
		border-radius: 0;
		border-top-right-radius: 3px;
		border-bottom-right-radius: 3px;
		line-height: calc(var(--xts-input-height) - 2px);
	}

	.wp-picker-input-wrap {

		.button {
			height: var(--xts-input-height);
			box-shadow: none;
			line-height: 1;
		}
	}

	.iris-picker {
		z-index: 20;
		// margin-top: 12px;
		border-radius: $woodmart-vc-options-border;
		border: none;
		box-shadow: 0 0 3px rgba(0, 0, 0, 15%);
	}
}

%woodmart-image-checkmark {
	content: "\f147";
	position: absolute;
	top: -5px;
	right: -6px;
	z-index: 15;
	display: block;
	padding-top: 1px;
	padding-right: 4px;
	padding-left: 2px;
	border-radius: 50%;
	background-color: $woodmart-button-color;
	color: #FFF;
	text-align: center;
	font-family: dashicons;

	.rtl & {
		right: auto;
		left: -6px;
	}
}

// ------------------------------------------------------------------------------------------------
// EXTENDS
// ------------------------------------------------------------------------------------------------

// @extend %xts-button;

%xts-button {
	display: inline-flex;
	align-items: center;
	box-sizing: border-box;
	padding: 0 15px;
	height: $xts-option-input-height;
	outline: none !important;
	border: none;
	background-color: $xts-button-color-default;
	box-shadow: none;
	color: #444;
	text-decoration: none;
	text-transform: uppercase;
	white-space: nowrap;
	font-weight: 600;
	font-size: 12px;
	// line-height: $xts-option-input-height;
	line-height: 1;
	transition: .2s all ease-in-out !important;
	transform: none;

	&:hover {
		background-color: $xts-button-color-default-hover;
		cursor: pointer;
	}

	&:hover,
	&:focus {
		box-shadow: none;
		color: #444;
	}
}

// @extend %xts-button-primary;

%xts-button-primary {
	background-color: $xts-color-primary;
	color: #FFF;

	&:hover,
	&:focus {
		color: #FFF;
	}
}

// @extend %xts-button-alternative;

%xts-button-alternative {
	background-color: $xts-color-alternative;
	color: #FFF;

	&:hover,
	&:focus {
		color: #FFF;
	}
}

// @extend %xts-button-disable;

%xts-button-disable {
	background-color: $xts-button-color-remove;
	color: #FFF;

	&:hover,
	&:focus {
		color: #FFF;
	}
}

// @extend %xts-button-primary-hover;

%xts-button-primary-hover {

	&:hover {
		background-color: $xts-button-color-primary-hover;
	}
}

// @extend %xts-button-alternative-hover;

%xts-button-alternative-hover {

	&:hover {
		background-color: $xts-button-color-alternative-hover;
	}
}

// @extend %xts-button-disable-hover;

%xts-button-disable-hover {

	&:hover {
		background-color: $xts-button-color-remove-hover;
	}
}

// ------------------------------------------
// BUTTONS SHAPE
// ------------------------------------------

// @extend %xts-buttons-side-rounded;

%xts-buttons-side-rounded {

	&:first-child {
		border-top-left-radius: $xts-option-border-radius;
		border-bottom-left-radius: $xts-option-border-radius;
	}

	&:last-child {
		border-top-right-radius: $xts-option-border-radius;
		border-bottom-right-radius: $xts-option-border-radius;
	}

	.rtl & {

		&:first-child {
			border-top-left-radius: 0;
			border-top-right-radius: $xts-option-border-radius;
			border-bottom-right-radius: $xts-option-border-radius;
			border-bottom-left-radius: 0;

		}

		&:last-child {
			border-top-left-radius: $xts-option-border-radius;
			border-top-right-radius: 0;
			border-bottom-right-radius: 0;
			border-bottom-left-radius: $xts-option-border-radius;
		}
	}
}

// @extend %xts-js-loading-fadein;

%xts-js-loading-fadein {
	animation: wd-fadeIn .2s ease both;
}

// @extend %xts-fill;

%xts-fill {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
}

// @extend %xts-bordered-button;

%xts-bordered-button {
	display: inline-flex;
	align-items: center;
	box-sizing: border-box;
	padding: 0 15px;
	height: $xts-option-input-height;
	outline: none !important;
	border: 2px solid $xts-button-color-default;
	box-shadow: none;
	// color: #444;
	color: #4E4E4E;
	text-decoration: none;
	text-transform: uppercase;
	white-space: nowrap;
	font-weight: 600;
	font-size: 12px;
	// line-height: $xts-option-input-height;
	line-height: 1;
	transition: .2s all ease-in-out;
	transform: none;

	&:hover {
		border-color: $xts-button-color-default-hover;
		background-color: $xts-button-color-default-hover;
		cursor: pointer;
	}

	&:hover,
	&:focus {
		box-shadow: none;
		color: #444;
	}
}

// @extend %xts-bordered-button-primary;

%xts-bordered-button-primary {
	border-color: $xts-color-primary;
	color: darken($xts-color-primary, 10%);

	&:hover,
	&:focus {
		border-color: $xts-color-primary;
		background-color: $xts-color-primary;
		color: #FFF;
	}
}


// @extend %xts-bordered-button-white;

%xts-bordered-button-white {
	border-color: #FFF;
	color: #FFF;

	&:hover,
	&:focus {
		border-color: #FFF;
		background-color: #FFF;
		color: #444;
	}
}

// ------------------------------------------------------------------------------------------------
// CSS CHECKBOXES
// ------------------------------------------------------------------------------------------------

// @extend %xts-checkbox;

%xts-checkbox {

	input[type=checkbox] {
		position: relative;
		box-sizing: border-box;
		margin-top: 0;
		margin-right: 5px;
		margin-bottom: 0;
		margin-left: 0;
		// margin-bottom: -4px;
		width: 18px;
		height: 18px;
		border: 2px solid #C5C5C5;
		border-radius: 3px;
		// box-shadow: none;
		box-shadow: 0 0 5px transparent;
		-webkit-transition: all .15s ease-out;
		transition: all .15s ease-out;

		&:checked {
			border: 2px solid $woodmart-button-color;
			background-color: $woodmart-button-color;

			&:before {
				opacity: 1;
				-webkit-transform: scale(1);
				transform: scale(1);
			}
		}

		&:disabled {
			opacity: .5;
			cursor: default;

			+ label {
				opacity: .5;
				cursor: default;
			}
		}

		&:hover:not(:disabled) {
			border: 2px solid $woodmart-button-color;
			box-shadow: 0 0 5px rgba(0,0,0,.15);
		}

		&:before {
			// content: "\f147";
			// position: absolute;
			// top: 1px;
			// left: 0;
			// display: inline-block;
			// height: 18px;
			// color: #FFF;
			// font-family: dashicons;
			// line-height: 19px;
			// opacity: 0;
			// -webkit-transition: all .15s ease-out;
			// transition: all .15s ease-out;
			// -webkit-transform: scale(.5);
			// transform: scale(.5);
			content: "\f147";
			position: absolute;
			top: -1px;
			left: -1px;
			display: block;
			margin: 0;
			width: 100%;
			height: 100%;
			color: #FFF;
			font-weight: 400;
			font-family: dashicons;
			line-height: 19px;
			opacity: 0;
			-webkit-transition: all .15s ease-out;
			transition: all .15s ease-out;
			-webkit-transform: scale(.5);
			transform: scale(.5);;
		}

		+ label {
			user-select: none;
		}

		.rtl & {
			margin-right: 0;
			margin-left: 5px;

			&:before {
				right: 0;
				left: auto;
			}
		}
	}
}

// ------------------------------------------------------------------------------------------------
// DEVICES TABS
// ------------------------------------------------------------------------------------------------

// @extend %xts-devices-tabs;

%xts-devices-tabs {
	display: inline-flex;
	align-items: center;
	color: #333;
	vertical-align: middle;
	text-transform: uppercase;
	font-weight: 600;
	font-size: 13px;
	line-height: 1;
	cursor: pointer;
	transition: all .25s ease-in-out;

	span {
		margin-inline-start: 5px;
	}

	&:hover {
		color: #333;

		&:not(.xts-active) {
			opacity: .6;
		}
	}

	&.xts-active {
		color: $xts-color-alternative;

		&:before {
			color: inherit;
		}
	}

	&:not(:last-child) {
		margin-inline-end: 7px;
	}

	&:before {
		// margin-right: 5px;
		color: #BFBFBF;
		font-weight: 400;
		font-size: 15px;
		font-family: "dashicons";

		// .rtl & {
		// 	margin-right: 0;
		// 	margin-left: 5px;
		// }
	}

	&[data-value="desktop"] {

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

	// &[data-value="landscape"] {

	// 	&:before {
	// 		transform: rotate(90deg) translateX(1px) scale(1, -1);
	// 	}
	// }

	&[data-value="tablet"] {

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

	&[data-value="mobile"] {

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