/* Neon Designer — values 1:1 from the approved design (section "Designer"). */

.neon-designer {
	line-height: normal;
	display: flex;
	flex-wrap: wrap;
	gap: 48px 64px;
	align-items: stretch;
	font-family: 'Nunito', sans-serif;
	font-weight: 300;
	color: #ecebe8;
}

.neon-designer *,
.neon-designer *::before,
.neon-designer *::after {
	box-sizing: border-box;
}

.neon-designer__preview {
	flex: 2 1 560px;
	min-width: 0;
	position: relative;
	min-height: 460px;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 28px;
	padding: 48px 24px;
	box-sizing: content-box; /* as in the design: min-height 460px + padding */
	background:
		radial-gradient(ellipse 60% 55% at 50% 48%, var(--neon-wall) 0%, rgba(15, 15, 17, 0) 70%),
		radial-gradient(ellipse 80% 75% at 50% 50%, #1c1c20 0%, #0f0f11 75%);
}

.neon-designer__sign {
	font-family: var(--neon-font);
	font-size: var(--neon-size);
	line-height: 1.15;
	color: var(--neon-tube);
	text-shadow: var(--neon-glow);
	text-align: center;
	max-width: 100%;
	overflow-wrap: anywhere;
}

.neon-designer__ruler {
	display: flex;
	align-items: center;
	gap: 12px;
	font-size: 14px;
	color: #8d8b87;
	width: min(70%, 520px);
}

.neon-designer__line {
	flex: 1;
	height: 1px;
	background: rgba(255, 255, 255, 0.25);
}

.neon-designer__controls {
	flex: 1 1 320px;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 34px;
	justify-content: center;
}

.neon-designer__field {
	display: flex;
	flex-direction: column;
	gap: 12px;
	margin: 0;
}

label.neon-designer__field {
	gap: 10px;
}

.neon-designer__label {
	font-size: 14px;
	color: #8d8b87;
}

.neon-designer__input {
	background: transparent;
	border: none;
	border-bottom: 1px solid rgba(255, 255, 255, 0.3);
	border-radius: 0;
	color: #fff;
	font-family: 'Quicksand', 'Nunito', sans-serif;
	font-size: 28px;
	font-weight: 300;
	padding: 6px 0 12px;
	outline: none;
	width: 100%;
}

/* Focus is shown by the underline (the design has no box around the field). */
.neon-designer .neon-designer__input:focus,
.neon-designer .neon-designer__input:focus-visible {
	outline: none;
	border-bottom-color: #fff;
}

.neon-designer__chips,
.neon-designer__swatches {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}

.neon-designer__swatches {
	gap: 14px;
}

.neon-designer__chip {
	cursor: pointer;
	padding: 10px 18px;
	border-radius: 99px;
	font-size: 16px;
	line-height: normal; /* as in the design: the script font makes the row taller, chips stretch */
	background: transparent;
	border: 1px solid rgba(255, 255, 255, 0.22);
	color: #a9a7a2;
}

.neon-designer__chip--size {
	font-family: 'Nunito', sans-serif;
	font-size: 15px;
}

.neon-designer__chip[aria-pressed='true'] {
	border-color: #ecebe8;
	color: #fff;
}

.neon-designer__swatch {
	cursor: pointer;
	width: 30px;
	height: 30px;
	padding: 0;
	border: 0;
	border-radius: 99px;
	background: var(--swatch);
	box-shadow: 0 0 10px color-mix(in srgb, var(--swatch) 40%, transparent);
}

.neon-designer__swatch[aria-pressed='true'] {
	box-shadow: 0 0 0 3px #0f0f11, 0 0 0 4px #ecebe8, 0 0 16px var(--swatch);
}

.neon-designer button:focus-visible,
.neon-designer a:focus-visible {
	outline: 2px solid #ecebe8;
	outline-offset: 3px;
}

.neon-designer__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 14px;
	padding-top: 6px;
	font-size: 16px;
	font-weight: 400;
}

.neon-designer__btn {
	display: inline-block;
	border-radius: 99px;
	line-height: normal;
	text-decoration: none;
	cursor: pointer;
}

.neon-designer__btn:hover {
	text-decoration: none;
}

.neon-designer__btn--solid {
	padding: 16px 30px;
	background: #ecebe8;
	color: #0a0a0b;
}

.neon-designer__btn--solid:hover {
	background: #fff;
	color: #0a0a0b;
}

.neon-designer__btn--outline {
	padding: 15px 29px;
	border: 1px solid rgba(255, 255, 255, 0.4);
	color: #fff;
}

.neon-designer__btn.is-disabled {
	cursor: default;
}

/* An external designer app takes over the whole mount point. */
.neon-designer.is-app > :not(.neon-designer__app) {
	display: none;
}