// ------------------------------------------------------------------------------------
// XTS COLOR-PICKER
// ------------------------------------------------------------------------------------

@if $cont-color-picker {

	:is(
	.xts-theme-style,
	div.vc_ui-panel-content) {
		--xts-color-picker-h: 35px;

		.wp-picker-container {
			position: relative;
			display: inline-flex;
			align-items: center;
		}

		.wp-color-result {

			&.button {
				position: relative;
				margin-inline-end: 0 !important;
				margin-bottom: 0 !important;
				padding: var(--xts-picker-space) !important;
				padding-inline-start: calc(var(--xts-color-picker-h) + 4px) !important;
				height: var(--xts-color-picker-h);
				min-height: var(--xts-color-picker-h);
				border: 1px solid var(--xts-option-border-color) !important;
				border-radius: var(--xts-option-border-radius);
				background-image: none !important;

				--xts-picker-space: 2px;
				--xts-input-height: calc(var(--xts-color-picker-h) - (var(--xts-picker-space) * 2) - 2px);

				&:focus {
					outline: none !important;
					box-shadow: none !important;
				}
			}

			&:hover {

				.wp-color-result-text {
					background-color: var(--xts-btn-grey-color-hover);
				}
			}
		}

		:is(
		.xts-color-control,
		.xts-bg-source,
		.xts-fields-group,
		.xts-group,
		.xts-field) {

			&:has(.wp-picker-active) {
				z-index: 1000000; // NOTE FOR SELECT 2
			}
		}

		.color-alpha {
			// top: 2px !important;
			top: calc(50% - (var(--xts-input-height) / 2)) !important;
			inset-inline-start: 2px !important;
			width: var(--xts-color-picker-h) !important;
			height: var(--xts-input-height) !important;
			border-radius: var(--xts-option-border-radius) !important;
		}

		.wp-color-result-text {
			padding: 0 10px;
			width: var(--xts-color-picker-h) !important;
			height: var(--xts-input-height) !important;
			border: none;
			border-radius: var(--xts-option-border-radius);
			font-size: 0;
			vertical-align: inherit; // NOTE FIX VERTICAL ALIGN IF SIZE OF PICKER IS CHANGED

			@extend %xts-button;
			@extend %xts-button-default;
			@extend %xts-button-default-hover;

			&:before {
				font-size: 14px;

				@include font-icon($xts-icon-brush);
			}
		}

		//**** PICKER COLOR INPUT ****//

		.wp-picker-input-wrap {
			// margin-inline-start: 5px;
			// animation: wd-fadeIn .2s ease;

			label {
				display: inline-block;
				margin-bottom: 0;
				padding: 0;
				position: absolute;
				top: calc(var(--xts-color-picker-h) + 17px);
				inset-inline-start: 10px;
				z-index: 500;
				animation: wd-SlideFromBottomSmall .2s ease;
			}

			input[type=text] {
				width: 236px !important;
			}

			.button {
				width: 34px;
				height: var(--xts-color-picker-h);
				color: transparent;
				background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGZpbGw9Im5vbmUiIHZpZXdCb3g9IjAgMCAxNCAxNCI+CiAgPGcgY2xpcC1wYXRoPSJ1cmwoI2EpIj4KICAgIDxwYXRoIGZpbGw9IiM1ZTVlNWUiIGZpbGwtcnVsZT0iZXZlbm9kZCIgZD0iTTUuMTA0Ljg1NGEuNS41IDAgMSAwLS43MDgtLjcwOGwtMi41IDIuNWEuNS41IDAgMCAwIDAgLjcwOGwyLjUgMi41YS41LjUgMCAxIDAgLjcwOC0uNzA4TDMuNDU3IDMuNUg3YTQuNzUgNC43NSAwIDEgMS00Ljc1IDQuNzUuNS41IDAgMCAwLTEgMEE1Ljc1IDUuNzUgMCAxIDAgNyAyLjVIMy40NTdMNS4xMDQuODU0WiIgY2xpcC1ydWxlPSJldmVub2RkIi8+CiAgPC9nPgogIDxkZWZzPgogICAgPGNsaXBQYXRoIGlkPSJhIj4KICAgICAgPHBhdGggZmlsbD0iI2ZmZiIgZD0iTTAgMGgxNHYxNEgweiIvPgogICAgPC9jbGlwUGF0aD4KICA8L2RlZnM+Cjwvc3ZnPgo=);
				background-repeat: no-repeat;
				background-position: center;
				background-size: 18px;
				background-color: transparent !important;
				border: none;
				box-shadow: none !important;
				padding: 0;
				transition: .2s all ease;
				margin-inline-start: 0;
				animation: wd-fadeIn .2s ease;

				&:before {
					@include font-icon-content($xts-icon-round-left);
				}

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

		//**** PICKER DROPDOWN ****//

		.wp-picker-container {

			.iris-picker {
				position: absolute;
				top: var(--xts-color-picker-h);
				inset-inline: 0;
				z-index: 401; // REWRITE FOR BUTTON CUSTOM TEXT COLORSCHEME.
				border: 1px solid var(--xts-option-border-color);
				border-radius: var(--xts-option-border-radius);
				box-shadow: var(--xts-box-shadow);
				animation: wd-SlideFromBottomSmall .2s ease;
			}
		}

		:is(
		.iris-picker,
		.iris-picker-inner) {
			padding-top: calc(var(--xts-input-height) + 10px);
		}

		.iris-picker {

			.ui-draggable-handle {
				width: .001px;
				height: .001px;

				&.ui-state-focus {
					border-width: 0;
				}
			}

			// .iris-square-handle {
			// 	left: -7px;
			// 	top: -7px;
			// }

			.iris-palette {

				&:focus {
					box-shadow: 0 0 0 2px var(--xts-btn-primay-color);
				}
			}

			.iris-strip {

				:is(
				.ui-slider-handle,
				.ui-square-handle) {

					&:focus {
						border-color: var(--xts-btn-primay-color);
						box-shadow: 0 0 0 1px var(--xts-btn-primay-color);
					}
				}
			}
		}

		.iris-picker-inner {

			:is(
			.iris-square-handle,
			.ui-draggable-handle) {
				transition: none !important;
				background: transparent !important;
			}
		}

		.ui-widget {

			&.ui-widget-content {
				border: none;
			}
		}
	}

	.xts-theme-style {

		.wp-color-result {

			&.button {
				background-color: #FFF !important;
			}
		}
	}

	// @-moz-document url-prefix() {

	// 	:is(
	// 	.xts-theme-style,
	// 	div.vc_ui-panel-content) {

	// 		.wp-picker-container {
	
	// 			.iris-picker {
	// 				position: relative;
	// 				top: 0;
	// 			}
	// 		}
	// 	}
	// }

	// ------------------------------------------
	// BEFORE LOAD
	// ------------------------------------------

	.xts-theme-style {

		input.color-picker:not(.wp-color-picker) {
			max-width: 78px;
			// opacity: 0;
			color: transparent;
		}
	}

	// STYLES BEFORE COLOR-PICKER LOAD

	// .xts-color-control,
	// .xts-bg-color {

	// 	> input[type="text"] {
	// 		width: 135px;
	// 		height: var(--xts-input-height);
	// 		opacity: 0;
	// 	}
	// }

	// ------------------------------------------
	// POSITION RELATIVE/ABSOLUTE
	// ------------------------------------------

	// @supports selector(:has(*)) {
		
		// :is(
		// .xts-theme-style,
		// div.vc_ui-panel-content) {

		// 	.wp-picker-container {
	
		// 		.iris-picker {
		// 			position: absolute;
		// 			top: 35px;
		// 			inset-inline: 0;
		// 		}
		// 	}
		// }
	// }

} // END IF

@if $wpb-cont-color-picker {

	// ------------------------------------------------------------------------------------------------
	// WPB COLOR-PICKER
	// ------------------------------------------------------------------------------------------------

	div.vc_ui-panel-content {

		.wp-picker-container {

			.wp-color-result {

				&:before,
				&:after {
					content: "";
					position: absolute;
					top: 50%;
					border-radius: inherit;
					transform: translateY(-50%) translateZ(0);

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

				&:before {
					inset-inline-start: -1px;
					width: 77px;
					height: var(--xts-color-picker-h);
					border: 1px solid var(--xts-option-border-color) !important;
					background-color: #FFF;
				}

				&:after {
					inset-inline-start: 3px;
					z-index: 2;
					display: block !important;
					width: 34px;
					height: 29px;
					border: none !important;
					background-color: inherit;
				}

				.wp-color-result-text {
					position: relative;
					z-index: 2;
				}
			}
		}

		.wp-picker-container {

			.wp-color-picker {
				height: var(--xts-input-height) !important;
			}

			:is(
			.woodmart-opacity-container,
			.vc_alpha-container) {
				border: 1px solid var(--xts-option-border-color) !important;
				border-radius: var(--xts-option-border-radius) !important;
				box-shadow: var(--xts-box-shadow);

				label {
					margin-top: 0;
				}
			}

			.color-alpha {
				z-index: $z-layer-10;
				width: 35px !important;
			}
		}
	}

	.woodmart-vc-colorpicker {

		.wp-picker-container {
			position: relative;

			.wp-color-result {

				&.wp-picker-open {

					&:after {
						display: none;
					}
				}
			}

			.iris-picker {
				margin-bottom: 74px;
			}
		}

		.wp-picker-holder {
			position: absolute;
			top: 0;
			inset-inline-start: 0;
			padding-bottom: 10px;
		}
	}

	.woodmart-opacity-container {
		position: absolute;
		bottom: -73px;
		inset-inline-start: -1px;
		z-index: 1000;
		padding: 6px;
		width: 243px;
		border: 1px solid #DFDFDF;
		border-radius: 0;
		background-color: #FFF;

		border-end-end-radius: var(--xts-option-border-radius);
		border-end-start-radius: var(--xts-option-border-radius);

		.woodmart-opacity-field {
			padding-right: 0;
			padding-left: 0;
		}
	}

} // END IF

@if $whb-cont-color-picker {

	// ------------------------------------------------------------------------------------------------
	// WHB COLOR-PICKER
	// ------------------------------------------------------------------------------------------------

	.whb-color-picker {
		position: relative;
		display: inline-flex;
		padding: 2px;
		height: var(--xts-input-height);
		border: 1px solid var(--xts-option-border-color);
		border-radius: var(--xts-option-border-radius);
		background-color: #FFF;
		vertical-align: middle;
	}

	.whb-color-preview {
		width: 35px;
		border-radius: inherit;
	}

	.whb-color-handler {
		display: flex;
		align-items: center;
		justify-content: center;
		margin-inline-start: 2px;
		width: 35px;
		border-radius: inherit;
		background-color: var(--xts-btn-grey-color);
		font-size: 14px;
		cursor: pointer;
		transition: all .2s ease-in-out;

		&:before {
			@include font-icon($xts-icon-brush);
		}

		&:after {
			content: "";
			position: absolute;
			inset: 0;
			// top: 0;
			// right: 0;
			// bottom: 0;
			// left: 0;
		}

		&:hover {
			background-color: var(--xts-btn-grey-color-hover);
		}
	}

	.whb-color-picker-option {
		position: relative;
		// box-shadow: inset 0 0 5px rgba(0,0,0,.4);

		.whb-clear-color {
			display: inline-block;
			margin-inline-start: 5px;
			width: 20px;
			height: 20px;
			// color: var(--xts-btn-warning-color);
			color: rgba(94,94,94,1);
			vertical-align: middle;
			text-align: center;
			font-size: 18px;
			cursor: pointer;
			transition: all .2s ease-in-out;

			&:before {
				// @include font-icon($xts-icon-delete-bin);
				@include font-icon($xts-icon-round-left);
			}

			&:hover {
				// color: var(--xts-btn-warning-color-hover);
				color: rgba(94,94,94,.7);
			}
		}

		.sketch-picker {
			border: 1px solid var(--xts-option-border-color-darker-10) !important;
			border-radius: var(--xts-option-border-radius) !important;
			// box-shadow: var(--xts-option-box-shadow) !important;
			box-shadow: var(--xts-box-shadow) !important;
			animation: wd-SlideFromBottomSmall .2s ease;

			> div {

				&:first-child {
					border-radius: 3px;
				}
			}

			.flexbox-fix:nth-child(2) > div > div,
			.hue-horizontal {
				border-radius: 2px;
				box-shadow: inset 0 0 5px rgba(0,0,0,.4);
			}
		}

		.saturation-white {
			box-shadow: inset 0 0 5px rgba(0,0,0,.4);
		}
	}

	.whb-color-picker-cover {
		position: absolute;
		top: -60px;
		right: -100vw;
		bottom: -30px;
		left: -100vw;
	}

	.whb-color-picker-absolute {
		position: absolute;
		top: 50px;
		z-index: 2;

		.whb-picker-top & {
			top: auto;
			bottom: 45px;
		}

		.whb-picker-overlap & {
			top: 85px;
		}
	}

	.whb-color-picker-option {

		&.whb-picker-opened:not(.whb-picker-top):not(.whb-picker-overlap) {
			padding-bottom: 320px;
		}
	}

} // END IF