@import 'src/Components/GlobalStyles/colors';

.button {
	min-width: 337px;
	background-color: var(--primary-color);
	padding: 15px 0;
	border-radius: 10px;
	font-size: 18px;
	border: none;
	cursor: pointer;
	transition: transform 0.2s ease-in-out;
	max-height: 53px;

	a {
		font-weight: 400;
		font-size: 18px;
		line-height: 23px;
		text-decoration: none;
		color: white;
		display: flex;
		justify-content: center;
		align-content: center;
	}

	&:hover {
		background-color: var(--primary-color-dark) !important;
		color: #fff !important;

		a {
			color: #fff !important;
		}
	}

	&.white {
		background-color: transparent;
		border: 2px solid var(--primary-color);

		a {
			color: var(--primary-color);
		}

		&:hover {
			a {
				color: var(--primary-color);
			}
		}
	}
}

@media (max-width: 576px) {
	.button {
		max-width: 337px;
		width: 93%;
		min-width: auto;

		a {
			font-weight: 700;
			font-size: 16px;
		}
	}
}