/**
 * Button system.
 *
 * Three roles and nothing else:
 *
 *   .ajp-button                 primary   — red fill. One per view, ideally.
 *   .ajp-button--secondary      secondary — outlined, ink.
 *   .ajp-action                 text      — an inline action with an arrow.
 *
 * Plus one surface adaptation, --inverse, for use on a dark band.
 *
 * Every variant sets --ajp-button-* rather than restating properties, so a new
 * variant is four lines and can never drift from the base. No section defines
 * button CSS of its own.
 *
 * Works on <button>, <a> and <input type="submit"> alike: pick the element for
 * its semantics and add the class for the appearance.
 */

@layer ajp.components {

	.ajp-button {
		--ajp-button-bg: var(--ajp-color-brand);
		--ajp-button-bg-hover: var(--ajp-color-brand-hover);
		--ajp-button-fg: var(--ajp-color-brand-contrast);
		--ajp-button-border: transparent;
		--ajp-button-focus: var(--ajp-focus-color);

		display: inline-flex;
		align-items: center;
		justify-content: center;
		gap: var(--ajp-space-2);

		min-height: var(--ajp-control-height);
		padding-inline: var(--ajp-control-pad-x);
		padding-block: var(--ajp-space-2);

		border: var(--ajp-border-width) solid var(--ajp-button-border);
		border-radius: var(--ajp-radius);
		background-color: var(--ajp-button-bg);
		color: var(--ajp-button-fg);

		font-size: var(--ajp-text-meta);
		font-weight: var(--ajp-weight-semibold);
		line-height: var(--ajp-leading-snug);
		letter-spacing: var(--ajp-tracking-none);
		text-align: center;
		text-decoration: none;

		cursor: pointer;
		appearance: none;
		transition:
			background-color var(--ajp-duration-fast) var(--ajp-ease),
			border-color var(--ajp-duration-fast) var(--ajp-ease),
			color var(--ajp-duration-fast) var(--ajp-ease);
	}

	.ajp-button:hover {
		background-color: var(--ajp-button-bg-hover);
		color: var(--ajp-button-fg);
	}

	/* The default ring is dark, which is invisible on a dark fill, so each
	 * variant supplies its own ring colour through --ajp-button-focus. */
	.ajp-button:focus-visible {
		outline: var(--ajp-focus-width) solid var(--ajp-button-focus);
		outline-offset: var(--ajp-focus-offset);
	}

	.ajp-button:active { transform: translateY(1px); }

	.ajp-button:disabled,
	.ajp-button[aria-disabled="true"] {
		opacity: 0.55;
		cursor: not-allowed;
		transform: none;
	}

	.ajp-button:disabled:hover,
	.ajp-button[aria-disabled="true"]:hover { background-color: var(--ajp-button-bg); }

	/* ----------------------------------------------------------------------
	 * Variants
	 * -------------------------------------------------------------------- */

	.ajp-button--secondary {
		--ajp-button-bg: transparent;
		--ajp-button-bg-hover: var(--ajp-color-surface);
		--ajp-button-fg: var(--ajp-color-heading);
		--ajp-button-border: var(--ajp-color-line-strong);
	}

	.ajp-button--secondary:hover { --ajp-button-border: var(--ajp-color-heading); }

	/* For a dark band, where an outlined button would vanish. */
	.ajp-button--inverse {
		--ajp-button-bg: transparent;
		--ajp-button-bg-hover: rgb(255 255 255 / 0.08);
		--ajp-button-fg: var(--ajp-color-on-inverse-heading);
		--ajp-button-border: var(--ajp-color-on-inverse-muted);
		--ajp-button-focus: var(--ajp-focus-color-inverse);
	}

	/* ----------------------------------------------------------------------
	 * Sizes
	 * -------------------------------------------------------------------- */

	.ajp-button--sm {
		min-height: var(--ajp-control-height-sm);
		padding-inline: var(--ajp-space-4);
	}

	.ajp-button--lg {
		min-height: var(--ajp-control-height-lg);
		padding-inline: var(--ajp-space-6);
		font-size: var(--ajp-text-body);
	}

	/* ----------------------------------------------------------------------
	 * Modifiers
	 * -------------------------------------------------------------------- */

	.ajp-button--block {
		display: flex;
		width: 100%;
	}

	.ajp-button svg {
		width: 1.15em;
		height: 1.15em;
		flex-shrink: 0;
		fill: currentColor;
	}

	/* ----------------------------------------------------------------------
	 * Text action
	 *
	 * The third button role. An arrow is included because it always denotes
	 * navigation to another page — it is not decoration, and it is not added
	 * to buttons, which already read as actions from their shape.
	 * -------------------------------------------------------------------- */

	.ajp-action {
		display: inline-flex;
		align-items: center;
		gap: var(--ajp-space-2);
		color: var(--ajp-color-heading);
		font-size: var(--ajp-text-meta);
		font-weight: var(--ajp-weight-semibold);
		text-decoration: none;
	}

	/*
	 * The arrow inherits its colour and turns red with the rest of the link on
	 * hover. Red at rest would have put a permanent accent on every text action
	 * on the page — four of them on the homepage alone — which is the scattering
	 * the palette exists to prevent. Red is button fills, the motif, and intent.
	 */
	.ajp-action::after {
		content: "\2192";
		color: var(--ajp-color-line-strong);
		transition: transform var(--ajp-duration-fast) var(--ajp-ease),
			color var(--ajp-duration-fast) var(--ajp-ease);
	}

	.ajp-action:hover { color: var(--ajp-color-brand); }

	.ajp-action:hover::after {
		color: var(--ajp-color-brand);
		transform: translateX(var(--ajp-space-1));
	}

	.ajp-section--inverse .ajp-action { color: var(--ajp-color-on-inverse-heading); }
	.ajp-section--inverse .ajp-action::after { color: var(--ajp-color-on-inverse-muted); }

	/* ----------------------------------------------------------------------
	 * Button groups
	 *
	 * One rule for every place two actions sit together, so the gap between a
	 * primary and a secondary is the same in the hero, the acquisition band
	 * and a machine page.
	 * -------------------------------------------------------------------- */

	.ajp-actions {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		gap: var(--ajp-space-4);
		margin-block-start: var(--ajp-space-copy-cta);
	}

	/*
	 * Below 30em the primary button takes the whole row, which puts any text
	 * action beneath it rather than beside it.
	 *
	 * flex: 1 1 auto was meant to do this and did not: auto lets the button
	 * grow, but a text action next to it still fits on the same line, so at
	 * 390px "Sell your machine" ended up squeezed against the edge of "View
	 * machinery". The basis has to be 100% for the wrap to happen.
	 */
	.ajp-actions > .ajp-button { flex: 1 1 100%; }

	/*
	 * ...and the text action beneath it is centred on the button, not left
	 * under one end of it. Left-aligned it read as a stray link that had come
	 * loose from the paragraph above; centred it reads as the second half of
	 * the pair, which is what it is.
	 *
	 * flex-basis rather than align-self: .ajp-actions is a row, so align-self
	 * is the vertical axis and does nothing here. The item has to own the row
	 * and centre its own contents, which it can because it is inline-flex.
	 */
	.ajp-actions > .ajp-action {
		flex: 1 1 100%;
		justify-content: center;
	}

	@media (min-width: 30em) {
		.ajp-actions > .ajp-button { flex: 0 0 auto; }

		.ajp-actions > .ajp-action {
			flex: 0 0 auto;
			justify-content: flex-start;
		}
	}
}