/* Small glossy order button (131x44) */
.button--order.button--sm {
	width: 131px;
	height: 44px;
	box-shadow: none;
	filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.16));
}

.button--order.button--sm .button__label {
	font-size: 16px;
	font-weight: 700;
	line-height: 1.38;
}

.button--order.button--sm .button__glow {
	inset: 0 -24.69px 0 -25.32px;
	border-radius: 20.646px;
	background: #1aa27a;
	box-shadow: inset 0 4.542px 16.517px rgba(26, 162, 122, 0.22), inset 0 -1.032px 4.955px rgba(53, 159, 167, 0.7), inset 0 0.619px 3.303px rgba(53, 159, 167, 0.38);
}

.button--order.button--sm .button__base {
	border-radius: 20.646px;
	background: #19a37d;
}

.button--order.button--sm .button__color-well {
	inset: 61.9% 2.41% -41.21% -8.62%;
}

.button--order.button--sm .button__color-well img {
	left: -1.61%;
	top: -8.85%;
	width: 103.22%;
	height: 117.7%;
}

.button--order.button--sm .button__light {
	inset: -29.31% 26.21% 77.59% -12.07%;
}

.button--order.button--sm .button__light img {
	left: -1.99%;
	top: -13.57%;
	width: 103.98%;
	height: 127.14%;
	transform: none;
}

.button--order.button--sm .button__edge {
	inset: -29.14% -1.44% -46.38% 82.01%;
}

.button--order.button--sm .button__edge img {
	position: static;
	transform: rotate(-6.05deg) skewX(-1.94deg) scale(1.17, 1.04);
}

.button--order.button--sm .button__surface {
	inset: 0.78% 0.16%;
	border-width: 0.645px;
	border-radius: 20.324px;
	box-shadow: inset 0 4.542px 16.517px rgba(26, 162, 122, 0.22), inset 0 -1.032px 4.955px rgba(53, 159, 167, 0.7), inset 0 0.619px 3.303px rgba(53, 159, 167, 0.38);
}

/* Small order button: the shadow is a filter here, so hover and press tune the filter instead of box-shadow. */
@media (hover: hover) {
	.button--order.button--sm:hover {
		filter: drop-shadow(0 7px 10px rgba(25, 163, 125, 0.36)) drop-shadow(0 2px 3px rgba(0, 0, 0, 0.1));
	}
}

.button--order.button--sm:active {
	filter: drop-shadow(0 1px 2px rgba(25, 163, 125, 0.3)) drop-shadow(0 1px 1px rgba(0, 0, 0, 0.12));
}
