// ------------------------------------------------------------------------------------------------
// BASE STYLE
// ------------------------------------------------------------------------------------------------

@import "config";

@import "base/animations";

@import "extends/all";

@import "elements/tooltip";

@import "elements/buttons-set";

@import "elements/product-count";

// ------------------------------------------------------------------------------------------------
// ELEMENTOR VISUAL EDITOR HELPERS
// ------------------------------------------------------------------------------------------------

.xts-highlight {
	color: #93003c;
}

@media (prefers-color-scheme: dark) {
	
	.xts-highlight {
		color: #71d7f7;
	}
}

// ------------------------------------------------------------------------------------------------
// ELEMENTOR EDITOR SIDEBAR
// ------------------------------------------------------------------------------------------------

// ------------------------------------------
// ELEMENTOR OPTION LAYOUT
// ------------------------------------------

//**** ELEMENTOR ELEMENTS ORDER ****//

#elementor-panel-categories {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-ms-flex-direction: column;
	flex-direction: column;

	-webkit-box-orient: vertical;
	-webkit-box-direction: normal;
}

.elementor-panel-category {
	-ms-flex-order: 1;
	order: 1;

	-webkit-box-ordinal-group: 2;
}

#elementor-panel-category-xts-product-elements {
	-ms-flex-order: -1;
	order: -1;

	-webkit-box-ordinal-group: 1;
}

#elementor-panel-category-xts-elements {
	-ms-flex-order: 0;
	order: 0;

	-webkit-box-ordinal-group: 1;
}

.elementor-panel {

	.elementor-element {

		[class*="xf-"] {
			line-height: 1;
	
			&:before {
				display: block;
			}
	
			&:after {
				position: absolute;
				top: 0;
				top: 2px;
				right: 0;
				right: 2px;
				color: #E6E9EC;
				font-style: normal;
				font-size: 18px;
				transition: all .3s;
	
				@include font-icon($icon-wp-sb-space);
			}
		}
	
		&:hover {
	
			[class*="xf-"] {
	
				&:after {
					color: #943E40;
				}
			}
		}
	}
}

//**** ELEMENTOR XTS BUTTONS ****//

.elementor-control-type-xts_buttons {
	padding-bottom: 5px;

	.elementor-control-field {
		flex-wrap: wrap;
	}

	.elementor-control-input-wrapper {
		margin-top: 10px;
		width: 100% !important;
	}
}

//**** ELEMENTOR OPTION ANIMATION ****//

.elementor-control {

	&:not(.elementor-control-type-section) {

		.elementor-control-content {
			animation: xts-fade-in .3s ease;

			animation-fill-mode: initial;
		}
	}
}

.elementor-control-type-choose {

	+ .elementor-control-type-icons {

		.elementor-control-svg-uploader {
			display: none;
		}
	}
}

// ------------------------------------------------------------------------------------------------
// ELEMENTOR VISUAL EDITOR
// ------------------------------------------------------------------------------------------------

.xts-html-block-template-default,
.xts-slide-template-default {

	.xts-header {
		@extend %xts-hidden;
	}

	.xts-content-area {
		display: flex;
		flex-direction: column;
		justify-content: center;
		margin-bottom: 0;
		padding-top: 20px;
		padding-bottom: 10px;
		min-height: 100vh;
	}

	#elementor-add-new-section {
		margin-top: 0;
		margin-bottom: 0;
	}

	&.admin-bar {

		.xts-content-area {
			min-height: calc(100vh - $admin-bar-height);
		}
	}
}

//**** SMALL ADD ITEM SECTION IN SLIDE EDITOR ****//

.xts-slide-template-default {

	.xts-slider,
	.xts-slide {
		overflow: visible;
	}

	.elementor-add-section-inner {
		margin: 0;
	}

	.elementor-add-new-section {
		position: absolute;
		top: 0;
		left: 50%;
		transform: translateX(-50%);
	}

	.elementor-add-section-close {
		color: $color-gray-300;

		&:hover {
			color: $color-gray-400;
		}
	}

	#elementor-add-new-section {
	
		&[data-view="choose-action"] {

			.elementor-add-section-inner {
				padding: 0;
				border: none;
				background: none;
			}
		}
	}

	[data-view="select-preset"] {

		.elementor-add-section-inner {
			padding-top: 20px;
			padding-bottom: 15px;
			background-color: rgba(240, 240, 240, .9);

			path {
				fill: $color-gray-300;
			}
		}
	}

	.elementor-add-section-drag-title {
		@extend %xts-hidden;
	}
}

//**** FIX CAROUSEL ON EDITOR ****//

.elementor-editor-active {

	.xts-carousel {
		min-height: 2px;
	}
}

//**** FIX ROW SETTINGS WHEN HEADER IS OVERLAP ****//

.elementor-section--handles-inside > .elementor-element-overlay .elementor-editor-element-settings {
	display: flex!important;
}

//**** HTML BLOCK COLOR SWITCHER ****//

.xts-html-block-scheme-switcher {
	position: fixed;
	top: 0;
	right: 0;
	z-index: $z-layer-1;
	margin: 8px;

	.admin-bar & {
		top: 32px;
	}
}

.xts-html-block-scheme-switcher {

	> div {
		padding: 0 15px;
		height: 35px;
		text-transform: uppercase;
		font-weight: 600;
		font-size: 12px;
		line-height: 35px;
		cursor: pointer;
		transition: .2s all ease-in-out;

		&:hover {
			opacity: .8;
		}
	}
}

.xts-html-block-scheme-dark {
	margin-bottom: 5px;
	background-color: $color-gray-200;
	color: $color-gray-800;
}

.xts-html-block-scheme-light {
	background-color: $color-gray-900;
	color: $color-white;
}

//**** HTML BLOCK FOOTER BUILDER ****//

.xts-footer-html-block {

	.xts-site-content {

		> .container {
			max-width: 100%;
		}
	}

	.xts-content-area {
		-webkit-box-pack: end;
		-ms-flex-pack: end;
		justify-content: flex-end;
	}

	.xts-footer {
		margin-bottom: -10px;
		margin-left: -15px;
		margin-right: -15px;
	}
}

.xts-sticky-cats {
	@extend %xts-hidden;
}

// ------------------------------------------------------------------------------------------------
// XTEMOS TEMPLATES
// ------------------------------------------------------------------------------------------------

.elementor-editor-active {
	
	.elementor-add-new-section {
		
		.xts-library-modal-btn  {
			background-color: #0F4C81;
			font-size: 0 !important;
			margin-left: 5px;
			vertical-align: top;
		}
	}
}

.xts-library-modal-btn  {

	&:before {
		color: #FFF;
		font-size: 18px;
		content: "\e943";
		font-family: "Space-Admin-Icon";
	}
}

.dialog-widget-content {

	.xts-notice {
		padding: 20px 30px;
		border-radius: 3px;
		margin-top: 10px;
		width: 100%;
		color: rgba(255, 255, 255, 0.9);
		text-align: left;

		&.xts-error {
			background-size: 30px 30px;
			background-color: #EC8580;
			background-image: linear-gradient(
				45deg
				, rgba(255, 255, 255, 0.05) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.05) 50%, rgba(255, 255, 255, 0.05) 75%, transparent 75%, transparent);
		}
	}
}

#xts-library-modal {

	.xts-elementor-template-library-template-name {
		text-align: right;
		flex: 1 0 0%;
	}
}

@media (prefers-color-scheme: dark) {

	#xts-library-modal {

		.xts-elementor-template-library-template-name {
			color: #333;
		}
	}
}

// ------------------------------------------------------------------------------------------------
// ADD SECTION AREA RESET BUTTON STYLES
// ------------------------------------------------------------------------------------------------

.elementor-add-new-section {
	
	> button {
		min-height: 40px;
	}
}

.e-con-select-type__icons {
	
	> button {
		display: inline;
	}
}

.elementor-add-section-close, 
.elementor-add-section-back {
	min-height: unset;
}

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

.rtl {

	.xts-html-block-scheme-switcher {
		right: auto;
		left: 0;
	}

	.xts-library-modal-btn {
		margin-left: 0;
		margin-right: 5px;
	}

	.dialog-widget-contents {

		.xts-notice {
			text-align: right;
		}
	}
}