.btn {
	--btn-ease: cubic-bezier(0.22, 0.61, 0.36, 1);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.542rem;
	min-width: 12.1875rem;
	height: 3.125rem;
	padding-inline: 1rem;
	font-size: var(--fs-ui);
	font-weight: 600;
	line-height: 1;
	letter-spacing: -0.015em;
	white-space: nowrap;
	text-decoration: none;
	color: #fff;
	border: 0;
	box-shadow: inset 0 0 0 1.5px transparent;
	transition: background-color 0.3s var(--btn-ease), color 0.3s var(--btn-ease), box-shadow 0.3s var(--btn-ease);
}

.btn--arrow { gap: 0.5rem; }
.btn--arrow::before {
	content: "";
	flex: none;
	width: 0.9375rem;
	height: 0.6875rem;
	background: currentColor;
	-webkit-mask: url("../../icons/arrow-btn.svg") no-repeat center / contain;
	mask: url("../../icons/arrow-btn.svg") no-repeat center / contain;
}

.btn--orange { background: var(--color-orange); }
.btn--orange:hover,
.btn--orange:focus-visible {
	color: #c77f00;
	background: #fff;
	box-shadow: inset 0 0 0 1.5px var(--color-orange);
}

.btn--blue { background: var(--color-blue); }
.btn--blue:hover,
.btn--blue:focus-visible {
	color: var(--color-blue);
	background: #fff;
	box-shadow: inset 0 0 0 1.5px var(--color-blue);
}

.btn--outline {
	min-width: 14.875rem;
	color: var(--color-text);
	background: #fff;
	border: 1px solid var(--color-text);
}
.btn--outline img { flex: none; width: 1.5rem; height: 1.5rem; }
.btn--outline:hover,
.btn--outline:focus-visible {
	color: #fff;
	background: var(--color-text);
}