@use "../../reset";
@import '@simonwep/pickr/dist/themes/classic.min.css';
@import '@simonwep/pickr/dist/themes/monolith.min.css';
@import '@simonwep/pickr/dist/themes/nano.min.css';

.hulk_affef_colorpicker_wrap {
	max-width: 100%;
	flex-basis: 100%;
	display: flex;
	flex-wrap: nowrap;
	flex-direction: column;
	align-items: flex-start;
	position: relative;

	.hulk-pickcolor-wrap {
		position: relative;
		display: inline-block;
	}

	.elementor-message {
		width: 100%;
		display: block;
		clear: both;
	}

	.hulk-pickcolor {
		background-color: #ffffff;
		font-family: var(--e-global-typography-text-font-family), Sans-serif, serif;
		font-weight: var(--e-global-typography-text-font-weight);
		border: 1px solid #69727D;
		color: #1f2124;
		line-height: 1.4;
		font-size: 15px;
		min-height: 40px;
		border-radius: 3px;
		display: inline-flex;
		align-items: center;
		justify-content: center;
		width: auto;
		flex-basis: auto;
		max-width: 100%;
		cursor: pointer;
		gap: 10px;
		padding: 5px 14px 5px 8px;
		overflow: hidden;
		position: relative;
		z-index: 0;
	}

	input[type=text] {
		@extend %element-reset;
		@extend .hulk-pickcolor;
		display: inline-block;
		position: absolute;
		top: 0;
		left: 0;
		visibility: hidden;
		opacity: 0;
		flex-basis: auto;
		width: 100%;
		max-width: 100%;
		padding: 0;
		margin: 0;
	}

	.hulk-picker-code {
		height: 24px;
		width: 24px;
		display: flex;
		align-items: center;
		justify-content: center;
		border-radius: 3px;
		background: #f8f8f9;
		position: relative;
		overflow: hidden;

		&:after {
			content: "";
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			background: url('data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 2 2%27%3E%3Cpath fill=%27white%27 d=%27M1,0H2V1H1V0ZM0,1H1V2H0V1Z%27/%3E%3Cpath fill=%27gray%27 d=%27M0,0H1V1H0V0ZM1,1H2V2H1V1Z%27/%3E%3C/svg%3E%0A');
			background-size: .5em;
			border-radius: 3px;
			z-index: -1;
		}
	}

	.hulk-picker-empty {
		padding: 2px;
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		display: flex;
		align-items: center;
		justify-content: center;
		align-content: center;
		z-index: 2;

		svg {
			width: 14px;
			height: 14px;
		}
	}
}