.btn {
	border: 0;
	background: none;
	font-weight: 700;
	font-size: var(--font-base);
	line-height: var(--line-height-tight);
	clip-path: var(--clip-path-badge);
	display: var(--button-box, inline-flex);
	align-items: center;
	gap: 8px;
	cursor: pointer;
	padding: 20px;
	transition-property: color, background-color, opacity;
	transition-duration: var(--transition-surface-delay);

	svg {
		fill: #fff;
		margin-left: auto;
	}

	&:not(:has(svg)) {
		justify-content: center;
	}
}

.btn--block {
	--button-box: flex;

	width: 100%;
}

.btn--primary {
	background-color: var(--brand-red);
	color: #fff;

	&:hover {
		background-color: var(--brand-red-hover);
	}

	svg {
		fill: #fff;
	}
}

.btn--secondary {
	background-color: #fff;
	color: var(--color-neutral-500);

	&:hover {
		background-color: var(--color-neutral-100);
	}

	svg {
		fill: var(--color-neutral-500);
	}
}

.btn--ghost {
	background-color: transparent;
	color: #fff;

	&:hover {
		background-color: var(--color-002);
	}
}

.btn[disabled] {
	opacity: .3;
	cursor: no-drop;
}