/**
 * Blend Builder styles.
 *
 * The bottle is decorative. Everything it conveys is also written out in the
 * text equivalent below it, so the experience never depends on colour.
 */

.bliss-blend {
	margin-top: var(--bliss-s7);
	padding-top: var(--bliss-s6);
	border-top: 1px solid var(--bliss-line-soft);
}

.bliss-blend__layout {
	display: grid;
	grid-template-columns: 220px minmax(0, 1fr);
	gap: var(--bliss-s6);
	align-items: start;
}

.bliss-blend__visual {
	position: sticky;
	top: 96px;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--bliss-s3);
	padding: var(--bliss-s5);
	border: 1px solid var(--bliss-line-soft);
	border-radius: var(--bliss-radius);
	background: var(--bliss-paper);
}

.bliss-bottle rect { transition: y var(--bliss-dur-slow) var(--bliss-ease), height var(--bliss-dur-slow) var(--bliss-ease); }

.bliss-blend__text {
	margin: 0;
	font-size: var(--bliss-fs-xs);
	color: var(--bliss-muted);
	text-align: center;
}

.bliss-blend__list { display: flex; flex-direction: column; gap: var(--bliss-s2); }

.bliss-blend__component {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 180px;
	gap: var(--bliss-s3);
	align-items: center;
	padding: 8px 10px;
	border: 1px solid var(--bliss-line-soft);
	border-radius: var(--bliss-radius);
	background: var(--bliss-paper);
}
.bliss-blend__component.is-active { border-color: var(--bliss-ink); }

.bliss-blend__pick {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 0;
	border: 0;
	background: none;
	cursor: pointer;
	text-align: left;
	font-size: var(--bliss-fs-sm);
}

.bliss-blend__swatch {
	width: 20px; height: 20px;
	border: 1px solid var(--bliss-line);
	border-radius: 50%;
	flex: none;
}

.bliss-blend__name { font-weight: 500; }

.bliss-blend__pct { display: flex; align-items: center; gap: var(--bliss-s2); }
.bliss-blend__pct input[type="range"] { width: 100%; accent-color: var(--bliss-ink); }
.bliss-blend__pct output { min-width: 44px; font-size: var(--bliss-fs-xs); font-weight: 600; text-align: right; }

.bliss-blend__quote {
	margin: var(--bliss-s4) 0;
	font-size: var(--bliss-fs-lg);
	font-weight: 700;
	min-height: 1.4em;
}

@media (max-width: 900px) {
	.bliss-blend__layout { grid-template-columns: 1fr; }
	.bliss-blend__visual { position: static; }
	.bliss-blend__component { grid-template-columns: 1fr; }
}