// ------------------------------------------------------------------------------------------------
// DUMMY CONTENT GENERAL
// ------------------------------------------------------------------------------------------------

@if $general {

	// ------------------------------------------
	// DEMO ITEM
	// ------------------------------------------

	.xts-import-item-wrap {

		&:not(.xts-active),
		&.xts-search-hide,
		&.xts-cat-hide {
			@extend %dummy-content-display-none;
		}
	}

	.xts-import-item {
		position: relative;
		align-items: center;
		flex-wrap: wrap;
		overflow: hidden;
		border: 1px solid var(--xts-option-border-color);
		border-radius: var(--xts-option-border-radius);
		background-color: #FFF;
		transition: all .25s ease;

		&:hover {
			box-shadow: var(--xts-box-shadow);
		}

		&:not(.xts-loading-item) {

			.xts-loading & {
				opacity: .6;
			}
		}
	}

	//**** DEMO ITEMS IMAGE ****//

	.xts-import-item-image {
		position: relative;
		overflow: hidden;
		// padding-top: 66.4%;
		transition: inherit;

		will-change: transform;
		image-rendering: -webkit-optimize-contrast;
		backface-visibility: hidden;
		-webkit-backface-visibility: hidden;
		perspective: 800px;
		-webkit-perspective: 800px;

		img {
			display: block;
			aspect-ratio: 3/2;
			max-width: 100%;
			width: 100%;
			object-fit: cover;
			transition: all .25s ease;

			backface-visibility: hidden;
			-webkit-backface-visibility: hidden;
			perspective: 800px;
			-webkit-perspective: 800px;
		}

		&:before {
			content: "";
			position: absolute;
			inset: 0 0 -1px 0;
			// top: 0;
			// right: 0;
			// bottom: -1px;
			// left: 0;
			z-index: 1;
			transition: inherit;
		}
	}

	.xts-import-item {

		&:hover {
			box-shadow: var(--xts-box-shadow);

			.xts-import-item-image:before {
				background-color: rgba(0,0,0,.15);
			}
		}

		&.xts-installed {

			.xts-import-item-image:before {
				background-color: rgba(0,0,0,.1);
			}
		}

		&.xts-loading-item {

			.xts-import-item-image:before {
				background-color: rgba(0,0,0,.3);
			}
		}

		&:is(
		:hover,
		.xts-installed,
		.xts-loading-item) {

			.xts-import-item-image:before {
				visibility: visible;
				opacity: 1;
			}
		}
	}

	// PREVIEW BUTTON

	.xts-import-item-preview {
		position: absolute;
		top: 50%;
		left: 50%;
		display: flex !important;
		align-items: center;
		justify-content: center;
		line-height: 1;
		z-index: 10;
		visibility: hidden;
		box-shadow: var(--xts-option-box-shadow);
		opacity: 0;
		box-shadow: 0px 0px 8px 3px rgba(0, 0, 0, .1);
		transform: translateY(-50%) translateX(-50%) translateZ(0);
		outline: none !important;
		border-color: transparent !important;

		&:hover,
		&:focus {
			box-shadow: 0px 0px 12px 3px rgba(0, 0, 0, .2) !important;
		}
	}

	.xts-import-item {

		&:not(.xts-loading-item) {

			&:hover {

				.xts-import-item-preview {
					visibility: visible;
					opacity: 1;
					// transform: translateY(-50%) translateX(-50%) translateZ(0);
				}
			}
		}
	}

	// ------------------------------------------
	// FOOTER
	// ------------------------------------------

	.xts-import-item-footer {
		position: relative;
		z-index: $z-layer-1;
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 15px;
		border-top: 1px solid var(--xts-option-border-color);
	}

	.xts-import-item-title {
		flex-grow: 1;
		margin-inline-end: 8px;
		color: #242424;
		font-weight: 600;
		text-align: start; // NOTE FOR SETUP WIZARD
		font-size: 16px;
		line-height: 17px;
	}

} // END

// ------------------------------------------------------------------------------------------------
// DUMMY CONTENT PAGE
// ------------------------------------------------------------------------------------------------

@if $page-dummy-content {

	// ------------------------------------------
	// FILTERS
	// ------------------------------------------

	.xts-import-cats-set {
		width: 100%;

		.xts-set-btn {
			flex: 1 1 50%;
			padding: 0 10px;
			max-width: 50%;

			span {
				overflow: hidden;
				text-overflow: ellipsis;
				padding-block: 5px;
			}
		}
	}

	.xts-import-cats-list-wrap {
		position: sticky;
		top: 52px;

		.xts-buttons-control {
			margin-bottom: 10px;
		}

		.xts-note {
			display: none;
			margin-top: 5px;
		}
	}

	.xts-import-cats-list {
		// margin-top: 10px;

		.xts-filter {
			@extend %dummy-content-display-none;

			&.xts-active {
				display: block;
			}
		}
	}

	// ------------------------------------------
	// LOADING
	// ------------------------------------------

	.xts-import-items {
		// min-height: 186px;

		&.xts-loading {
			pointer-events: none;
			user-select: none;
		}

		&.xts-disabled {

			.xts-import-item {
				opacity: .7;
				pointer-events: none;
				user-select: none;
			}
		}
	}

	// ------------------------------------------
	// LABELS
	// ------------------------------------------

	//**** DEMO ITEMS LABELS ****//

	.xts-import-item {

		.xts-box-labels {
			position: absolute;
			right: 5px;
			bottom: 5px;
			z-index: 20;
			display: flex;
			visibility: hidden;
			opacity: 0;
			transition: inherit;
		}

		.xts-box-label {
			margin-left: 5px;
			padding: 2px 5px;
			font-size: 10px;

			&:before {
				margin-inline-end: 1px;
				vertical-align: middle;
				font-size: 11px;
			}
		}

		.xts-label-default {
			background-color: #F1F1F1;
			color: #333;
		}

		&.xts-imported .xts-label-default,
		&:not(.xts-imported) .xts-label-warning {
			@extend %dummy-content-display-none;
		}

		&:not(.xts-loading-item):not(:hover) {

			.xts-box-labels {
				visibility: visible;
				opacity: 1;
			}
		}
	}

	// ------------------------------------------
	// PROGRESS BAR
	// ------------------------------------------

	[class*="xts-import-progress"] {
		position: absolute;
		inset: 0;
		// top: 0;
		// right: 0;
		// bottom: 0;
		// left: 0;
		visibility: hidden;
		opacity: 0;

		.xts-loading-item & {
			visibility: visible;
			opacity: 1;
		}
	}

	.xts-import-progress-bar {
		top: auto;
		bottom: -1px;
		z-index: 2;
		width: 0%;
		height: 6px;
		background: linear-gradient(270deg, var(--xts-primary-color), var(--xts-primary-color-darker-10));
		// background: linear-gradient(270deg, #83B735, #9ED625);
		background-size: 400% 400%;

		.xts-loading-item & {
			opacity: .9;
		}
	}

	.xts-import-progress-bar-percent {
		z-index: 3;
		display: flex;
		align-items: center;
		justify-content: center;
		color: #FFF;
		font-weight: 600;
		font-size: 24px;
	}

	// ------------------------------------------
	// FOOTER
	// ------------------------------------------

	.xts-import-item-btn {
		position: relative;

		&:after {
			content: "";
			position: absolute;
			top: calc(50% - 7px);
			inset-inline-start: 11px;
			opacity: 0;
			transition: inherit;

			@include loader(12px,1px,rgba(255,255,255,.15),currentColor);
		}

		.xts-loading-item & {

			&:after {
				opacity: 1;

				@include act-loader;
			}

			&:before {
				opacity: 0;
			}
		}
	}

	.xts-import-item {

		&:not(.xts-imported) {

			.xts-import-item-btn {

				&.xts-color-alt {
					@extend %dummy-content-display-none;
				}
			}
		}

		&[data-type="version"] {

			&.xts-imported {

				.xts-import-item-btn {

					&.xts-color-primary {
						@extend %dummy-content-display-none;
					}
				}
			}
		}

		&:is(
		[data-type="page"],
		[data-type="element"]) {

			.xts-import-item-btn {

				&.xts-color-alt {
					@extend %dummy-content-display-none;
				}
			}
		}
	}

	.xts-view-item-btn {
		@extend %dummy-content-display-none;

		.xts-view-page & {
			display: inline-flex;
		}
	}

	.xts-view-page {

		.xts-import-item-btn {
			@extend %dummy-content-display-none;
		}
	}

	// ------------------------------------------
	// IMPORT POPUP
	// ------------------------------------------

	.xts-import-remove {

		.xts-popup-inner {
			max-width: 640px;
		}

		.xts-popup-actions {
			min-height: 95px;
			border-top: none;
			background-color: $woodmart-notice-warning;
		}
	}

	.xts-import-remove-form-wrap {
		display: flex;
		align-items: flex-start;
	}

	.xts-import-remove-form {
		display: flex;
		flex-basis: 55%;
		flex-wrap: wrap;
		transition: .3s all ease;

		flex-shrink: 0;

		> .xts-import-remove-items {
			margin-block: 5px;
			// margin-top: 5px;
			margin-inline-end: 5px;
			// margin-bottom: 5px;
			width: calc(50% - 5px);
			font-weight: 600;

			span {
				color: #ABABAB;
				font-weight: 400;
			}
		}

		.xts-loading & {
			opacity: .4;
			pointer-events: none;
		}
	}

	.xts-import-select-btns {
		margin-bottom: 15px;
		width: 100%;

		> button {
			margin-inline-end: 10px;

			&:before {
				color: #ABABAB;
			}
		}
	}

	.xts-import-remove-img {
		flex-grow: 1;
		flex-basis: 45%;
		margin-top: 13px;
		text-align: center;
		transition: .3s all ease;

		img {
			max-width: 100%;
		}

		.xts-loading & {
			opacity: .4;
			pointer-events: none;
		}
	}

	.xts-import-remove-opener {
		visibility: hidden;

		.xts-has-data & {
			visibility: visible;
		}
	}

	.xts-import-remove-btn {

		&.xts-disabled {
			opacity: .6;
			pointer-events: none;
		}
	}

	.xts-import-remove-alert {
		position: absolute;
		right: 0;
		bottom: 0;
		inset-inline-start: 0;
		display: flex;
		align-items: center;
		overflow: hidden;
		padding: 20px;
		max-height: 95px;

		p {
			margin-inline-end: 20px;
			margin-bottom: 0;
			color: $woodmart-notice-warning-text;
		}
	}

} // END IF

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

// @extend %dummy-content-display-none;

%dummy-content-display-none {
	display: none;
}