style.scss

$color-palette-circle-size: 28px;
$color-palette-circle-spacing: 12px;

.components-circular-option-picker {
	display: inline-block;
	width: 100%;
	margin-right: -10px;

	.components-circular-option-picker__custom-clear-wrapper {
		display: flex;
		justify-content: flex-end;
	}

	// Account for scrollbar or no scrollbar.
	.components-circular-option-picker__swatches {
		margin-right: -$grid-unit-20;
	}
}

.components-circular-option-picker__option-wrapper {
	display: inline-block;
	height: $color-palette-circle-size;
	width: $color-palette-circle-size;
	margin-right: $color-palette-circle-spacing + $grid-unit-05;
	margin-bottom: $color-palette-circle-spacing;
	vertical-align: top;
	transform: scale(1);
	transition: 100ms transform ease;
	@include reduce-motion("transition");

	&:hover {
		transform: scale(1.2);
	}

	// Ensure that the <div> that <Dropdown> wraps our toggle button with is full height
	& > div {
		height: 100%;
		width: 100%;
	}
}

.components-circular-option-picker__option-wrapper::before {
	content: "";
	position: absolute;
	top: 1px;
	left: 1px;
	bottom: 1px;
	right: 1px;
	border-radius: $radius-round;
	// Show a thin circular outline in Windows high contrast mode, otherwise the button is invisible.
	z-index: z-index(".components-circular-option-picker__option-wrapper::before");
	// Need to disable the lint rule because given that we are in the presence of a data URL that needs quotes we need to wrap it with single quotes.
	/* stylelint-disable-next-line function-url-quotes */
	background: url('data:image/svg+xml,%3Csvg width="28" height="28" fill="none" xmlns="http://www.w3.org/2000/svg"%3E%3Cpath d="M6 8V6H4v2h2zM8 8V6h2v2H8zM10 16H8v-2h2v2zM12 16v-2h2v2h-2zM12 18v-2h-2v2H8v2h2v-2h2zM14 18v2h-2v-2h2zM16 18h-2v-2h2v2z" fill="%23555D65"/%3E%3Cpath fill-rule="evenodd" clip-rule="evenodd" d="M18 18h2v-2h-2v-2h2v-2h-2v-2h2V8h-2v2h-2V8h-2v2h2v2h-2v2h2v2h2v2zm-2-4v-2h2v2h-2z" fill="%23555D65"/%3E%3Cpath d="M18 18v2h-2v-2h2z" fill="%23555D65"/%3E%3Cpath fill-rule="evenodd" clip-rule="evenodd" d="M8 10V8H6v2H4v2h2v2H4v2h2v2H4v2h2v2H4v2h2v-2h2v2h2v-2h2v2h2v-2h2v2h2v-2h2v2h2v-2h2v-2h-2v-2h2v-2h-2v-2h2v-2h-2v-2h2V8h-2V6h2V4h-2v2h-2V4h-2v2h-2V4h-2v2h-2V4h-2v2h2v2h-2v2H8zm0 2v-2H6v2h2zm2 0v-2h2v2h-2zm0 2v-2H8v2H6v2h2v2H6v2h2v2h2v-2h2v2h2v-2h2v2h2v-2h2v2h2v-2h-2v-2h2v-2h-2v-2h2v-2h-2v-2h2V8h-2V6h-2v2h-2V6h-2v2h-2v2h2v2h-2v2h-2z" fill="%23555D65"/%3E%3Cpath fill-rule="evenodd" clip-rule="evenodd" d="M4 0H2v2H0v2h2v2H0v2h2v2H0v2h2v2H0v2h2v2H0v2h2v2H0v2h2v2H0v2h2v-2h2v2h2v-2h2v2h2v-2h2v2h2v-2h2v2h2v-2h2v2h2v-2h2v2h2v-2h2v-2h-2v-2h2v-2h-2v-2h2v-2h-2v-2h2v-2h-2v-2h2V8h-2V6h2V4h-2V2h2V0h-2v2h-2V0h-2v2h-2V0h-2v2h-2V0h-2v2h-2V0h-2v2H8V0H6v2H4V0zm0 4V2H2v2h2zm2 0V2h2v2H6zm0 2V4H4v2H2v2h2v2H2v2h2v2H2v2h2v2H2v2h2v2H2v2h2v2h2v-2h2v2h2v-2h2v2h2v-2h2v2h2v-2h2v2h2v-2h2v2h2v-2h-2v-2h2v-2h-2v-2h2v-2h-2v-2h2v-2h-2v-2h2V8h-2V6h2V4h-2V2h-2v2h-2V2h-2v2h-2V2h-2v2h-2V2h-2v2H8v2H6z" fill="%23555D65"/%3E%3C/svg%3E');
}

.components-circular-option-picker__option {
	display: inline-block;
	vertical-align: top;
	height: 100%;
	width: 100%;
	border: none;
	border-radius: 50%;
	background: transparent;
	box-shadow: inset 0 0 0 ($color-palette-circle-size / 2);
	transition: 100ms box-shadow ease;
	@include reduce-motion("transition");
	cursor: pointer;

	&:hover {
		// Override default button hover style.
		box-shadow: inset 0 0 0 ($color-palette-circle-size / 2) !important;
	}

	&.is-pressed {
		box-shadow: inset 0 0 0 4px;
		position: relative;
		z-index: z-index(".components-circular-option-picker__option.is-pressed");
		overflow: visible;

		& + svg {
			position: absolute;
			left: 2px;
			top: 2px;
			border-radius: 50%;
			z-index: z-index(".components-circular-option-picker__option.is-pressed + svg");
			pointer-events: none;
		}
	}

	&::after {
		content: "";
		position: absolute;
		top: -1px;
		left: -1px;
		bottom: -1px;
		right: -1px;
		border-radius: $radius-round;
		box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.2);
		// Show a thin circular outline in Windows high contrast mode, otherwise the button is invisible.
		border: 1px solid transparent;
	}

	&:focus {
		&::after {
			content: "";
			border: #{ $border-width * 2 } solid $dark-gray-400;
			width: 32px;
			height: 32px;
			position: absolute;
			top: -2px;
			left: -2px;
			border-radius: $radius-round;
			box-shadow: inset 0 0 0 2px $white;
		}
	}

	&.components-button:focus {
		background-color: transparent;
		box-shadow: inset 0 0 0 ($color-palette-circle-size / 2);
		outline: none;
	}
}

.components-circular-option-picker__button-action .components-circular-option-picker__option {
	color: $white;
	background: $white;
}


.components-circular-option-picker__dropdown-link-action {
	margin-right: $grid-unit-20;

	.components-button {
		line-height: 22px;
	}
}