/**
 * Fill-my-case control and dialog. Deliberately small and unopinionated:
 * this renders inside somebody else's theme, so it borrows the theme's
 * type and only asserts what it must.
 */

.plonk-fill-open {
	appearance: none;
	border: 1px solid currentColor;
	background: none;
	color: inherit;
	font: inherit;
	font-size: 0.9em;
	padding: 6px 12px;
	border-radius: 999px;
	cursor: pointer;
}

.plonk-fill-open:hover,
.plonk-fill-open:focus-visible {
	background: rgba( 0, 0, 0, 0.06 );
}

.plonk-fill-block {
	margin: 0 0 16px;
}

.plonk-fill-dialog {
	border: none;
	border-radius: 10px;
	padding: 24px;
	max-width: 420px;
	width: calc( 100% - 32px );
	box-shadow: 0 10px 40px rgba( 0, 0, 0, 0.25 );
	color: inherit;
}

.plonk-fill-dialog::backdrop {
	background: rgba( 0, 0, 0, 0.45 );
}

.plonk-fill-dialog h2 {
	margin: 0 0 4px;
	font-size: 1.25em;
}

.plonk-fill-lead {
	margin: 0 0 16px;
	opacity: 0.75;
	font-size: 0.9em;
}

.plonk-fill-close {
	float: right;
	appearance: none;
	border: none;
	background: none;
	font-size: 1.5em;
	line-height: 1;
	cursor: pointer;
	color: inherit;
	opacity: 0.5;
}

.plonk-fill-choices {
	display: grid;
	gap: 8px;
}

.plonk-fill-choice {
	display: flex;
	align-items: center;
	gap: 10px;
	width: 100%;
	padding: 12px 14px;
	border: 1px solid rgba( 0, 0, 0, 0.15 );
	border-radius: 8px;
	background: none;
	font: inherit;
	color: inherit;
	cursor: pointer;
	text-align: left;
}

.plonk-fill-choice:hover,
.plonk-fill-choice:focus-visible {
	border-color: currentColor;
}

.plonk-fill-choice small {
	margin-left: auto;
	opacity: 0.6;
}

.plonk-fill-dot {
	flex: 0 0 auto;
	width: 14px;
	height: 14px;
	border-radius: 50%;
	box-shadow: inset 0 0 0 1px rgba( 0, 0, 0, 0.2 );
}

.plonk-fill-status:empty {
	display: none;
}

.plonk-fill-status {
	margin: 14px 0 0;
	font-size: 0.9em;
}

.plonk-fill-dialog.is-busy .plonk-fill-choice {
	opacity: 0.5;
	pointer-events: none;
}

/* No <dialog> support: the JS drops the open attribute on instead, so
   give it somewhere sensible to sit rather than mid-document. */
.plonk-fill-dialog[open]:not(:modal) {
	position: fixed;
	inset: auto 16px 16px;
	margin: 0 auto;
	z-index: 99999;
}

/* The cart line: what is incomplete and what finishing it is worth. */
.plonk-fill-block {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px;
	padding: 14px 16px;
	border: 1px solid rgba( 0, 0, 0, 0.12 );
	border-radius: 8px;
}

.plonk-fill-line {
	margin: 0;
	flex: 1 1 260px;
}

/* Two labels ship in the crate-bar button; the screen picks one. The
   long form pushed "View cart" off the side of a phone. */
.plonk-fill-brief { display: none; }

@media (max-width: 600px) {
	.plonk-fill-full { display: none; }
	.plonk-fill-brief { display: inline; }
	.plonk-fill-open { padding: 6px 10px; font-size: 13px; }
}