// ------------------------------------------------------------------------------------
// XTS METABOXES
// ------------------------------------------------------------------------------------

// OPTION ICON

.xts-option-icon {

	label {
		
		&:before {
			position: relative;
			// bottom: -5px;
			font-family: dashicons;
			color: #aaa;
			font-size: 18px;
			font-weight: 400;
			margin-right: 2px;
		}
	}
}

.xts-option-icon-desktop {

	label {

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

.xts-option-icon-tablet {

	label {

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

.xts-option-icon-mobile {

	label {

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

// SHOW-HIDE ELEMENTS

.xts-shown {
	display: block;
}

.xts-hidden {
	display: none !important;
}

// ------------------------------------------
// GRID
// ------------------------------------------

.xts-row {
	display: flex;
	flex-wrap: wrap;
	margin-left: -10px;
	margin-right: -10px;
}

.xts-col {
	padding-left: 10px;
	padding-right: 10px;
	flex-basis: 100%;
}

.xts-col-12 {
	flex-basis: 100%;
	width: 100%;
	max-width: 100%;
}

// ------------------------------------------------------------------------------------------------
// RESPONSIVE
// ------------------------------------------------------------------------------------------------

// ------------------------------------------
// MEDIA 1441 AND UP
// ------------------------------------------

@mixin R-XXL-UP__helpers {

	.xts-col-xxl-9,
	.xts-col-xxl-3 {
		flex-grow: 1;
	}
	
	.xts-col-xxl-9 {
		flex-basis: 75%;
	}

	.xts-col-xxl-3 {
		flex-basis: 25%;
	}
}

// ------------------------------------------
// MEDIA 1200 AND UP
// ------------------------------------------

@mixin R-XL-UP__helpers {

	// .xts-col-4,
	// .xts-col-6 {
	// 	flex-grow: 0;
	// }

	.xts-col-4 {
		flex-basis: 33.33333%;
	}
	
	.xts-col-6 {
		flex-basis: 50%;
	}
}