.c-quantity {
	@include template(input, button--increase, button--decrease);
	height: space(7);
	display: grid;
	grid-template-rows: 1fr 1fr;
	grid-template-columns: auto auto;
	grid-row-gap: space(0.5);
	grid-column-gap: space(0.5);
	grid-template-areas:
		"input button--increase"
		"input button--decrease";
}


.c-quantity__input {
	display: flex;
	width: 56px;
}

.c-quantity__button {
	@include border-radius(s);
	@include font-size(l);
	display: flex;
	align-items: center;
	justify-content: center;
	height: 26px;
	width: 26px;
	border: none;
	color: palette(neutral, 0);
	background-color: palette(neutral, 900);

	&:hover {
		background-color: palette(action, 500);
	}

	&:active {
		background-color: scale_color(palette(action, 500), $lightness: -20%);
	}

	&:focus {
		outline: none;
	}
}


.c-quantity__button--increase {
	align-self: start;
}


.c-quantity__button--decrease {
	align-self: end;
}