/*
 * ILM Components -- Button.
 *
 * A block wrapper carrying the alignment, and an `inline-flex` control inside
 * it. The wrapper is why alignment works at all: the control is only as wide
 * as its label, and an element that hugs its content cannot place itself.
 *
 * `inline-flex` on the control rather than `inline-block`, so that a label and
 * an icon sit on one line, centred against each other, with a `gap` between
 * them instead of a space character whose width depends on the font.
 */

.ilm-component--basic-button {
	display: block;
}

.ilm-button {
	--ilm-c-btn-bg: var(--ilm-color-primary, #1d63c8);
	--ilm-c-btn-fg: var(--ilm-color-on-primary, #ffffff);
	--ilm-c-btn-border: var(--ilm-c-btn-bg);

	display: inline-flex;
	align-items: center;
	gap: 0.5em;

	background-color: var(--ilm-c-btn-bg);
	border: 1px solid var(--ilm-c-btn-border);
	border-radius: var(--ilm-radius-md, 0.375rem);
	color: var(--ilm-c-btn-fg);
	font-family: inherit;
	font-weight: var(--ilm-font-weight-medium, 500);
	line-height: 1.4;

	/*
	 * `text-decoration: none` because this is an anchor and would otherwise be
	 * underlined. The underline argument that applies to links in prose does
	 * not apply here: a button is identifiable by being a button, and it is
	 * not embedded in a run of text where it needs to be told apart from it.
	 */
	text-decoration: none;

	/*
	 * Left-aligned inside itself regardless of the wrapper's alignment. The
	 * `text-align` that places the button must not also shove its own label
	 * around, and `text-align` inherits -- so it is reset here.
	 */
	text-align: start;

	cursor: pointer;
	padding-block: var(--ilm-c-btn-pad-block, 0.5em);
	padding-inline: var(--ilm-c-btn-pad-inline, 1.1em);

	/*
	 * A state change is eased rather than snapped (1.26.0): the hover
	 * darkening, and whatever hover and focus colours an author set. Short,
	 * and colour only -- nothing moves -- and switched off below for a
	 * reader who asked for less motion.
	 */
	transition:
		color 0.15s ease,
		background-color 0.15s ease,
		border-color 0.15s ease,
		filter 0.15s ease;
}

.ilm-button:hover {
	/*
	 * A filter rather than a second colour per variant. It darkens whatever
	 * the variant resolved to, including a theme's own token, so a site that
	 * overrides the primary colour gets a matching hover state without
	 * declaring one.
	 */
	filter: brightness(0.92);
}

/*
 * Pressed (1.39.0): a step darker than pointed at, so a press is felt even
 * where the hover is the author's own colour. Colour only; nothing moves.
 */
.ilm-button:active {
	filter: brightness(0.85);
}

/*
 * A visible focus ring, always. `:focus-visible` shows it for keyboard users
 * and not on a mouse click, and the outline has an offset so it is legible
 * against the button's own background.
 *
 * `outline` rather than `box-shadow`, because Windows High Contrast Mode
 * preserves outlines and discards box-shadows.
 */
.ilm-button:focus-visible {
	outline: 2px solid var(--ilm-color-focus, currentColor);
	outline-offset: 2px;
}

.ilm-button__icon {
	flex: none;
	inline-size: 1.1em;
	block-size: 1.1em;
}

/*
 * A picture before the label (1.25.0): one line of text high, at its own
 * proportions, and never wider than two lines' worth -- a flag, a badge, a
 * mark. The theme's rounded image corners are not wanted on a flag.
 */
.ilm-button__image {
	display: block;
	flex: none;
	inline-size: auto;
	max-inline-size: 2.5em;
	block-size: 1.25em;
	object-fit: contain;
	border-radius: 0;
}

/*
 * A Button with no link yet. It looks like the control it is going to be, and
 * it is not a link: not focusable, not announced, and it goes nowhere. See
 * the note in Button.php about why this is not `href="#"`.
 */
.ilm-button.is-ilm-unlinked {
	cursor: default;
	opacity: 0.75;
}

/* --- Variants --- */

.ilm-button.ilm-variant-primary {
	--ilm-c-btn-bg: var(--ilm-color-primary, #1d63c8);
	--ilm-c-btn-fg: var(--ilm-color-on-primary, #ffffff);
}

.ilm-button.ilm-variant-secondary {
	--ilm-c-btn-bg: var(--ilm-color-bg-strong, #e8eaed);
	--ilm-c-btn-fg: var(--ilm-color-fg, #1d2125);
}

/*
 * The outline's label is coloured text on the page itself, so it takes the
 * theme's colour for text on its background -- the link colour -- and the
 * primary colour only where a theme sets none (1.52.0). The primary colour is
 * chosen to carry white text on a filled button, and on a dark page it fails
 * as text (Copamex: #D10A0A on #0A0A0B is 3.54:1; its link colour is 6.05:1).
 * The same fallback the Posts grid's links use. An author's own colour for an
 * instance still wins.
 */
.ilm-button.ilm-variant-outline {
	--ilm-c-btn-bg: transparent;
	--ilm-c-btn-fg: var(--ilm-color-link, var(--ilm-color-primary, #1d63c8));
	--ilm-c-btn-border: currentColor;
}

/*
 * `link` is a button that looks like a link, which is a legitimate thing to
 * want beside a primary action. It keeps the underline that the other
 * variants drop, because without the button's shape that is the only thing
 * identifying it.
 */
.ilm-button.ilm-variant-link {
	--ilm-c-btn-bg: transparent;
	--ilm-c-btn-fg: var(--ilm-color-link, currentColor);
	--ilm-c-btn-border: transparent;
	--ilm-c-btn-pad-block: 0;
	--ilm-c-btn-pad-inline: 0;

	text-decoration: underline;
	text-underline-offset: 0.15em;
}

/* --- Sizes --- */

.ilm-button.ilm-size-sm {
	font-size: var(--ilm-font-size-sm, 0.875rem);
}

.ilm-button.ilm-size-md {
	font-size: var(--ilm-font-size-base, 1rem);
}

.ilm-button.ilm-size-lg {
	font-size: var(--ilm-font-size-lg, 1.125rem);
}

/*
 * Respect a reader who has asked for less motion: the colour transition
 * above goes, and every state change is immediate again.
 */
@media (prefers-reduced-motion: reduce) {
	.ilm-button {
		transition: none;
	}
}