.btn {
	display: inline-block;
	padding: 0.8rem 1.8rem;
	border-radius: 10rem;
	border: none;
	outline: none;
	font-size: 1.5rem;
	text-transform: uppercase;
	font-weight: 600;
	letter-spacing: 0.05rem;
	transition: 0.4s ease-in-out;
	text-decoration: none;
	cursor: pointer;

	&:hover {
		text-decoration: none;
	}
	svg {
		margin-right: 1rem;
	}
}

.btn--mint {
	background: $color--mint;
	color: $color--white !important;
	&:hover {
		background: darken($color--mint, 8%);
	}
}

.btn--invisible {
	background: transparent;
	color: $color--mint !important;
	&:hover {
		color: darken($color--mint, 10%) !important;
	}
	svg {
		margin-right: 0.5rem;
	}
}

.btn--red {
	background: $color--red;
	color: $color--white !important;
	&:hover {
		background: darken($color--red, 8%);
	}
}

.btn--gray {
	background: $color--gray;
	color: $color--white !important;
	&:hover {
		background: darken($color--gray, 8%);
	}	
}

.btn--small {
	font-size: 1.2rem;
	letter-spacing: 0.04rem;
	padding: 0.6rem 1.4rem;
	&:before {
		margin-right: 0.8rem;
	}
}

.btn--big {
	font-size: 2rem;
	padding: 1rem 2.5rem;
	letter-spacing: 0.09rem;
	&:before {
		margin-right: 1.2rem;
	}
}