/**
 * BD Reservations — the reader-facing "Cancel loan" button.
 *
 * This plugin owns the button: it is rendered by
 * bd_reservations_render_cancel_loan_button() and described here and nowhere
 * else. That is deliberate, and it is the lesson of the watchlist button, whose
 * rules once lived in three stylesheets across three plugins so that which ones
 * won depended on enqueue order (see watchlist-button.css). A host that needs
 * the button to sit differently in its own furniture styles the *placement*
 * from its own sheet, scoped to its own container.
 *
 * Shape, size and colour come from bd-shared: the markup carries `bd-btn
 * bd-btn--sm bd-btn--ghost bd-btn--danger` alongside `.bd-btn-cancel-loan`, and what is left here is what
 * is specific to this one action.
 *
 * @package BdReservations
 */

/* Size comes from bd-shared's `bd-btn--sm` on the markup, never from here. */
.bd-btn-cancel-loan {
	margin-top: var(--bd-space-xs, 4px);
}

/* No colours here. Giving up a loan is destructive, so the button carries
   bd-shared's `bd-btn--danger` (red text and border on a soft fill, its hover a
   stronger fill, the shared focus outline); an older bd-shared without it shows
   the ghost button. The menu-item variant omits the modifier: a dropdown of
   neutral rows with one red row reads as an error. */

/* The busy state, set by assets/js/cancel-loan-button.js while the DELETE is in
   flight. Unlike the watchlist button there is no inert render-time state to
   distinguish it from: this button either applies and works, or is not rendered
   at all, because render_button() returns '' when the reader holds no slot. */
.bd-btn-cancel-loan[disabled] {
	opacity: 0.5;
	cursor: not-allowed;
	pointer-events: none;
}

/* The menu-item variant carries no appearance of its own on purpose. It exists
   so a host that puts this button inside its own dropdown has something to hook
   onto — bd-shop-quickview styles `.bd-sqv-menu .bd-btn-cancel-loan--menu-item`
   from its own stylesheet, because it owns that menu's look and this plugin
   does not.

   What belongs here is the whole of the undoing: every property bd-shared's
   .bd-btn sets that makes a control read as a button rather than as a row. The
   host cannot reliably do it — this sheet is enqueued from the render call, so
   it lands after the host's and wins the ties. Leaving any of it out shows: the
   first version of this block reset the box but not `justify-content`, and the
   label sat centred in a menu whose other four items are left-aligned. */
.bd-btn-cancel-loan--menu-item {
	margin-top: 0;
	width: 100%;
	border: 0;
	background: none;
	text-align: left;
	justify-content: flex-start;
	min-height: 0;
	font-weight: inherit;
	white-space: normal;
	color: inherit;
}

/* The icon a host passes in. Sized by the host's own rule where it has one
   (bd-shop-quickview gives `.bd-sqv-menu-item-icon` a 16px box); this only
   stops it shrinking when the label wraps. */
.bd-btn-cancel-loan img {
	flex: 0 0 auto;
}

/* The icon a host passes as a URL (`icon_url`, 0.85.0): a span filled with the
   text colour and cut to the icon's shape, so it follows the label in every
   state - bd-shared's danger red on the standalone button and its hover/focus
   fill, the host's row colour (hover included) in a menu - so it always has the
   label's own contrast. The URL arrives in the inline `--bd-res-icon`
   property, escaped by render_button(). Selected by its own class, not under
   `.bd-btn-cancel-loan`: currentColor sets no colour of its own, and the
   button's colours stay bd-shared's (SharedButtonClassesTest). */
.bd-res-icon {
	display: inline-block;
	flex: 0 0 auto;
	width: 16px;
	height: 16px;
	vertical-align: middle;
	background-color: currentColor;
	-webkit-mask-image: var(--bd-res-icon);
	mask-image: var(--bd-res-icon);
	-webkit-mask-position: center;
	mask-position: center;
	-webkit-mask-size: contain;
	mask-size: contain;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
}

/* Windows High Contrast would otherwise replace the fill with the system
   background and erase the icon; currentColor is already the forced text
   colour the button inherits. */
@media (forced-colors: active) {
	.bd-res-icon {
		forced-color-adjust: none;
		background-color: currentColor;
	}
}