/*
 * The brandmark, and the rule that decides which of its parts is shown.
 *
 * Every representation a sponsor has is in the markup — see includes/brandmark.php for the
 * matrix. This file resolves it for a light field, which is the default and what a theme
 * declaring nothing gets.
 *
 * A dark field is declared by the surface through three custom properties. A surface is an
 * ancestor and knows nothing about the marks inside it, so it states the answer and every
 * brandmark below inherits it:
 *
 *     .my-dark-surface .ti-brandmark {
 *         --ti-brandmark-light: none;
 *         --ti-brandmark-dark: inline-block;
 *         --ti-brandmark-name: inline;
 *     }
 *     .my-dark-surface .ti-brandmark:has( .ti-brandmark__image--dark ) {
 *         --ti-brandmark-name: none;
 *     }
 *
 * The contract is properties and not a class on the mark, because the mark is written by this
 * plugin and the surface is chosen by whoever places it. A plugin that had to name a theme's
 * dark selectors would be a plugin that only works in that theme.
 *
 * `display` reads straight from the properties rather than being switched by `:has()` alone,
 * because `:has()` can ask whether a file exists and cannot ask whether it is the one on show.
 */

.ti-brandmark {
	--ti-brandmark-light: inline-block;
	--ti-brandmark-dark: none;
	--ti-brandmark-name: inline;

	display: inline-flex;
	align-items: center;
	min-width: 0;
	max-width: 100%;
}

/* On a light field the colour logo speaks, so the name steps back to being the `alt`. */
.ti-brandmark:has( .ti-brandmark__image--light ) {
	--ti-brandmark-name: none;
}

.ti-brandmark__image {
	width: auto;
	max-width: 100%;
	height: auto;
	/*
	 * Capped by the placement, never here: a credit under a title and a plate in a footer row
	 * are the same mark at two sizes, and only the placement knows which.
	 */
	max-height: var( --ti-brandmark-height, 3rem );
	object-fit: contain;
}

.ti-brandmark__image--light {
	display: var( --ti-brandmark-light );
}

.ti-brandmark__image--dark {
	display: var( --ti-brandmark-dark );
}

.ti-brandmark__name {
	display: var( --ti-brandmark-name );
	min-width: 0;
}