$components-custom-gradient-picker__padding: $grid-unit-20; // 48px container, 16px handles inside, that leaves 32px padding, half of which is 1å6.

.components-custom-gradient-picker__gradient-bar:not(.has-gradient) {
	opacity: 0.4;
}

.components-custom-gradient-picker__gradient-bar {
	border-radius: $radius-block-ui;
	margin-top: $grid-unit-15;
	width: 100%;
	height: $grid-unit-60;
	margin-bottom: $grid-unit-20+$grid-unit-05;
	/*rtl:ignore*/
	padding-right: $components-custom-gradient-picker__padding;

	.components-custom-gradient-picker__markers-container {
		position: relative;
		width: calc(100% - #{ $grid-unit-40 });
		margin-left: auto;
		margin-right: auto;
	}

	.components-custom-gradient-picker__insert-point {
		border-radius: 50%;
		background: $white;
		padding: 2px;
		top: $components-custom-gradient-picker__padding;
		min-width: $grid-unit-20;
		width: $grid-unit-20;
		height: $grid-unit-20;
		position: relative;
		color: $gray-900;

		svg {
			height: 100%;
			width: 100%;
		}
	}

	.components-custom-gradient-picker__control-point-button {
		border-radius: 50%;
		height: $grid-unit-20;
		width: $grid-unit-20;
		padding: 0;
		position: absolute;
		top: $components-custom-gradient-picker__padding;

		// Shadow and stroke.
		box-shadow: inset 0 0 0 var(--gc-admin-border-width-focus) $white, 0 0 $border-width-focus 0 rgba($black, 0.25);

		// Windows High Contrast mode will show this outline, but not the box-shadow.
		outline: 2px solid transparent;

		&:focus,
		&.is-active {
			box-shadow: inset 0 0 0 calc(var(--gc-admin-border-width-focus) * 2) $white, 0 0 $border-width-focus 0 rgba($black, 0.25);

			// Windows High Contrast mode will show this outline, but not the box-shadow.
			outline: $border-width-tab solid transparent;
		}
	}
}

.components-custom-gradient-picker__color-picker-popover .components-custom-gradient-picker__remove-control-point {
	margin-left: auto;
	margin-right: auto;
	display: block;
	margin-bottom: $grid-unit-10;
}

.components-custom-gradient-picker__inserter {
	/*rtl:ignore*/
	direction: ltr;
	width: 100%;
}

.components-custom-gradient-picker__liner-gradient-indicator {
	display: inline-block;
	flex: 0 auto;
	width: 20px;
	height: 20px;
}

.components-custom-gradient-picker .components-custom-gradient-picker__ui-line {
	margin-bottom: $grid-unit-20;

	.components-base-control.components-angle-picker,
	.components-base-control.components-custom-gradient-picker__type-picker {
		margin-bottom: 0;
	}
}

.components-custom-gradient-picker .components-custom-gradient-picker__toolbar {
	border: none;

	// Work-around to target the inner button containers rendered by <ToolbarGroup />
	> div + div {
		margin-left: 1px;
	}

	button {
		&.is-pressed {
			> svg {
				background: $white;
				border: 1px solid $gray-600;
				border-radius: 2px;
			}
		}
	}
}

// All these styles should be made generic and changed on the inputs for all components.
.components-custom-gradient-picker {
	.components-select-control__input,
	.components-input-control__input {
		height: 40px !important;
	}
	.components-input-control__label {
		line-height: 1;
		padding-bottom: $grid-unit-10 !important;
	}
	label {
		text-transform: uppercase;
		font-size: 11px;
		font-weight: 500;
	}
}