.block-editor-color-gradient-control {
	.block-editor-color-gradient-control__color-indicator {
		margin-bottom: $grid-unit-15;
	}
}

.block-editor-panel-color-gradient-settings {
	.component-color-indicator {
		vertical-align: text-bottom;
	}

	&__panel-title {
		.component-color-indicator {
			display: inline-block;
		}
	}

	&.is-opened &__panel-title .component-color-indicator {
		display: none;
	}

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

	@media screen and (min-width: $break-medium) {
		.components-circular-option-picker__swatches {
			display: grid;
			grid-template-columns: repeat(6, $swatch-size);
			justify-content: space-between;
		}
	}

	// This shouldn't be needed but there's a rule in the inspector controls
	// overriding this causing too much spacing.
	// That generic rule should ideally be removed.
	.block-editor-block-inspector & .components-base-control {
		margin-bottom: inherit;
	}

	.block-editor-panel-color-gradient-settings__dropdown {
		display: block;
	}
}

.block-editor-panel-color-gradient-settings__dropdown {
	width: 100%;
}

.block-editor-panel-color-gradient-settings__dropdown-content .components-popover__content {
	& > div {
		width: $sidebar-width;
	}
}

@include break-medium() {
	.block-editor-panel-color-gradient-settings__dropdown-content {
		.components-popover__content {
			margin-right: #{ math.div($sidebar-width, 2) + $grid-unit-20 } !important;
		}

		&.is-from-top .components-popover__content {
			margin-top: #{ -($grid-unit-60 + $grid-unit-15) } !important;
		}

		&.is-from-bottom .components-popover__content {
			margin-bottom: #{ -($grid-unit-60 + $grid-unit-15) } !important;
		}
	}
}

.block-editor-panel-color-gradient-settings__dropdown:last-child > div {
	border-bottom-width: 0;
}

.block-editor-panel-color-gradient-settings__item {
	padding-top: $grid-unit-15 !important;
	padding-bottom: $grid-unit-15 !important;
	.block-editor-panel-color-gradient-settings__color-indicator {
		// Show a diagonal line (crossed out) for empty swatches.
		background: linear-gradient(-45deg, transparent 48%, $gray-300 48%, $gray-300 52%, transparent 52%);
	}

	&.is-open {
		background: $gray-100;
		color: var(--gc-admin-theme-color);
	}
}