$border-as-box-shadow: inset 0 0 0 $border-width rgba(0, 0, 0, 0.2);

.components-color-palette__custom-color-wrapper {
	position: relative;
	z-index: 0;
}
.components-color-palette__custom-color-button {
	position: relative;
	border: none;
	background: none;
	height: $grid-unit-80;
	width: 100%;
	box-sizing: border-box;
	cursor: pointer;
	// Show a thin outline in Windows high contrast mode.
	outline: 1px solid transparent;
	border-radius: $radius-medium $radius-medium 0 0;
	box-shadow: $border-as-box-shadow;

	&:focus {
		box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) $components-color-accent;
		// Show a outline in Windows high contrast mode.
		outline-width: 2px;
	}

	&::after {
		content: "";
		position: absolute;
		inset: $border-width;
		z-index: -1;
		// The background image creates a checkerboard pattern. Ignore rtlcss to
		// make it work both in LTR and RTL.
		// See https://github.com/WordPress/gutenberg/pull/42510
		/*rtl:begin:ignore*/
		background-image:
			repeating-linear-gradient(45deg, $gray-200 25%, transparent 25%, transparent 75%, $gray-200 75%, $gray-200),
			repeating-linear-gradient(45deg, $gray-200 25%, transparent 25%, transparent 75%, $gray-200 75%, $gray-200);
		background-position: 0 0, 24px 24px;
		/*rtl:end:ignore*/
		background-size: calc(2 * 24px) calc(2 * 24px);
		border-radius: $radius-medium - $border-width $radius-medium - $border-width 0 0;
	}
}

.components-color-palette__custom-color-text-wrapper {
	padding: $grid-unit-15 $grid-unit-20;
	border-radius: 0 0 $radius-medium $radius-medium;
	position: relative;
	font-size: $default-font-size;

	// Add a border with the same technique as the button above,
	// but only for left, bottom, and right sides.
	box-shadow:
		inset 0 -1 * $border-width 0 0 rgba(0, 0, 0, 0.2),
		inset $border-width 0 0 0 rgba(0, 0, 0, 0.2),
		inset -1 * $border-width 0 0 0 rgba(0, 0, 0, 0.2);
}

.components-color-palette__custom-color-name {
	color: $components-color-foreground;
	margin: 0 $border-width;
}

.components-color-palette__custom-color-value {
	color: $gray-700;

	&--is-hex {
		text-transform: uppercase;
	}

	// Add a zero-width space when this element is empty to preserve
	// a minimum height of 1 line of text, and avoid layout jumps.
	&:empty::after {
		content: "\200B";
		visibility: hidden;
	}
}