/* Buttons: assets/css/buttons.css (uses tokens.css) */
/* Markup: <a class="btn btn--primary">Text <span class="btn__arrow" aria-hidden="true">&#8599;</span></a> */

.btn {
	box-sizing: border-box;
	display: inline-flex;
	flex-direction: row;
	justify-content: center;
	align-items: center;
	gap: var(--btn-gap);
	padding: var(--btn-padding);
	min-height: 67px;
	border: 1px solid transparent;
	border-radius: var(--radius-btn);
	font-family: var(--font-main);
	font-weight: 500;
	font-size: var(--fs-btn);
	line-height: var(--lh-btn);
	text-decoration: none;
	cursor: pointer;
	transition: background-color .25s ease, border-color .25s ease, opacity .25s ease;
}

/* The arrow appears on hover and focus (as in the Figma states) */
.btn__arrow {
	display: inline-block;
	width: 0;
	opacity: 0;
	overflow: hidden;
	transform: translate(-6px, 6px);
	transition: width .25s ease, opacity .25s ease, transform .25s ease;
}
.btn:hover .btn__arrow,
.btn:focus-visible .btn__arrow {
	width: 1em;
	opacity: 1;
	transform: none;
}

/* Primary */
.btn--primary { background: var(--color-cta-primary); color: var(--color-on-cta-primary); }
.btn--primary:hover { background: var(--color-cta-primary-hover); }
.btn--primary:focus-visible { background: var(--color-cta-primary-focus); outline: none; }

/* Secondary */
.btn--secondary { background: var(--color-cta-secondary); color: var(--color-on-cta-secondary); }
.btn--secondary:hover { background: var(--color-cta-secondary-hover); }
.btn--secondary:focus-visible { background: var(--color-cta-secondary-focus); outline: none; }

/* Tertiary */
.btn--tertiary { background: transparent; color: var(--color-light); border-color: var(--color-border); }
.btn--tertiary:hover { color: var(--color-text-muted); }
.btn--tertiary:focus-visible { background: var(--color-surface-1); outline: none; }

/* Disabled */
.btn[disabled],
.btn[aria-disabled="true"] { opacity: .4; pointer-events: none; }

@media (max-width: 480px) {
	.btn { padding: 16px 28px; min-height: 56px; }
}

@media (prefers-reduced-motion: reduce) {
	.btn, .btn__arrow { transition: none; }
}