.vfcp-wrap {
	position: relative;
	display: inline-flex;
	align-items: center;
	gap: .5rem;
	max-width: 100%;
}

.vfcp-wrap > input {
	min-width: 9rem;
}

.vfcp-colorized {
	transition: background-color .15s ease, color .15s ease, border-color .15s ease, box-shadow .15s ease;
}

.vfcp-button {
	width: 2.25rem;
	height: 2.25rem;
	border: 1px solid rgba(0, 0, 0, .18);
	border-radius: .375rem;
	background:
		linear-gradient(45deg, #ddd 25%, transparent 25%),
		linear-gradient(-45deg, #ddd 25%, transparent 25%),
		linear-gradient(45deg, transparent 75%, #ddd 75%),
		linear-gradient(-45deg, transparent 75%, #ddd 75%);
	background-color: #fff;
	background-position: 0 0, 0 .375rem, .375rem -.375rem, -.375rem 0;
	background-size: .75rem .75rem;
	cursor: pointer;
	padding: 0;
}

.vfcp-button span {
	display: block;
	width: 100%;
	height: 100%;
	border-radius: .3rem;
	box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .12);
}

.vfcp-popover {
	position: absolute;
	z-index: 100000;
	top: calc(100% + .5rem);
	right: 0;
	width: min(20rem, calc(100vw - 2rem));
	padding: .875rem;
	border: 1px solid rgba(0, 0, 0, .16);
	border-radius: .5rem;
	background: #fff;
	box-shadow: 0 .75rem 2rem rgba(0, 0, 0, .18);
	color: #222;
}

.vfcp-popover[hidden] {
	display: none;
}

.vfcp-sv {
	position: relative;
	height: 11rem;
	border-radius: .375rem;
	background:
		linear-gradient(to top, #000, transparent),
		linear-gradient(to right, #fff, transparent),
		hsl(var(--vfcp-hue, 210), 100%, 50%);
	cursor: crosshair;
	touch-action: none;
}

.vfcp-thumb {
	position: absolute;
	width: .9rem;
	height: .9rem;
	border: 2px solid #fff;
	border-radius: 50%;
	box-shadow: 0 0 0 1px rgba(0, 0, 0, .45);
	transform: translate(-50%, -50%);
	pointer-events: none;
}

.vfcp-row {
	display: grid;
	grid-template-columns: 4rem 1fr;
	align-items: center;
	gap: .625rem;
	margin-top: .75rem;
	font-size: .875rem;
}

.vfcp-row input[type="range"] {
	width: 100%;
}

.vfcp-output {
	display: grid;
	grid-template-columns: 1fr auto;
	gap: .5rem;
	margin-top: .75rem;
}

.vfcp-format {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: .35rem;
	margin-top: .75rem;
}

.vfcp-format button {
	border: 1px solid rgba(0, 0, 0, .18);
	border-radius: .375rem;
	background: #f7f7f7;
	padding: .35rem .5rem;
	cursor: pointer;
	font-size: .8125rem;
}

.vfcp-format button[aria-pressed="true"] {
	background: #1e88e5;
	border-color: #1e88e5;
	color: #fff;
}

.vfcp-output input {
	width: 100%;
	box-sizing: border-box;
}

.vfcp-actions {
	display: flex;
	gap: .5rem;
	margin-top: .75rem;
}

.vfcp-actions button,
.vfcp-copy {
	border: 1px solid rgba(0, 0, 0, .18);
	border-radius: .375rem;
	background: #f7f7f7;
	padding: .35rem .55rem;
	cursor: pointer;
}

.vfcp-palette {
	display: grid;
	grid-template-columns: repeat(8, 1fr);
	gap: .35rem;
	margin-top: .75rem;
}

.vfcp-swatch {
	aspect-ratio: 1;
	border: 1px solid rgba(0, 0, 0, .2);
	border-radius: .25rem;
	cursor: pointer;
}