// ------------------------------------------------------------------------------------------------
// OPTION TABS
// ------------------------------------------------------------------------------------------------

.xts-tabs {

	&:not(:first-child) {
		margin-top: 10px;
	}

	> div {
		padding-bottom: 0 !important;
	}

	.xts-set-item {
		display: flex;
		align-items: center;
		cursor: pointer;
		transition: all .25s ease;

		&.xts-active {
			background-color: transparent;
		}
	}
}

// ------------------------------------------
// STYLE DEFAULT
// ------------------------------------------

.xts-tabs {

	&.xts-style-default {
		overflow-x: auto;
		margin-right: -20px;
		margin-left: -20px;

		> div {

			&:first-child {
				padding-inline-start: 20px;
			}

			&:last-child {
				padding-inline-end: 20px;
			}
		}

		&:not(:first-child) {
			margin-top: -31px;

			> div {
				background-color: #FFF;
			}
		}

		.xts-option-title {
			display: flex;
			flex-basis: auto;
			align-items: center;
			text-transform: uppercase;
			font-weight: 600;

			label {
				margin-bottom: 0;
				font-size: 16px;
			}
		}

		.xts-btns-set {
			margin-bottom: -1px;
		}

		.xts-set-item {
			padding: 10px 10px;
			border: 1px solid var(--xts-option-border-color);
			border-top-left-radius: 4px;
			border-top-right-radius: 4px;
			background: #EFEFF0;
			color: #50575E;
			white-space: nowrap;
			font-weight: 600;
			font-size: 13px;

			&.xts-active {
				border-bottom-color: #FFF;
				background-color: transparent;
				color: #000;
			}

			&:not(.xts-active) {
				border-color: $xts-option-border-color;
				border-bottom-color: var(--xts-option-border-color);

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

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

			&:hover {
				color: #333 !important;
			}
		}
	}
}

.xts-tab-field {
	margin-bottom: 0;

	> div {
		border-bottom: 0;
	}
}

.xts-last-tab-field {

	&:after {
		content: "";
		position: absolute;
		right: -5px;
		bottom: 0;
		left: -5px;
		height: 1px;
		background-color: var(--xts-option-border-color);
	}
}

@media (max-width: 1024px) {

	.xts-tabs {

		&.xts-style-default {

			.xts-btns-set {
				margin-inline-start: 20px;
			}
		}
	}

	.xts-last-tab-field {

		.xts-option-control {
			padding-inline-start: 20px;
		}
	}
}

// ------------------------------------------
// STYLE DEVICES
// ------------------------------------------

.xts-tabs {

	&.xts-style-devices {
		position: relative;
		z-index: 50;
		margin: 0 !important;

		> div {
			margin: 0 !important;
			border: none !important;
		}

		.xts-option-title {
			display: none;
		}

		.xts-btns-set {
			margin-bottom: 15px;
		}

		.xts-set-item {
			@extend %xts-devices-tabs;
		}
	}
}

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

// .rtl {

// 	// ------------------------------------------
// 	// STYLE DEVICES
// 	// ------------------------------------------

// 	.xts-tabs {

// 		&.xts-style-devices {

// 			.xts-set-item {

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

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

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

@mixin R-XL-UP__elements__option-tabs {

	// ------------------------------------------
	// STYLE DEVICES
	// ------------------------------------------

	.xts-tabs {

		&.xts-style-devices {

			#addtag &,
			#edittag & {

				.xts-btns-set {
					position: absolute;
					top: 0;
					right: 15px;
					z-index: 5;
					justify-content: flex-end;
				}
			}

			.xts-metaboxes &,
			.xts-dashboard & {

				.xts-btns-set {
					margin-left: 30%;
				}
			}
		}
	}

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

	.rtl {

		#addtag,
		#edittag {

			.xts-tabs {

				&.xts-style-devices {

					.xts-btns-set {
						right: auto;
						left: 15px;
					}
				}
			}
		}

		.xts-metaboxes,
		.xts-dashboard {

			.xts-tabs {

				&.xts-style-devices {

					.xts-btns-set {
						margin-right: 30%;
						margin-left: 0;
					}
				}
			}
		}
	}
}

// ------------------------------------------
// MEDIA 1024 AND DOWN
// ------------------------------------------

@media (max-width: 1024px) {

	.xts-tabs {

		&.xts-style-default {

			.xts-btns-set {
				margin-left: 20px;
			}
		}
	}

	.xts-last-tab-field {

		.xts-option-control {
			padding-left: 20px;
		}
	}

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

	.rtl {

		.xts-tabs {

			&.xts-style-default {

				.xts-btns-set {
					margin-right: 20px;
					margin-left: 0;
				}
			}
		}

		.xts-last-tab-field {

			.xts-option-control {
				padding-right: 20px;
				padding-left: 0;
			}
		}
	}
}