.pushable {
	width: 100%;
	position: relative;
	background: transparent;
	padding: 0px;
	border: none;
	cursor: pointer;
	outline-offset: 4px;
	outline-color: deeppink;
	transition: filter 250ms;
	-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
	-webkit-touch-callout: none;
	-webkit-text-size-adjust: none;
	-webkit-user-select: none;
	-webkit-text-size-adjust: none;
	user-select: none;
	touch-action: manipulation;
}

.shadow {
	position: absolute;
	top: 0;
	left: 0;
	height: 100%;
	width: 100%;
	background: hsl(226, 25%, 69%);
	border-radius: 8px;
	filter: blur(2px);
	will-change: transform;
	transform: translateY(2px);
	transition: transform 600ms cubic-bezier(0.3, 0.7, 0.4, 1);
}

.edge {
	position: absolute;
	top: 0;
	left: 0;
	height: 100%;
	width: 100%;
	border-radius: 8px;
	background: linear-gradient(to right, var(--color-purple) 0%,
		hsl(248, 39%, 49%) 8%, var(--color-purple) 92%, var(--color-purple)
		100%);
}

.front {
	display: block;
	position: relative;
	border-radius: 8px;
	background: hsl(248, 53%, 58%);
	color: #ffffff;
	font-family: var(--font-main);
	font-weight: 600;
	text-transform: uppercase;
	font-size: 1rem;
	transform: translateY(-4px);
	transition: transform 600ms cubic-bezier(0.3, 0.7, 0.4, 1);
}

.pushable:hover:not([disabled]) {
	filter: brightness(110%);
}

.pushable:hover:not([disabled]) .front {
	transform: translateY(-6px);
	transition: transform 250ms cubic-bezier(0.3, 0.7, 0.4, 1.5);
}

.pushable:active:not([disabled]) .front {
	transform: translateY(-2px);
	transition: transform 34ms;
}

.pushable:hover:not([disabled]) .shadow {
	transform: translateY(4px);
	transition: transform 250ms cubic-bezier(0.3, 0.7, 0.4, 1.5);
}

.pushable:active:not([disabled]) .shadow {
	transform: translateY(1px);
	transition: transform 34ms;
}

.pushable:focus:not(:focus-visible) {
	outline: none;
}

.pushable:disabled .front {
	color: rgb(150, 150, 150);
	background-color: rgb(90, 90, 90);
	transform: translateY(-2px);
	transition: transform 34ms;
}

.pushable:disabled .edge {
	background: rgb(60, 60, 60);
}

.pushable:disabled .shadow {
	filter: blur(0px);
	background: rgb(60, 60, 60);
}