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

@if $general {

	// OPTION ICON

	// .xts-option-icon {

	// 	label {

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

	// .xts-option-icon-desktop {

	// 	label {

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

	// .xts-option-icon-tablet {

	// 	label {

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

	// .xts-option-icon-mobile {

	// 	label {

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

	// ------------------------------------------
	// HELPERS
	// ------------------------------------------

	// SHOW-HIDE ELEMENTS

	.xts-shown {
		display: block;
	}

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

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

	.xts-row {
		display: flex;
		flex-wrap: wrap;
		margin-right: -15px;
		margin-bottom: -30px;
		margin-left: -15px;
		// width: 100%;
	}

	// [class*="xts-col"] {
	// 	position: relative;
	// 	margin-bottom: 30px;
	// 	padding-right: 15px;
	// 	padding-left: 15px;
	// 	width: 100%;
	// }

	.xts-col,
	.xts-col-auto,
	.xts-col-4,
	.xts-col-6,
	.xts-col-8,
	.xts-col-12,
	.xts-col-lg-3,
	.xts-col-lg-4,
	.xts-col-lg-8,
	.xts-col-xl-2,
	.xts-col-xl-3,
	.xts-col-xl-4,
	.xts-col-xl-5,
	.xts-col-xl-6,
	.xts-col-xl-7,
	.xts-col-xl-8 {
		position: relative;
		margin-bottom: 30px;
		padding-right: 15px;
		padding-left: 15px;
		width: 100%;
	}

	.xts-col {
		flex-grow: 1;
		flex-basis: 0;
		max-width: 100%;
	}

	.xts-col-auto {
		flex: 0 0 auto;
		max-width: none;
		width: auto;
	}

	.xts-col-4 {
		flex: 0 0 33.333333%;
		max-width: 33.333333%;
	}

	.xts-col-6 {
		flex: 0 0 50%;
		max-width: 50%;
	}

	.xts-col-8 {
		flex: 0 0 66.666667%;
		max-width: 66.666667%;
	}

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

	@media (min-width: 1025px) {

		.xts-col-lg-3 {
			flex: 0 0 25%;
			max-width: 25%;
		}

		.xts-col-lg-4 {
			flex: 0 0 33.333333%;
			max-width: 33.333333%;
		}

		.xts-col-lg-6 {
			flex: 0 0 50%;
			max-width: 50%;
		}

		.xts-col-lg-8 {
			flex: 0 0 66.666667%;
			max-width: 66.666667%;
		}
	}

	@media (min-width: 1200px) {

		.xts-col-xl-2 {
			flex: 0 0 20%;
			max-width: 20%;
		}

		.xts-col-xl-3 {
			flex: 0 0 25%;
			max-width: 25%;
		}

		.xts-col-xl-4 {
			flex: 0 0 33.333333%;
			max-width: 33.333333%;
		}

		.xts-col-xl-5 {
			flex: 0 0 41.666667%;
			max-width: 41.666667%;
		}

		.xts-col-xl-6 {
			flex: 0 0 50%;
			max-width: 50%;
		}

		.xts-col-xl-7 {
			flex: 0 0 58.333333%;
			max-width: 58.333333%;
		}

		.xts-col-xl-8 {
			flex: 0 0 66.666667%;
			max-width: 66.666667%;
		}
	}

	//**** SPACING ****//

	[class*="xts-sp-"] {
		margin-right: calc((var(--xts-sp) / 2) * -1);
		margin-bottom: calc(var(--xts-sp) * -1);
		margin-left: calc((var(--xts-sp) / 2) * -1);

		--xts-sp: .001px;

		> [class*="col"] {
			margin-bottom: var(--xts-sp);
			padding-right: calc(var(--xts-sp) / 2);
			padding-left: calc(var(--xts-sp) / 2);
		}
	}

	@each $space in 0, 10, 15, 20, 30 {

		.xts-sp-#{$space} {
			--xts-sp: #{$space}px;
		}
	}

	// ------------------------------------------
	// ALIGN
	// ------------------------------------------

	.xts-align-center {
		text-align: center;
	}

	// ------------------------------------------
	// Z-INDEX
	// ------------------------------------------

	// .xts-z-index-10 {
	// 	z-index: 10;
	// }

	// ------------------------------------------------------------------------------------------------
	// 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%;
		// }
	// }

} // END IF

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

@mixin R-XL-UP__helpers {

	@if $general {

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

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