/**
 * NextGen Commerce: the shared storefront design (loaded only together with
 * the stylesheet of a page NextGen renders: the checkout, the sign-in pages).
 *
 * One set of tokens on .ngc-ui: the body of such a page, or the root of a
 * NextGen piece printed elsewhere. Lines and tints mix from currentColor, so
 * light and dark themes both work and text keeps the theme's own contrast.
 * The accent, the fill of NextGen's own main buttons and the corners come from
 * the store's settings or the theme (values printed inline after this file),
 * else WordPress's palette, else the text colour:
 * - --ngc-accent: highlights (selected options, progress, icons);
 * - --ngc-link: links and focus rings (the store's colour, which is checked
 *   for contrast; a theme's accent may be too light for text);
 * - --ngc-fill / --ngc-fill-text: main buttons, only under .ngc-ui--fill;
 *   under .ngc-ui--brand the store chose the colour itself.
 */

.ngc-ui {
	--ngc-accent: var(--wp--preset--color--primary, currentcolor);
	--ngc-link: currentcolor;
	--ngc-line: color-mix(in srgb, currentcolor 16%, transparent);
	--ngc-field: color-mix(in srgb, currentcolor 55%, transparent);
	--ngc-tint: color-mix(in srgb, currentcolor 4%, transparent);
	--ngc-radius: 8px;
	--ngc-button-radius: var(--ngc-radius);
	--ngc-danger: #b42318;
	--ngc-success: #1a7f37;
	--ngc-info: #0969da;

	/* Icons for masks (painted with currentColor where they are used). */
	--ngc-icon-check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E");
	--ngc-icon-close: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.25' stroke-linecap='round'%3E%3Cpath d='M6 6l12 12M18 6L6 18'/%3E%3C/svg%3E");
	--ngc-icon-lock: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 10.5h10a2 2 0 0 1 2 2V19a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2v-6.5a2 2 0 0 1 2-2zM8.5 10.5V7.5a3.5 3.5 0 0 1 7 0v3'/%3E%3C/svg%3E");
}

/* Text for screen readers only (themes name this class differently). */
.ngc-visually-hidden {
	position: absolute !important;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip-path: inset(50%);
	border: 0;
	white-space: nowrap;
}

/* Icons: sized with the text around them; themes' svg rules stay out. */
.ngc-icon,
.ngc-ui .ngc-icon {
	flex: none;
	width: 1.25em;
	height: 1.25em;
	margin: 0;
	vertical-align: -0.25em;
	fill: none;
	stroke: currentcolor;
}

/*
 * Badges (who a form is for). Real text; a slot's colours come from the
 * settings, else an outline in the text colour.
 */
.ngc-badge {
	display: inline-flex;
	align-items: center;
	gap: 0.25rem;
	width: fit-content;
	padding: 0.1875rem 0.5625rem;
	border: 1px var(--ngc-badge-border-style, solid) var(--ngc-badge-border, currentcolor);
	border-radius: var(--ngc-badge-radius, 999px);
	background: var(--ngc-badge-bg, transparent);
	color: var(--ngc-badge-color, inherit);
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	line-height: 1.4;
	text-transform: uppercase;
	white-space: nowrap;
}

/*
 * NextGen's own buttons (never the theme's button classes: they carry theme
 * scripts).
 */
.ngc-ui .ngc-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	box-sizing: border-box;
	min-height: 44px;
	margin: 0;
	padding: 0.5rem 1.25rem;
	border: 1px solid currentcolor;
	border-radius: var(--ngc-button-radius);
	background: transparent;
	box-shadow: none;
	color: inherit;
	font: inherit;
	font-weight: 600;
	letter-spacing: normal;
	line-height: 1.2;
	text-decoration: none;
	text-transform: none;
	cursor: pointer;
}

.ngc-ui .ngc-button:hover {
	background: var(--ngc-tint);
}

.ngc-ui.ngc-ui--fill .ngc-button--primary {
	border-color: var(--ngc-fill);
	background: var(--ngc-fill);
	color: var(--ngc-fill-text);
}

.ngc-ui.ngc-ui--fill .ngc-button--primary:hover {
	box-shadow: inset 0 0 0 100vmax color-mix(in srgb, var(--ngc-fill-text) 14%, transparent);
}

.ngc-ui .ngc-button:focus-visible,
.ngc-ui .ngc-link:focus-visible {
	outline: 2px solid var(--ngc-link);
	outline-offset: 2px;
}

.ngc-ui .ngc-button[aria-disabled="true"] {
	opacity: 0.6;
	cursor: progress;
}

/* A link with an arrow ("Request a business account →"). */
.ngc-ui .ngc-link {
	display: inline-flex;
	align-items: center;
	gap: 0.375rem;
	color: var(--ngc-link);
	font-weight: 600;
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 0.2em;
}

.ngc-ui .ngc-link:hover {
	text-decoration-thickness: 2px;
}

/* Right-to-left: arrows point the reading way. */
[dir="rtl"] .ngc-ui .ngc-link .ngc-icon {
	scale: -1 1;
}

@media (prefers-reduced-motion: no-preference) {

	.ngc-ui .ngc-link .ngc-icon {
		transition: translate 0.15s ease-out;
	}

	.ngc-ui .ngc-link:hover .ngc-icon {
		translate: 0.1875rem 0;
	}

	[dir="rtl"] .ngc-ui .ngc-link:hover .ngc-icon {
		translate: -0.1875rem 0;
	}

	.ngc-ui .ngc-button {
		transition: background-color 0.15s ease-out, box-shadow 0.15s ease-out;
	}
}