/* Rodelle Button widget. */

.rodelle-button--align-left {
	text-align: left;
}

.rodelle-button--align-center {
	text-align: center;
}

.rodelle-button--align-right {
	text-align: right;
}

.rodelle-button__link {
	display: inline-block;
	-webkit-tap-highlight-color: transparent;

	font-family: "DM Sans", system-ui, -apple-system, sans-serif;
	font-weight: 700;
	font-size: 1rem;
	color: #fff;
	padding: 0.875rem 2rem;
	border-radius: 0.375rem;
	text-decoration: none;
	transition: background 0.2s ease;
}

.rodelle-button__link--green {
	background: #21464f;
	color: #fff;
}

.rodelle-button__link--green:hover,
.rodelle-button__link--green:focus-visible {
	background: #ff703c;
	color: #000;
}

.rodelle-button__link--orange {
	background: #ff703c;
	color: #000;
}

.rodelle-button__link--orange:hover,
.rodelle-button__link--orange:active,
.rodelle-button__link--orange:focus-visible {
	background: #21464f;
	color: #fff;
}

.rodelle-button__link--teal {
	background: #008577;
	color: #fff;
}

.rodelle-button__link--teal:hover,
.rodelle-button__link--teal:focus-visible {
	background: #006b5f;
	color: #fff;
}

.rodelle-button__link--gray {
	background: #eef2f7;
	color: #21464f;
}

.rodelle-button__link--gray:hover,
.rodelle-button__link--gray:focus-visible {
	background: #21464f;
	color: #fff;
}

@media (prefers-reduced-motion: reduce) {
	.rodelle-button__link {
		transition: none;
	}
}