.ct-gutenberg-color-picker {
	--cpm-pv: 20px;
	--cpm-ph: 17px;

	.components-color-picker {
		width: 100%;
		box-sizing: border-box;
		padding-block: var(--cpm-pv);
		padding-inline: var(--cpm-ph);

		.react-colorful {
			width: 100%;

			+ div {
				display: none; // do not remove
			}

			// dragg pointer
			.react-colorful__pointer {
				width: 14px;
				height: 14px;
				background: transparent;
			}

			.react-colorful__pointer-fill {
				box-shadow: inset 0px 0px 0px 2px rgba(255, 255, 255, 1);
			}

			// sliders
			.react-colorful__saturation {
				height: 147px;
				border-radius: 5px;
				margin-bottom: 20px;
			}

			.react-colorful__hue,
			.react-colorful__alpha {
				width: 100%;
				height: 18px;
				margin-bottom: 10px;

				.react-colorful__interactive {
					width: calc(100% - 18px);
					margin-left: 9px;
				}
			}

			.react-colorful__alpha {
				margin-bottom: 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%);
				background-size: 10px 10px;
				background-position: 0 0, 0 5px, 5px -5px, -5px 0;
			}
		}

		// color mode picker
		> * {

			&:last-child {
				margin: 20px calc(var(--cpm-ph) * -1) 0 calc(var(--cpm-ph) * -1);
				padding: 20px var(--cpm-ph) 1px var(--cpm-ph);
				border-top: 1px solid #eee;
			}
		}
	}

	.ct-option-color-value {
		border-top: 1px solid #eee;
		padding: var(--cpm-pv) var(--cpm-ph);
	}
}