.wp-block-button {
	.wp-block-button__link {
		text-decoration: none;
		background-color: transparent;
		border: thin solid var(--wp--preset--color--white);
		padding: 13px 40px !important;
		min-width: max-content !important;
		font-family: inherit !important;
		font-size: inherit !important;
		/* animation ease 300ms */
		transition: all 300ms ease !important;
		opacity: 0.9 !important;
		@media (hover: hover) and (pointer: fine) {
			&:hover {
				opacity: 1 !important;
				border-color: var(--wp--preset--color--red, #C2121F);
				background-color: #DF1524 !important;
				color: var(--wp--preset--color--white, #FFFFFF);
				mark{
					color: var(--wp--preset--color--white, #FFFFFF) !important;
				}
			}
		}

		&.has-red-background-color {
			color: var(--wp--preset--color--white) !important;
			border-color: var(--wp--preset--color--red, #C2121F);

			@media (hover: hover) and (pointer: fine) {
				&:hover {
					opacity: 1 !important;
					border-color: #DF1524;
					background-color: #DF1524 !important;
				}
			}
		}

		&.has-navy-background-color {
			color: var(--wp--preset--color--white) !important;
			border-color: var(--wp--preset--color--navy, #0F2452);

			@media (hover: hover) and (pointer: fine) {
				&:hover {
					opacity: 1 !important;
					border-color: var(--wp--preset--color--navy, #0F2452);
					background-color: var(--wp--preset--color--white, #FFFFFF) !important;
				}
			}
		}
		@media screen and (max-width: 991px) {
			padding: 14px 32px !important;
		}
	}
}

/* same as above but used on button from third-party plugins, e.g. Gravity Form */
.button {
	color: var(--wp--preset--color--white) !important;
	font-size: 18px !important;
	font-weight: 700 !important;
	line-height: 1.3 !important;
	text-transform: uppercase !important;
	background-color: var(--wp--preset--color--pink) !important;
	border: thin solid var(--wp--preset--color--pink) !important;
	border-radius: 4px !important;

	@media (hover: hover) and (pointer: fine) {
		&:hover {
			background-color: var(--wp--preset--color--red, #C2121F) !important;
			border-color: var(--wp--preset--color--red, #C2121F) !important;
		}
	}

	&.secondary {
		background-color: var(--wp--preset--color--red, #C2121F) !important;
		border-color: var(--wp--preset--color--red, #C2121F) !important;

		@media (hover: hover) and (pointer: fine) {
			&:hover {
				background-color: var(--wp--preset--color--pink) !important;
				border-color: var(--wp--preset--color--pink) !important;
			}
		}
	}

	&.tertiary {
		color: var(--wp--preset--color--white) !important;
		background-color: transparent !important;
		border-color: var(--wp--preset--color--white) !important;

		@media (hover: hover) and (pointer: fine) {
			&:hover {
				background-color: var(--wp--preset--color--red, #C2121F) !important;
				border-color: var(--wp--preset--color--red, #C2121F) !important;
			}
		}
	}

	&.quaternary {
		/* color: var(--wp--preset--color--navy) !important; */
		color: #313895 !important;
		background-color: transparent !important;
		/* border-color: var(--wp--preset--color--navy) !important; */
		border-color: #313895 !important;

		@media (hover: hover) and (pointer: fine) {
			&:hover {
				color: var(--wp--preset--color--white) !important;
				background-color: var(--wp--preset--color--pink) !important;
				border-color: var(--wp--preset--color--pink) !important;
			}
		}
	}
}

.mobile-plain-button {
	@media screen and (max-width: 767px) {
		a.wp-block-button__link {
			border: none !important;
			text-decoration: underline !important;
			@media (hover: hover) and (pointer: fine) {
				&:hover {
					background-color: transparent !important;
					text-decoration: none !important;
				}
			}
		}
	}
}