/**
 * Storefront decoration picker.
 *
 * Deliberately quiet. This renders inside a reseller's own theme, so it inherits the theme's
 * typeface, its input styling and its colours wherever it can, and adds only the structure a
 * grouped set of fields needs. Every colour it does set is a custom property a merchant can
 * override from their own stylesheet without touching this file or unhooking anything.
 *
 * There is no Barron branding here on purpose: the admin screens are Barron's, because a reseller
 * working in them is working with Barron. The storefront belongs to the reseller.
 *
 * @package Barron\StockFeed
 */

.barron-branding {
	--barron-branding-border: rgba( 0, 0, 0, 0.14 );
	--barron-branding-surface: rgba( 0, 0, 0, 0.02 );
	--barron-branding-muted: rgba( 0, 0, 0, 0.6 );
	--barron-branding-accent: currentColor;
	--barron-branding-radius: 6px;
	--barron-branding-gap: 0.85rem;

	margin: 0 0 1.5rem;
	padding: 1rem 1.15rem;
	border: 1px solid var( --barron-branding-border );
	border-radius: var( --barron-branding-radius );
	background: var( --barron-branding-surface );
}

/* Themes that ship a dark palette get a border and surface that read against it, without this
   file needing to know what the theme's background actually is. */
@media ( prefers-color-scheme: dark ) {

	.barron-branding {
		--barron-branding-border: rgba( 255, 255, 255, 0.2 );
		--barron-branding-surface: rgba( 255, 255, 255, 0.04 );
		--barron-branding-muted: rgba( 255, 255, 255, 0.66 );
	}
}

.barron-branding__toggle {
	display: flex;
	align-items: center;
	gap: 0.6rem;
	margin: 0;
	font-weight: 600;
	cursor: pointer;
}

.barron-branding__toggle input {
	margin: 0;
	flex: 0 0 auto;
}

.barron-branding__panel {
	margin-top: var( --barron-branding-gap );
	display: grid;
	gap: var( --barron-branding-gap );
}

/* [hidden] is only `display: none` in the user-agent stylesheet, so any class selector that sets
   `display` beats it. The rules above and below do exactly that, which meant the picker sat open on
   page load on any theme that does not itself declare `[hidden] { display: none }` — most classic
   themes do, most block themes do not, and the bug hid behind that for a while. Stated explicitly
   here so the picker's collapsed state does not depend on the theme. */
.barron-branding[hidden],
.barron-branding__panel[hidden],
.barron-branding__field[hidden] {
	display: none;
}

/* Two columns once there is room for them. The fields are short and pairing them keeps the
   add-to-cart button above the fold on a laptop, which is where the decision is made. */
@media ( min-width: 30rem ) {

	.barron-branding__panel {
		grid-template-columns: 1fr 1fr;
	}

	.barron-branding__panel > .barron-branding__price,
	.barron-branding__panel > .barron-branding__field:has( textarea ) {
		grid-column: 1 / -1;
	}
}

.barron-branding__field {
	display: flex;
	flex-direction: column;
	gap: 0.3rem;
	margin: 0;
}

.barron-branding__field > label {
	font-size: 0.85em;
	font-weight: 600;
}

/* Inputs are left to the theme wherever possible; only width and a sane minimum height are
   asserted, because a theme that styles its own selects will style these too. */
.barron-branding__field select,
.barron-branding__field input[type="text"],
.barron-branding__field input[type="file"],
.barron-branding__field textarea {
	width: 100%;
	max-width: 100%;
	box-sizing: border-box;
}

.barron-branding__field textarea {
	resize: vertical;
}

.barron-branding__hint {
	font-size: 0.8em;
	line-height: 1.4;
	color: var( --barron-branding-muted );
}

.barron-branding__price {
	margin: 0;
	padding-top: 0.6rem;
	border-top: 1px solid var( --barron-branding-border );
	font-weight: 600;
	color: var( --barron-branding-accent );
}

.barron-branding__price:empty {
	display: none;
}