.gblocks-color-component {
	display: flex;
	align-items: center;

	&__label {
		flex: 1;
	}

	&__toggle-button {
		height: auto;
		min-height: auto;
		padding: 4px
	}

	&__toggle-indicator {
		width: 25px;
		height: 25px;
		border-radius: 50%;
		background: linear-gradient(-45deg,transparent 48%,rgba(0,0,0,0.2) 0,rgba(0,0,0,0.2) 52%,transparent 0);
		border: 1px solid rgba(0,0,0,0.2);
	}
}

.gblocks-color-component-content {
	.components-popover__content {
		padding: 15px;
		width: 300px;

		& > div {
			padding: 0;
		}
	}

	.components-base-control__field {
		margin-bottom: 0;
	}

	.react-colorful {
		width: 100% !important;

		.react-colorful__pointer {
			width: 20px;
			height: 20px;
		}

		.react-colorful__saturation {
			height: 150px;
		}
	}

	&__input-wrapper {
		display: flex;
		margin-top: 15px;

		.gblocks-color-input {
			flex: 1;
		}

		.gblocks-color-input-clear {
			height: auto;
		}

		.components-base-control__field {
			margin-bottom: 0;
		}
	}

    &__palette {
		margin-top: 15px;

		.components-circular-option-picker {
		    display: flex;
		    flex-wrap: wrap;

			.components-circular-option-picker__swatches {
				display: flex;
				flex-wrap: wrap;
				gap: 6px;

				.components-circular-option-picker__option-wrapper {
					margin: 0;
				}
			}
		}
	}

	&__opacity {
		display: flex;
		margin-top: 15px;

		.components-range-control {
			flex-grow: 1;
			padding-left: 5px;
		}
	}
}