.ybc-button,
.button,
button[type="submit"],
input[type="submit"] {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 48px;
	padding: 0.875rem 1.625rem;
	border: 1px solid transparent;
	border-radius: var(--radius-pill);
	font-family: var(--font-body);
	font-size: 0.9375rem;
	font-weight: 600;
	letter-spacing: 0;
	line-height: 1;
	text-decoration: none;
	transition:
		background-color var(--transition-standard),
		border-color var(--transition-standard),
		color var(--transition-standard),
		box-shadow var(--transition-standard),
		transform var(--transition-standard);
}

.ybc-button:hover,
.button:hover,
button[type="submit"]:hover,
input[type="submit"]:hover {
	transform: translateY(-3px);
}

.ybc-button:active,
.button:active,
button[type="submit"]:active,
input[type="submit"]:active {
	transform: translateY(1px);
}

.ybc-button--primary,
.button,
button[type="submit"],
input[type="submit"] {
	background: var(--color-burgundy);
	color: var(--color-ivory);
	box-shadow: var(--shadow-level-1);
}

.ybc-button--primary:hover,
.button:hover,
button[type="submit"]:hover,
input[type="submit"]:hover {
	background: var(--color-coffee);
	color: var(--color-white);
	box-shadow: var(--shadow-level-2);
}

.ybc-button--secondary {
	background: transparent;
	border-color: var(--color-coffee);
	color: var(--color-coffee);
}

.ybc-button--secondary:hover {
	background: var(--color-coffee);
	color: var(--color-white);
}

@media (max-width: 575px) {
	.ybc-button-group,
	.ybc-button-group .ybc-button {
		width: 100%;
	}
}