/**
 * What this plugin draws inside the Lumise editor, and the editor's chrome in
 * the shop's brand.
 *
 * The editor is the vendor's application. Its colour comes from Lumise's own
 * `primary_color` setting (the brand accent, `bin/content/50-design.php`),
 * compiled by Lumise into its `custom.css`; its typeface and the tokens are
 * loaded by `Designer\EditorWording::chrome()`, because the editor's document
 * loads neither. This file brings the controls in the top bar and the product
 * panel to the standard's shapes and sizes (docs/design-standards.md §5)
 * without moving Lumise's layout: the bar stays 54px tall and its controls
 * stay where Lumise put them.
 *
 * The caption is deliberately quiet, because the artwork on the canvas is what
 * the customer is there to look at. It says the size and which way up, the two
 * facts the canvas itself cannot say, and nothing else.
 */

.pod-canvas-caption {
	position: absolute;
	z-index: 5;

	/*
	 * Centred over the sheet rather than pinned to a corner. Lumise centres the
	 * canvas in this area at every zoom, so centring here puts the caption
	 * directly above the thing it describes without measuring anything — and a
	 * caption in the far corner reads as chrome belonging to the application
	 * rather than a label belonging to the piece.
	 */
	top: var( --pod-near );
	left: 50%;
	transform: translateX( -50% );

	padding: var( --pod-hair ) var( --pod-tight );
	border-radius: var( --pod-radius-pill );

	background: var( --pod-ink );
	color: var( --pod-on-ink );

	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0;
	line-height: 1.4;
	white-space: nowrap;

	/*
	 * The canvas underneath is a drawing surface, and Lumise reads pointer
	 * events on it to select and drag objects. A caption that swallowed a click
	 * near the top-left corner would look like the editor ignoring the customer.
	 */
	pointer-events: none;
}

/*
 * `hidden` is how the script says "this product has no size of ours", and a
 * `position: absolute` element ignores the attribute's default `display: none`
 * in some stylesheets' reset order. Stated here so it cannot be lost.
 */
.pod-canvas-caption[hidden] {
	display: none;
}


/*
 * "See it on your wall", inside the vendor's editor.
 *
 * Top-right of the canvas area: the caption owns the top centre, the zoom
 * control owns the bottom right, and this is the corner left. A compact
 * secondary button (40px, §5): it is a toolbar control over the canvas, and
 * the screen's one primary action is Add to cart.
 */
.pod-canvas-wall {
	position: absolute;
	top: var( --pod-near );
	right: var( --pod-near );
	z-index: 6;

	align-items: center;
	box-sizing: border-box;
	display: inline-flex;
	min-height: var( --pod-btn-compact-h );
	padding: 0 var( --pod-near );
	border: 1px solid var( --pod-field-border );
	border-radius: var( --pod-radius-pill );

	background: var( --pod-surface );
	color: var( --pod-ink );

	cursor: pointer;
	font-family: inherit;
	font-size: var( --pod-btn-compact-size );
	font-weight: 700;
	letter-spacing: 0;
	line-height: 1.2;
	white-space: nowrap;
	transition:
		background-color var( --pod-fast ) var( --pod-ease ),
		border-color var( --pod-fast ) var( --pod-ease );
}

.pod-canvas-wall:hover {
	background: var( --pod-surface-2 );
	border-color: var( --pod-ink );
}

.pod-canvas-wall:focus-visible {
	outline: var( --pod-focus-width ) solid var( --pod-accent );
	outline-offset: var( --pod-focus-offset );
}

/*
 * On a phone the canvas is too narrow for the caption centred beside the
 * button (at 390px "24 × 18 in · Landscape" ran under "See it on your wall"),
 * so the caption drops below the button's row.
 */
@media ( max-width: 599px ) {
	.pod-canvas-caption {
		top: calc( var( --pod-near ) + var( --pod-btn-compact-h ) + var( --pod-tight ) );
	}
}

/*
 * The dialog this opens is rendered on a page it has no layout stake in, so the
 * wrapper must take up no room. Without this it is a block element between the
 * editor and the end of the document, which on a short viewport adds a scrollbar
 * to an application designed to have none.
 */
.pod-viz--detached {
	margin: 0;
}

/*
 * The room preview's typeface, inside the editor: nothing here. `visualizer.css`
 * gives its controls `font: inherit`, and the dialog is appended to `<body>`,
 * outside Lumise's chrome, where Lumise sets no font; `EditorWording::chrome()`
 * gives it the theme's family along with Lumise's own elements.
 */

/*
 * The add-to-cart confirmation while the design is sent to the shop's cart
 * (`editor-add-to-cart.js`).
 *
 * Lumise shows a check mark and "Your cart has been updated!" the instant the
 * design is saved in the browser, which is before the shop's cart has it. So
 * while it is being sent the check mark is hidden and the onward links wait;
 * the check mark comes back once it is in the cart. A failed send hides the
 * check mark too, since nothing was added, and offers "Try again".
 */
#lumise-update-cart-confirm:is( [data-pod-cart='pending'], [data-pod-cart='failed'] ) img {
	visibility: hidden;
}

#lumise-update-cart-confirm [aria-disabled='true'] {
	cursor: progress;
	opacity: 0.45;
	pointer-events: none;
}

#lumise-update-cart-confirm[data-pod-cart='failed'] em {
	color: var( --pod-danger );
}


/*
 * Sentence case, in the vendor's chrome too (`docs/content-style.md`).
 *
 * Lumise's stylesheet sets `uppercase` or `capitalize` on some fifty elements
 * (its buttons, tabs, panel headings, the add-to-cart button, the loading
 * message), so the words written for it would show as "ADD TO CART" or "Add To
 * Cart" whatever they said. One rule over the whole editor rather than fifty:
 * a list of the vendor's selectors would miss the next one it adds. Its own
 * dialogs and lightbox are appended outside `#LumiseDesign`, so they are named.
 *
 * Only CSS casing is undone. Text a customer types keeps its case, and canvas
 * text is drawn by the canvas, not by CSS. The keyboard keys in Help are
 * written with their capitals in the `helps` setting (Ctrl, Shift, Arrow keys),
 * so they need no transform either.
 */
#LumiseDesign,
#LumiseDesign *,
#LumiseDesign::before,
#LumiseDesign *::before,
#LumiseDesign *::after,
.lumise-lightbox,
.lumise-lightbox *,
.lumise-lightbox *::before,
.lumise-lightbox *::after {
	text-transform: none !important;
}

/*
 * The tracking Lumise adds to those uppercase labels, which reads as gaps once
 * the letters are lowercase.
 */
#LumiseDesign[data-processing="true"]::before,
div#LumiseDesign div#lumise-navigations .back_shop,
#LumiseDesign #lumise-left .lumise-left-nav li,
#LumiseDesign #lumise-left ul.lumise-left-tabs li,
#LumiseDesign #lumise-left .lumise-tab-body-wrp > header > .lumise-xitems-label,
#LumiseDesign #lumise-cliparts header > h3,
#LumiseDesign #lumise-templates header > h3,
#LumiseDesign .lumise-btn-primary,
#LumiseDesign button.lumise-btn,
.lumise-lightbox h3 {
	letter-spacing: normal !important;
}

/* --- The top bar -------------------------------------------------------------- */

/*
 * Lumise's bar is the accent (its `primary_color`), so its text is the white
 * that measures 4.51:1 on it; Lumise's own off-white fell just short.
 */
div#LumiseDesign div#lumise-navigations ul[data-block] {
	color: var( --pod-on-ink );
}

/*
 * Lumise shows the File menu as a second bar under 1170px, in a cyan of its
 * own rather than its primary colour.
 */
div#LumiseDesign div#lumise-navigations ul[data-block][data-resp='file'].active {
	background: var( --pod-accent );
}

/*
 * The bar's secondary controls, "Back to shop" and the cart: outlined in white
 * on the accent (a secondary button reversed), 40px and centred in the 54px
 * bar. Lumise drew them as dark grey blocks, 36px at a 3px radius.
 */
div#LumiseDesign div#lumise-navigations .back_shop {
	background: transparent;
	border: 1px solid var( --pod-on-ink );
	border-radius: var( --pod-radius-pill );
	box-sizing: border-box;
	color: var( --pod-on-ink ) !important;
	font-size: var( --pod-btn-compact-size );
	font-weight: 700;
	height: var( --pod-btn-compact-h );
	line-height: calc( var( --pod-btn-compact-h ) - 2px );
	margin-top: 7px;
	padding: 0 var( --pod-near );
}

div#LumiseDesign div#lumise-navigations .back_shop:hover {
	background: var( --pod-accent-deep );
}

/* The cart: an icon button, 40px and round. */
div#LumiseDesign div#lumise-navigations ul[data-block='right'] button#lumise-addToCart {
	background: transparent;
	border-radius: var( --pod-radius-pill );
	box-sizing: border-box;
	height: var( --pod-btn-compact-h );
	margin-top: 7px;
	min-width: var( --pod-btn-compact-h );
	padding: 0;
}

div#LumiseDesign div#lumise-navigations ul[data-block='right'] button#lumise-addToCart:hover {
	background: var( --pod-accent-deep );
}

/* Its count, as on the floating cart button: ink, never Lumise's red. */
div#LumiseDesign div#lumise-navigations ul[data-block='right'] button#lumise-addToCart small {
	background: var( --pod-ink );
	border-radius: var( --pod-radius-pill );
	color: var( --pod-on-ink );
}

/*
 * Add to cart, the screen's one primary action. A pill, 40px (the most the
 * 54px bar holds with room around it), in white with the accent's deep shade
 * for its label: an accent-filled button would vanish into an accent bar.
 * Lumise's own rule carries `!important`, so these do too.
 */
div#LumiseDesign div#lumise-navigations #lumise-proceed > button#lumise-cart-action {
	background: var( --pod-surface ) !important;
	border: 1px solid var( --pod-surface );
	border-radius: var( --pod-radius-pill );
	box-sizing: border-box;
	color: var( --pod-accent-deep );
	font-size: var( --pod-btn-compact-size );
	font-weight: 700;
	height: var( --pod-btn-compact-h );
	line-height: 1.2;
	margin-top: 7px;
	padding: 0 var( --pod-apart );
	transition:
		background-color var( --pod-fast ) var( --pod-ease ),
		color var( --pod-fast ) var( --pod-ease );
}

div#LumiseDesign div#lumise-navigations #lumise-proceed > button#lumise-cart-action:hover {
	background: var( --pod-accent-wash ) !important;
	color: var( --pod-accent-deep );
}

/*
 * On a phone Lumise hides everything inside Add to cart (`responsive.css`,
 * under 737px, to save room in the bar), which left an empty button. It
 * becomes a 40px round cart icon there: the label stays in the button,
 * visually hidden, so the button is still named "Add to cart" (or "Update
 * cart", which Lumise's script writes into the same element). 736px is
 * Lumise's own breakpoint, matched so the two change together.
 */
@media ( max-width: 736px ) {
	div#LumiseDesign div#lumise-navigations #lumise-proceed > button#lumise-cart-action {
		align-items: center;
		display: inline-flex;
		justify-content: center;
		padding: 0;
		width: var( --pod-btn-compact-h );
	}

	div#LumiseDesign div#lumise-navigations #lumise-proceed > button#lumise-cart-action > span {
		clip: rect( 0 0 0 0 );
		clip-path: inset( 50% );
		display: block !important;
		height: 1px;
		overflow: hidden;
		position: absolute;
		white-space: nowrap;
		width: 1px;
	}

	/* Lumise shows its arrow icon here with `!important`; the cart icon replaces it. */
	div#LumiseDesign div#lumise-navigations ul[data-block='right'] > li#lumise-proceed > button#lumise-cart-action > i {
		display: none !important;
	}

	div#LumiseDesign div#lumise-navigations #lumise-proceed > button#lumise-cart-action::before {
		background: currentColor;
		content: '';
		display: block;
		height: 20px;
		mask: url( "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 18c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zM1 2v2h2l3.6 7.59-1.35 2.45c-.16.28-.25.61-.25.96 0 1.1.9 2 2 2h12v-2H7.42c-.14 0-.25-.11-.25-.25l.03-.12.9-1.63h7.45c.75 0 1.41-.41 1.75-1.03l3.58-6.49A1 1 0 0 0 20 4H5.21l-.94-2H1zm16 16c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z'/%3E%3C/svg%3E" ) center / contain no-repeat;
		width: 20px;
	}
}

/* The bar's controls and menus take the standard's focus ring, in white on the accent. */
div#LumiseDesign div#lumise-navigations :is( a, button, [tabindex] ):focus-visible {
	outline: var( --pod-focus-width ) solid var( --pod-on-ink );
	outline-offset: var( --pod-focus-offset );
}

/* --- Lumise's own teal ------------------------------------------------------- */

/*
 * Lumise hard-codes a teal (#3fc7ba) in some sixty rules of `app.css` that its
 * `primary_color` setting does not reach: hover and selected states, tabs, the
 * upload buttons, toggles, sliders, the product picker. No setting holds it, so
 * the same selectors are repeated here, later in the page, with the brand's.
 *
 * Two shades, by what is underneath. On Lumise's dark side panel, zoom control
 * and product categories, text and icons take the light blue made for dark
 * bands (`--pod-on-ink-accent`; the accent measures about 2:1 there). Fills,
 * edges and anything on white take the accent.
 */

/* Text and icons on the dark panels. */
div#LumiseDesign div#lumise-left > div.lumise-left-nav-wrp > ul.lumise-left-nav li:hover,
#lumise-cliparts .lumise-cliparts-search i,
#lumise-left .lumise-xitems-search i,
#lumise-templates .lumise-templates-search i,
#lumise-cliparts .lumise-cliparts-search i:hover,
#lumise-templates .lumise-templates-search i:hover,
#lumise-cliparts .lumise-cliparts-category.selected > label,
#lumise-templates .lumise-templates-category.selected > label,
#lumise-cliparts .lumise-cliparts-category:hover,
#lumise-templates .lumise-templates-category:hover,
#lumise-cliparts #lumise-cliparts-list > header span.lumise-category-search:hover > i,
#lumise-templates #lumise-templates-list > header span.lumise-category-search:hover > i,
#lumise-cliparts #lumise-cliparts-list > header i:hover,
#lumise-templates #lumise-templates-list > header i:hover,
#lumise-left #lumise-x-thumbn-preview > header > span,
#lumise-left div.lumise-pagination > i[data-page]:not( .disabled ):hover,
div#lumise-product nav > price,
div#lumise-zoom-wrp > i:hover,
div#LumiseDesign div#lumise-navigations ul[data-block='right'] > li[data-tool='languages'] li:hover > i {
	color: var( --pod-on-ink-accent );
}

#lumise-shapes svg:hover {
	fill: var( --pod-on-ink-accent );
}

/* Text and icons on white: the image and text toolbar, the picker, saved designs. */
div#lumise-top-tools[data-view='image'] ul.lumise-top-nav[data-mode='image'] > li:hover > i,
div#lumise-top-tools ul[data-mode='text'] .text-format.selected,
div#lumise-top-tools > ul.lumise-top-nav > li.active [data-tip='true'] > i,
div#lumise-top-tools > ul.lumise-top-nav > li:hover [data-tip='true'] > i,
div#lumise-top-tools > ul.lumise-top-nav li[data-tool] ul[data-func='fonts'] li font.selected,
div#lumise-top-tools > ul.lumise-top-nav li[data-tool] ul[data-func='fonts'] li font.selected::after,
div#lumise-top-tools > ul.lumise-top-nav li[data-tool] ul[data-view='sub'].list li a:hover,
div#lumise-top-tools > ul.lumise-top-nav li[data-tool='text-align'] li i.selected,
div#lumise-top-tools > ul.lumise-top-nav li[data-tool='text-align'] li i:hover,
div#lumise-top-tools > ul.lumise-top-nav li[data-tool='masks'] ul[data-view='sub'] li[data-view='list'] > span:hover,
div#lumise-top-tools > ul.lumise-top-nav li[data-tool='position'] ul[data-view='sub'] li[data-position]:hover,
ul#lumise-saved-designs li > button.disabled,
ul#lumise-saved-designs li > button:not( .disabled ):hover,
#lumise-lightbox .lumise-crop-btns li[data-func='save'],
#lumise-lightbox #lumise-change-products-wrp ul[data-view='products'] li:not( [data-current='true'] ):hover span[data-view='name'],
#lumise-lightbox #lumise-change-products-wrp ul[data-view='products'] li span[data-view='price'] {
	color: var( --pod-accent );
}

.lumise-color {
	color: var( --pod-accent ) !important;
}

/* Fills, with white on them. */
div#LumiseDesign div#lumise-navigations ul[data-block] li[data-view='list'] ul[data-view='sub'] li:not( [data-view='sp'] ):hover,
div#LumiseDesign div#lumise-navigations ul[data-block='right'] > li[data-tool='languages'] i,
div#LumiseDesign div#lumise-left ul.lumise-left-tabs li[data-active='true'],
#lumise-left #lumise-cliparts ul.lumise-pagination li:hover,
#lumise-left #lumise-cliparts ul.lumise-pagination li[data-selected='true'],
#lumise-left #lumise-x-thumbn-preview .lumise-categories-wrp ul li::after,
#lumise-left #lumise-x-thumbn-preview .lumise-categories-wrp ul li.active p,
#lumise-left #lumise-uploads header button.active,
#lumise-left #lumise-uploads header button:hover,
div#lumise-top-tools > ul.lumise-top-nav li ul[data-view='sub'] li h3 input[type='range']:not( .nol )::before,
#LumiseDesign button.lumise-btn,
div#lumise-top-tools > ul.lumise-top-nav li button,
div#lumise-top-tools > ul.lumise-top-nav li[data-tool='zoom'] ul[data-view='sub'] li li[data-pos].choosed,
ul#lumise-saved-designs li[data-editing]::after,
#lumise-lightbox .lumise-lightbox-form > p button.primary,
#lumise-lightbox .lumise-crop-btns li.active,
#lumise-lightbox #lumise-change-products-wrp ul[data-view='categories'] li.active,
#lumise-lightbox #lumise-change-products-wrp ul[data-view='products'] li[data-current='true']::after,
.lumise-switch .lumise-toggle-button:checked ~ .lumise-toggle-label {
	background: var( --pod-accent );
}

/* On its own: a browser that does not know this pseudo-element drops the whole rule. */
#LumiseDesign input[type='range']::-webkit-slider-thumb {
	background: var( --pod-accent );
}

#lumise-lightbox #lumise-change-products-wrp ul[data-view='categories'] li.active {
	border-bottom-color: var( --pod-accent );
}

/* Edges: focused fields, the drop zone, the chosen print option. */
#lumise-cliparts .lumise-cliparts-search input:focus,
#lumise-templates .lumise-templates-search input:focus,
#lumise-cliparts #lumise-cliparts-list > header span.lumise-category-search input:focus,
#lumise-templates #lumise-templates-list > header span.lumise-category-search input:focus,
#lumise-left #lumise-upload-form.is-dragover,
#lumise-left div.lumise-pagination select:hover {
	border-color: var( --pod-accent );
}

#lumise-left #lumise-x-thumbn-preview .lumise-categories-wrp ul li::before {
	border-color: var( --pod-accent );
}

#lumise-left #lumise-uploads header button.active::after {
	border-top-color: var( --pod-accent );
}

.lumise-cart-options .lumise-prints .lumise_form_group .lumise_form_content input:checked + label {
	border-color: var( --pod-accent );
	box-shadow: 0 0 0 1px var( --pod-accent );
}

div#lumise-top-tools > ul.lumise-top-nav #lumise-image-fx-fx li:hover,
div#lumise-top-tools > ul.lumise-top-nav #lumise-image-fx-fx li[data-selected='true'] {
	border-color: var( --pod-accent );
	color: var( --pod-accent );
}

div#lumise-top-tools > ul.lumise-top-nav li[data-tool] ul[data-view='sub'] li#lumise-text-effect span[data-sef='images'] img:hover {
	outline-color: var( --pod-accent );
}

/* The snap guides drawn over the canvas. */
div#lumise-main .canvas-wrapper .lumise-snap-line-y {
	border-right-color: var( --pod-accent );
}

div#lumise-main .canvas-wrapper .lumise-snap-line-x {
	border-bottom-color: var( --pod-accent );
}

/* --- The product panel --------------------------------------------------------- */

/* "Change product": a compact secondary button. */
div#LumiseDesign button#lumise-change-product {
	background: var( --pod-surface );
	border: 1px solid var( --pod-field-border );
	border-radius: var( --pod-radius-pill );
	box-sizing: border-box;
	color: var( --pod-ink );
	font-size: var( --pod-btn-compact-size );
	font-weight: 700;
	min-height: var( --pod-btn-compact-h );
	padding: 0 var( --pod-near );
}

div#LumiseDesign button#lumise-change-product:hover {
	background: var( --pod-surface-2 );
	border-color: var( --pod-ink );
}

div#LumiseDesign button#lumise-change-product:focus-visible {
	outline: var( --pod-focus-width ) solid var( --pod-accent );
	outline-offset: var( --pod-focus-offset );
}

/* --- Motion -------------------------------------------------------------------- */

@media ( prefers-reduced-motion: reduce ) {
	.pod-canvas-wall,
	div#LumiseDesign div#lumise-navigations #lumise-proceed > button#lumise-cart-action {
		transition: none;
	}
}