// ------------------------------------------------------------------------------------------------
// HEADER BUILDER GENERAL
// ------------------------------------------------------------------------------------------------

@if $page-header-builder {

	// ------------------------------------------
	// MAIN BUILDER AREA
	// ------------------------------------------

	.whb-header-builder {

		button {
			color: var(--xts-body-color);
		}
	}

	.woodmart_page_xts_header_builder {

		&[style*="overflow: hidden;"] {
			
			#wpbody-content {
				z-index: 9999;
			}
		}
	}

	#whb-header-builder:empty {
		height: 300px;
		border-radius: var(--xts-brd-radius);
		background: #FFF;
		box-shadow: var(--xts-box-shadow);
	}

	.whb-building-area {

		&.whb-area-mobile {

			.whb-main-area {
				max-width: 1000px;
			}
		}
	}

	// ------------------------------------------
	// ROWS, COLUMNS AND ROOT ELEMENTS
	// ------------------------------------------

	.whb-element-root {
		margin-bottom: 20px;

		> .whb-element-inner {

			> .whb-element-title {
				display: none;
				margin-bottom: 20px;
				font-weight: 600;
			}
		}
	}

	//**** HOW ELEMENTS LOOK IN COLUMNS ****//

	.whb-row-bg-preview {
		position: relative;
		top: 2px;
		display: inline-block;
		width: 14px;
		height: 14px;
		border-radius: 50%;
		background-attachment: scroll !important;
		background-size: contain !important;
		margin-inline-end: 5px;

		&:not([style]) {
			display: none;
		}

		&[style*="255, 255, 255"],
		&[style*="backdrop-filter"] {
			border: 1px solid var(--xts-option-border-color-darker-10);
		}
	}

	// ------------------------------------------
	// FIELD STYLES
	// ------------------------------------------

	.whb-link-option {

		input[type="text"] {
			margin-bottom: 5px;
		}
	}

	.whb-inline-checkbox {
		display: flex;
		align-items: center;

		input[type="checkbox"] {
			margin-top: 2px;
			margin-left: 10px;
		}
	}

	// ------------------------------------------------------------------------------------------------
	// ADD NEW HEADER
	// ------------------------------------------------------------------------------------------------

	.whb-new-header-window {

		h3 {
			margin-bottom: 15px;
			padding-bottom: var(--xts-option-space);
			border-bottom: 1px solid var(--xts-option-border-color);
			color: #333;
			font-weight: 600;
			font-size: 14px;
		}
	}

	.whb-header-examples {
		margin-bottom: 30px;

		li {
			position: relative;
			cursor: pointer;
			transition: .2s all ease-in-out;

			img {
				margin-bottom: 5px;
				padding: 2px;
				border: 1px solid var(--xts-option-border-color);
				border-radius: 10px;
				transition: inherit;
			}

			span {
				display: block;
				font-style: italic;
			}

			&:not(:last-child) {
				margin-bottom: 15px;
			}

			&:hover {

				img {
					border: 1px solid var(--xts-option-border-color-darker-10);
					box-shadow: var(--xts-box-shadow);
				}
			}
		}
	}

	.whb-header-defined {
		overflow: hidden;
		margin: 0;
		border: 1px solid var(--xts-option-border-color);
		border-radius: var(--xts-brd-radius);

		li {
			margin-bottom: 0;
			padding: 10px 15px;
			cursor: pointer;
			transition: .2s all ease-in-out;

			&:not(:last-child) {
				border-bottom: 1px solid var(--xts-option-border-color);
			}

			&:hover {
				background: var(--xts-primary-color);
				color: #FFF;
			}
		}
	}

	// ------------------------------------------------------------------------------------------------
	// ADD NEW ELEMENT
	// ------------------------------------------------------------------------------------------------

	.whb-elements-add {

		ul {
			display: flex;
			flex-wrap: wrap;
			margin: 0;

			margin-inline-end: -10px;
			gap: 10px;
		}

		li {
			position: relative;
			flex: 0 1 calc(33.33333% - 10px);
			margin-bottom: 0;
			// padding-top: 10px;
			// padding-bottom: 10px;
			padding-block: 10px;
			border: 1px solid var(--xts-option-border-color);
			border-radius: var(--xts-brd-radius);
			text-align: start;
			cursor: pointer;
			transition: .2s all ease-in-out;

			// padding-inline-start: 50px;
			// padding-inline-end: 5px;
			padding-inline: 50px 5px;

			&:before {
				position: absolute;
				top: calc(50% - 11px);
				color: var(--xts-primary-color);
				font-size: 22px;

				inset-inline-start: 14px;
			}

			h4 {
				margin-bottom: 0;
			}

			span {
				font-size: 12px;
				opacity: .7;
			}

			&:hover {
				border-color: var(--xts-option-border-color-darker-10);
				box-shadow: var(--xts-option-box-shadow);
			}
		}

		input[type="text"],
		.xts-notice {
			max-width: 100% !important;
		}

		.xts-search {
			margin-bottom: 15px !important;

			input[type="text"] {
				width: 100%;
			}
		}

		.xts-notice {
			width: 100%;

			// margin-inline-start: 0;
			// margin-inline-end: 10px;
			margin-inline: 0 10px;
		}
	}

	// ------------------------------------------------------------------------------------------------
	// HEADER BUILDER
	// ------------------------------------------------------------------------------------------------

	#whb-header-builder {

		> .xts-notice {
			animation: wd-fadeIn .6s ease both;
			animation-delay: 3.5s;
		}
	}

	// ------------------------------------------------------------------------------------------------
	// WHB STYLES OVERWRIGHT
	// ------------------------------------------------------------------------------------------------

	.whb-popup {

		h3 {
			margin-top: 0;
		}

		.whb-editor-field {

			[class*="xts-col-"] {
				margin-bottom: 0;
				// padding-right: 0 !important;
				// padding-left: 0 !important;
				padding-inline: 0 !important;
			}
		}

		// .whb-background-option {
		// 	margin-top: 0 !important;
		// }

		.whb-divider-option {
			margin: 0 !important;
		}

		// .whb-editor-field {

		// 	&.xts-col-12 {
				
		// 		select,
		// 		input[type="text"] {
		// 			max-width: calc(50% - 15px);
		// 		}
		// 	}
		// }
	}

	// ------------------------------------------------------------------------------------------------
	// HTML BLOCK ELEMENT
	// ------------------------------------------------------------------------------------------------

	.whb-field-block_id {

		.xts-add-block-link {
			display: inline-block !important;
			margin-inline-start: 10px;
		}
	}

	// ------------------------------------------------------------------------------------------------
	// HEADER BUILDER
	// ------------------------------------------------------------------------------------------------

	// ------------------------------------------
	// HEADERS LOADING
	// ------------------------------------------

	.whb-header-builder {
		@include xts-bg-loader;

		&.xts-loading {
			min-height: 500px;

			@include xts-act-bg-loader;
		}
	}

	.whb-main-area {
		max-width: 100%;
		transition: all .3s ease;
	}

	.whb-headers-manager {

		&.whb-area-mobile {

			.whb-main-area {
				max-width: 1100px;
			}
		}
	}

	// ------------------------------------------
	// HEADER MODULES
	// ------------------------------------------

	//**** ICON BUTTON ****//

	.whb-icon-button {
		display: inline-block;
		margin: 0;
		padding: 0;
		outline: none !important;
		border: none;
		background: transparent;
		text-align: center;
		cursor: pointer;
		transition: all .2s ease-in-out;
	}

} // END IF