// Must equal $color-palette-circle-size and $color-palette-circle-spacing from:
// @gechiui/components/src/circular-option-picker/style.scss
$swatch-size: 28px;
$swatch-gap: 12px;

$popover-width: $sidebar-width;
$popover-padding: $grid-unit-20;

$swatch-columns: math.floor(math.div($popover-width + $swatch-gap - 2 * $popover-padding, $swatch-size + $swatch-gap));

.block-editor-duotone-control__popover {
	> .components-popover__content > div {
		padding: $popover-padding;
		width: $popover-width;
	}

	.components-menu-group__label {
		padding: 0;
	}

	.components-custom-gradient-picker__gradient-bar {
		margin: $grid-unit-20 0 $grid-unit-15;
	}

	.components-circular-option-picker__swatches {
		display: grid;
		grid-template-columns: repeat($swatch-columns, $swatch-size);
		gap: $swatch-gap;
		justify-content: space-between;
	}
}

.block-editor-duotone-control__description {
	margin: $grid-unit-20 0;
	font-size: $helptext-font-size;
}

// Better align the popover under the swatch.
// @todo: when the positioning for popovers gets refactored, this can presumably be removed.
.block-editor-duotone-control__popover:not([data-y-axis="middle"][data-x-axis="right"]) > .components-popover__content {
	margin-left: -14px;
}