/*
 * Buttons (docs/DESIGN_SYSTEM.md section 8.1). One per section is primary. Every target is at least
 * 44 px. Hover changes colour only; the arrow of a text button slides 4 px.
 *
 * Markup: <a class="btn btn--primary" href="...">Label</a>  or  <button class="btn btn--secondary">.
 * Modifiers: btn--primary, btn--secondary, btn--inverse, btn--text, btn--sm, btn--lg, btn--icon.
 */
@layer components {
	.btn {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		gap: var(--space-2);
		min-height: var(--size-control-md);
		padding: var(--space-2) var(--space-5);
		border: 1px solid transparent;
		border-radius: var(--radius-md);
		background: transparent;
		color: var(--color-text);
		font-family: var(--font-body);
		font-size: var(--fs-body);
		font-weight: 600;
		line-height: var(--lh-small);
		text-align: center;
		text-decoration: none;
		transition:
			background-color var(--dur-fast) var(--ease-out),
			border-color var(--dur-fast) var(--ease-out),
			color var(--dur-fast) var(--ease-out);
	}

	@media (hover: hover) {
		.btn:hover {
			text-decoration: none;
		}
	}

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

	.btn--lg {
		min-height: var(--size-control-lg);
		padding-inline: var(--space-6);
	}

	/* Primary: the main action. */
	.btn--primary {
		background: var(--color-primary);
		color: var(--color-text-inverse);
	}

	@media (hover: hover) {
		.btn--primary:hover {
			background: var(--color-primary-hover);
			color: var(--color-text-inverse);
		}
	}

	.btn--primary:active {
		background: var(--color-primary-active);
	}

	/* Secondary: beside a primary. */
	.btn--secondary {
		border-color: var(--color-primary);
		color: var(--color-primary);
	}

	@media (hover: hover) {
		.btn--secondary:hover {
			background: var(--color-surface-tint);
			color: var(--color-primary-hover);
		}
	}

	.btn--secondary:active {
		background: var(--color-surface-tint-2);
		color: var(--color-primary-active);
	}

	/* Inverse: on deep surfaces. */
	.btn--inverse {
		background: var(--color-surface);
		color: var(--color-text);
	}

	@media (hover: hover) {
		.btn--inverse:hover {
			background: var(--color-surface-tint-2);
			color: var(--color-text);
		}
	}

	.btn--inverse:active {
		background: var(--color-surface-tint);
	}

	/* Text button with an arrow: "View all courses". */
	.btn--text {
		min-height: var(--size-control-sm);
		padding-inline: 0;
		color: var(--color-link);
	}

	@media (hover: hover) {
		.btn--text:hover {
			color: var(--color-link-hover);
		}
	}

	.btn__arrow {
		transition: transform var(--dur-fast) var(--ease-out);
	}

	@media (hover: hover) {
		.btn:hover .btn__arrow {
			transform: translateX(var(--space-1));
		}
	}

	/* Icon button: header icons, close. Give it an accessible name. */
	.btn--icon {
		width: var(--size-icon-button);
		min-height: var(--size-icon-button);
		padding: 0;
	}

	/* Disabled: real disabled controls and links marked aria-disabled. */
	.btn:disabled,
	.btn[aria-disabled="true"] {
		border-color: transparent;
		background: var(--color-disabled-bg);
		color: var(--color-text-muted);
		pointer-events: none;
	}

	/* A secondary button on a deep surface (a deep section, the footer): a white outline and label. */
	:is(.section--deep, .site-footer) .btn--secondary {
		border-color: var(--color-text-inverse);
		color: var(--color-text-inverse);
	}

	@media (hover: hover) {
		:is(.section--deep, .site-footer) .btn--secondary:hover {
			background: var(--color-primary-hover);
			color: var(--color-text-inverse);
		}
	}

	:is(.section--deep, .site-footer) .btn--secondary:active {
		background: var(--color-primary-active);
	}

	/* A text button on a deep surface is light. */
	.section--deep .btn--text {
		color: var(--color-text-inverse);
	}

	@media (hover: hover) {
		.section--deep .btn--text:hover {
			color: var(--color-text-inverse-muted);
		}
	}

	/* On a deep surface the focus ring uses the light colour. */
	.section--deep .btn:focus-visible,
	.btn--on-deep:focus-visible {
		outline-color: var(--color-focus-on-dark);
	}

	@media (forced-colors: active) {
		.btn {
			border-color: ButtonText;
		}
	}
}