/*
 * Button.
 *
 * Two kinds, filled and outlined (D5: 16px text on both). The colours come
 * from the semantic tokens, so the same class is purple-on-white in a white
 * section and white-on-purple in a purple one. Height is a min-height of 56
 * on every screen (N4); padding and the label set the real height. On mobile
 * a button in a group goes full width with the arrow at the far edge.
 *
 *   <a class="vdt-button" href="…">
 *     <span class="vdt-button__label">View the AT-01003</span>
 *     <?= svg('assets/icons/glyphs/arrow-right.svg') ?>
 *   </a>
 *
 * States (D23): filled hovers to the darker purple (or light grey on purple);
 * outlined fills at 6% purple (or 10% white); the ring comes from base.css.
 */

@layer vdt.components {
	.vdt-button {
		display: inline-flex;
		align-items: center;
		justify-content: space-between;
		gap: var(--vdt-space-14);
		min-height: var(--vdt-button-height);
		padding: var(--vdt-space-12) var(--vdt-space-24) var(--vdt-space-12) var(--vdt-space-28);
		border: var(--vdt-rule-width) solid transparent;
		border-radius: var(--vdt-radius-sm);
		background: var(--vdt-button-fill);
		color: var(--vdt-button-fill-text);
		font-size: var(--vdt-size-button);
		font-weight: var(--vdt-weight-semibold);
		line-height: 1.2;
		text-decoration: none;
		white-space: nowrap;
		cursor: pointer;
		transition: background-color var(--vdt-duration) var(--vdt-easing), border-color var(--vdt-duration) var(--vdt-easing), color var(--vdt-duration) var(--vdt-easing);
	}

	.vdt-button svg {
		flex: none;
		width: var(--vdt-glyph-button);
		height: var(--vdt-glyph-button);
	}

	.vdt-button:hover {
		background: var(--vdt-button-fill-hover);
	}

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

	.vdt-button--outlined {
		background: transparent;
		border-color: var(--vdt-button-outline);
		color: var(--vdt-button-outline-text);
	}

	.vdt-button--outlined:hover {
		background: var(--vdt-button-outline-hover);
	}

	/* The nav Contact button: 42 tall, 15px, an outline in white .5. */
	.vdt-button--nav {
		min-height: var(--vdt-button-height-nav);
		padding: 0 var(--vdt-space-20);
		font-size: var(--vdt-size-nav);
		font-weight: var(--vdt-weight-medium);
	}

	/* A back-to-top control on the sticky section bar: just the glyph. */
	.vdt-button--icon {
		padding: 0;
		width: var(--vdt-button-height-nav);
		min-height: var(--vdt-button-height-nav);
		justify-content: center;
	}

	/* ————————————————————————— Group ————————————————————————— */

	/* Two buttons side by side: filled first, outlined second. Stack below 720. */
	.vdt-button-group {
		display: flex;
		flex-wrap: wrap;
		gap: var(--vdt-space-16);
	}

	@media (max-width: 45rem) {
		.vdt-button-group {
			flex-direction: column;
		}

		.vdt-button-group .vdt-button {
			width: 100%;
		}
	}
}