/**
 * Prices on the front end.
 *
 * Same rule the switcher stylesheet follows, and here it is the whole design:
 * declare nothing the theme should own. A price is a run of text inside
 * somebody's sentence, and it should look exactly like the sentence around it —
 * no colour, no size, no weight, no font.
 *
 * Every selector is wrapped in `:where()`, which gives it zero specificity.
 * That is not a style preference. A theme's `.price-box-amount` and this file's
 * `.rt-price` can end up on the same element or nested one inside the other,
 * and whichever stylesheet loads second would otherwise win by accident of
 * enqueue order. At zero specificity the theme always wins, on every property,
 * without anybody having to write `!important` anywhere.
 *
 * The selector is the attribute rather than the class, because a price is not
 * always wearing one: a [price] token can be given the theme's own class
 * instead, and an amount the overlay recognised in prose gets no class at all.
 * `data-rt-price` is the one thing every managed price has.
 */

:where([data-rt-price]) {
	/*
	 * Never break between a number and its symbol. This is the one piece of
	 * typography the plugin insists on, and it is safe to insist on: there is
	 * no theme whose design depends on "CA$" wrapping onto its own line.
	 */
	white-space: nowrap;

	/*
	 * And never let the price and the sentence around it reorder each other.
	 *
	 * A price is a run of mixed direction — "د.إ300" is a right-to-left symbol
	 * with a left-to-right number in it, and "-€300" is a sign the bidi
	 * algorithm treats as neutral — dropped into a paragraph whose direction is
	 * the theme's business, not ours. Unfenced, an Arabic symbol on an English
	 * page comes out with its letters the wrong way round, and a minus sign on
	 * an Arabic page moves to the far side of the number it belongs to.
	 *
	 * `isolate` is what <bdi> does: the price is laid out as one opaque object,
	 * so neither side can reach into the other. It changes nothing on a page
	 * with no right-to-left text on it.
	 */
	unicode-bidi: isolate;
}

/*
 * Lining figures of equal width, so a price that changes region does not reflow
 * the line around it.
 *
 * Opt-in rather than default, which it used to be. In a serif display face at
 * hero size, tabular figures are visibly not the same glyphs as the proportional
 * ones the designer chose — so a plugin turning them on silently was changing
 * the look of the very number it was asked to keep up to date. Sites that want
 * the stability can ask for it: [price key="…" class="rt-price rt-price--tabular"].
 */
:where(.rt-price--tabular) {
	font-variant-numeric: tabular-nums;
}

:where(.rt-price__prefix, .rt-price__suffix) {
	/* Author-supplied decoration: "from", "/mo". Never styled, only spaced. */
	white-space: nowrap;
}

:where(.rt-price__prefix) {
	margin-inline-end: 0.25em;
}

:where(.rt-price__suffix) {
	margin-inline-start: 0.25em;
}