@use "../../scss/abstracts/colors" as *;

button.cta {
	border: 1px solid $primary;
	background: $primary;
	font-family: Arial, Helvetica, sans-serif;
	font-weight: bold;
	text-transform: uppercase;

	span {
		color: white;
		cursor: pointer;
		display: inline-block;
		position: relative;
		transition: 0.4s;

		&::after {
			content: "👋";
			position: absolute;
			opacity: 0;
			top: 0;
			right: -20px;
			transition: 0.5s;
		}
	}

	&:hover span {
		padding-right: 25px;
	}

	&:hover span::after {
		opacity: 1;
		right: 0;
	}

	&:hover {
		border: 1px solid $primary;
		background: $primary;
	}
}
