:root {
	--button-width: 160px;
	--button-margin-top: 1em;
}

button,
a[role="button"] {
	cursor: pointer;
}

.button {
	appearance: none;
	display: inline-block;
	min-width: 160px;
	padding: 0.75em 1em;
	border: none;
	border-radius: 1.25em;
	font: 400 0.9375em Sequel-Neue, sans-serif;
	text-transform: uppercase;
	letter-spacing: 0.0625em;
	text-decoration: none;
	text-align: center;
	transition: 
		background-color 300ms ease-in-out,
		box-shadow 300ms ease-in-out,
		color 300ms ease-in-out;
}

.button.disabled {
	opacity: 0.35;
	cursor: auto;
	pointer-events: none;
}

.button:focus {
	outline: none;
}

.button-white {
	background-color: white;
	color: var(--color-mid-green);
}

.button-white:hover {
	background-color: var(--color-yellow);
}

.button-light-green {
	background-color: var(--color-light-green);
	color: white;
}

.button-yellow {
	background-color: var(--color-yellow);
	color: white;
}

.button-shadow {
	box-shadow: 0.250em 0.250em 0px 0px currentColor;
}

.button-shadow--yellow {
	box-shadow: 0.250em 0.250em 0px 0px var(--color-yellow);
}

.button--sungold,
.button--green,
.button--sungold-green {
	position: relative;
	border-radius: 0.5em;
	background-color: white;
	font-size: 0.875em;
}

.button--sungold,
.button--green {
	margin-top: 3em;
}

.button--sungold {
	color: var(--color-orange);
}

.button--green {
	color: var(--color-mid-green);
}

.button--sungold::before,
.button--green::before {
	content: '';
	display: block;
	width: 50%;
	aspect-ratio: 8 / 5;
	position: absolute;
	bottom: 100%;
	left: 50%;
	background-repeat: no-repeat;
	background-size: auto 200%;
}

.button--sungold::before {
	transform: translate(-50%, 16%);
	background-image: url(../../images/sprites/sprite-click2buy-button.webp);
	background-position: center top;
}

.button--green::before {
	transform: translate(-50%, 20%);
	background-image: url(../../images/sprites/sprite-click2buy-button.webp);
	background-position: center bottom;
}

.button--sungold-green  {
	color: var(--color-orange);
	padding: 0.75em 2em;
	position: relative;
	z-index: 0;
}

.button--sungold-green::before,
.button--sungold-green::after  {
	content: '';
	display: block;
	aspect-ratio: 3 / 4;
	position: absolute;
	height: 100%;
	top: 50%;
	transform: translateY(-50%);
	background-repeat: no-repeat;
	background-position: center bottom;
	background-size: contain;
	z-index: 1;
}

.button--sungold-green::before {
	right: 100%;
	background-position: right center;
	background-image: url(../../images/kb/kb-sungold-peek-side.webp);
}

.button--sungold-green::after {
	left: 100%;
	transform: scaleX(-1) translate(4%, -50%);
	background-image: url(../../images/kb/kb-green-peek-side.webp);
}

.button-group {
	display: inline-flex;
	flex-direction: row;
	align-items: flex-start;
	gap: 0.5em;
}

@media screen and (min-width: 768px) {
  /* wider layout styles here */

	.button {
		font-size: 1em;
	}
}