@use "@wordpress/base-styles/colors" as *;
@use "@wordpress/base-styles/variables" as *;

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

.components-circular-option-picker {
	display: inline-block;
	width: 100%;
	min-width: 188px;
	isolation: isolate;

	.components-circular-option-picker__custom-clear-wrapper {
		display: flex;
		justify-content: flex-end;
		margin-top: $grid-unit-15;
	}

	.components-circular-option-picker__swatches {
		display: flex;
		flex-wrap: wrap;
		gap: $color-palette-circle-spacing;
		position: relative;
		z-index: 1;
	}

	// Make sure that the .components-circular-option-picker__swatches element
	// renders visually on top of its siblings. This is necessary to make sure
	// that the tooltip rendered when hovering an `Option` always appears on top.
	> *:not(.components-circular-option-picker__swatches) {
		position: relative;
		z-index: 0;
	}
}

.components-circular-option-picker__option-wrapper {
	display: inline-block;
	height: $color-palette-circle-size;
	width: $color-palette-circle-size;
	vertical-align: top;
	transform: scale(1);

	@media not (prefers-reduced-motion) {
		transition: 100ms transform ease;
		will-change: transform;
	}

	&: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;
	// Sit below the option's color and selected-state UI.
	z-index: -1;
	// Show a thin circular outline in Windows high contrast mode, otherwise the button is invisible.
	/* stylelint-disable-next-line function-url-quotes -- We need quotes for the data URL to use the SVG inline. */
	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% !important;
	aspect-ratio: 1;
	border: none;
	border-radius: $radius-round;
	background: transparent;
	box-shadow: inset 0 0 0 ($color-palette-circle-size * 0.5);

	@media not (prefers-reduced-motion) {
		transition: 100ms box-shadow ease;
	}

	cursor: var(--wpds-cursor-control);

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

	&[aria-pressed="true"],
	&[aria-selected="true"] {
		box-shadow: inset 0 0 0 4px;
		position: relative;
		z-index: 1;
		overflow: visible;

		& + svg {
			position: absolute;
			left: 2px;
			top: 2px;
			border-radius: $radius-round;
			// Render the selected checkmark above the selected option.
			z-index: 2;
			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: $border-width solid transparent;
		box-sizing: inherit;
	}

	&:focus {
		&::after {
			content: "";
			border-radius: $radius-round;
			box-shadow: inset 0 0 0 2px $white;

			// Make sure it's always centered
			position: absolute;
			top: 50%;
			left: 50%;
			transform: translate(-50%, -50%);

			// Make sure dimensions account for border width
			border: #{ $border-width * 2 } solid $gray-700;
			width: calc(100% + #{ ( $border-width * 2 ) * 2 });
			height: calc(100% + #{ ( $border-width * 2 ) * 2 });
		}
	}

	&.components-button:focus {
		background-color: transparent;
		box-shadow: inset 0 0 0 ($color-palette-circle-size * 0.5);
		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;
	}
}