.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	height: 44px;
	padding: 0 18px;
	border-radius: 999px;
	background: linear-gradient(90deg, var(--grad-a), var(--grad-b), var(--grad-c));
	color: white;
	font-weight: 600
}

.btn.secondary {
	background: transparent;
	border-color: #2a2a35;
	color: #e5e7eb
}

.btn .icon {
	width: 18px;
	height: 18px
}





.btn--ghost {
	color: rgba(255, 255, 255, .86);
	border-color: var(--border);
	background: rgba(255, 255, 255, .02)
}

.btn--ghost:hover {
	border-color: rgba(255, 255, 255, .3);
	background: rgba(255, 255, 255, .06)
}

.btn--gradient {
	position: relative;
	isolation: isolate
}

.btn--gradient::before {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: 14px;
	padding: 1.5px;
	background: var(--prism);
	-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
	-webkit-mask-composite: xor;
	mask-composite: exclude
}

.btn--gradient:hover::after {
	opacity: 1
}

.btn--gradient::after {
	content: "";
	position: absolute;
	inset: -10% -20%;
	transform: rotate(12deg);
	background: radial-gradient(closest-side, rgba(255, 255, 255, .35), transparent 60%);
	border-radius: 32px;
	opacity: 0;
	transition: opacity .3s ease
}

.btn--full {
	width: 100%;
	justify-content: center
}