/* ------------------------------------------------------------ *\
	Button
\* ------------------------------------------------------------ */

.button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 12px;
	padding: 16px 28px;
	border: 0;
	border-radius: var(--border-radius-big);
	background: var(--c-green);
	font-family: var(--ff-bold);
	font-size: 18px;
	line-height: normal;
	color: var(--c-navy);
	text-align: center;

	&:hover {
		background: #a9c200;
		color: var(--c-navy);
	}

	.button__icon {
		flex: 0 0 auto;
	}
}

.button--outline {
	border: 1.5px solid var(--c-white);
	background: transparent;
	color: var(--c-white);

	&:hover {
		background: var(--c-white);
		color: var(--c-navy);
	}
}

.button--outline-dark {
	border: 1.5px solid var(--c-navy);
	background: transparent;
	color: var(--c-navy);

	&:hover {
		background: var(--c-navy);
		color: var(--c-white);
	}
}

.button--dark {
	min-height: 58px;
	padding: 0 30px;
	background: var(--c-navy);
	line-height: 1.5;
	color: var(--c-white);

	&:hover {
		background: var(--c-navy-light);
		color: var(--c-white);
	}
}

@media (max-width: 575px) {
	/* Icon only, the text stays for screen readers */
	.button--dark {
		position: relative;
		padding: 12px 32px;
		border-radius: 50px;

		.button__text {
			position: absolute;
			width: 1px;
			height: 1px;
			overflow: hidden;
			clip: rect(0 0 0 0);
			white-space: nowrap;
		}
	}
}