.enb-component.enb-component-color-picker {

	// + .enb-component.enb-component-color-picker {
	// 	margin-block-start: -8px;
	// }

	.components-button {
		padding: 0;
		border: none;
	}

	.component-color-indicator {
		inline-size: 30px;
		block-size: 30px;
		margin-inline-start: 0;
		border: 2px solid #fff;
		background-size: 10px 10px;
		background-position: 0 0, 0 5px, 5px -5px, -5px 0;
		background-image:
			linear-gradient(45deg, #ddd 25%, transparent 25%),
			linear-gradient(-45deg, #ddd 25%, transparent 25%),
			linear-gradient(45deg, transparent 75%, #ddd 75%),
			linear-gradient(-45deg, transparent 75%, #ddd 75%);
		box-shadow: inset 0 0 0 1px rgb(0 0 0 / 10%);
	}
}

.enb-color-picker-group {

	.components-circular-option-picker__option {

		&::after {
			border: 2px solid #fff;
			box-shadow: inset 0 0 0 1px rgb(0 0 0 / 10%);
		}

		&:focus::after {
			display: none;
		}
	}

	.components-circular-option-picker__swatches {
		gap: 3px;
		// gap: 5px;
	}
}

.enb-component-select + .enb-control-color {
	margin-block-start: 12px;
}

.enb-component-color-indicator {

	.components-button:not(.enb-reset-button) {
		// min-inline-size: 30px;
		block-size: 24px;
		// padding: 0;
		border-radius: 50%;
		box-shadow: none;
	}
}