$quantity-width: 110px;

div.quantity {	
	display: inline-grid;
	grid-template-columns: 1fr 27px;
	grid-template-rows: 1fr 1fr;
	grid-row-gap: 1px;

	width: $quantity-width;
	height: var(--quantityHeight, 55px);

	input[type="number"] {
		grid-column: 1;
		grid-row: 1 / span 2;

		--formPadding: 0 7px;
		--formFontSize: 16px;
		--formInputHeight: 100%;
		-moz-appearance: textfield;
		font-weight: 500;
		text-align: center;
		
		background-image: none;
		border: 1px solid var(--buttonInitialColor);
		border-right-width: 0;
		border-radius: 3px 0 0 3px;

		&::-webkit-inner-spin-button,
		&::-webkit-outer-spin-button {
			appearance: none;
		}

		&:focus {
			border-color: var(--buttonInitialColor);
			box-shadow: 0 0 0 1px var(--buttonInitialColor);

			~ .ct-increase {
				box-shadow: 0 -1px 0 0 var(--buttonInitialColor);
			}

			~ .ct-decrease {
				box-shadow: 0 1px 0 0 var(--buttonInitialColor);
			}
		}
	}
}

.ct-increase, .ct-decrease {
	display: flex;
	align-items: center;
	justify-content: center;
	color: #fff;
	cursor: pointer;
	background: var(--buttonInitialColor);
	transition: all 0.12s cubic-bezier(0.455, 0.03, 0.515, 0.955);

	&:before {
		font-family: 'woo';
		content: '\e908';
		font-size: 8px;
		font-weight: normal;
		line-height: normal;
	}

	&:hover {
		background: var(--buttonHoverColor);
	}
}

.ct-increase {
	border-top-right-radius: 3px;
}

.ct-decrease {
	border-bottom-right-radius: 3px;

	&:before {
		transform: rotate(180deg);
	}
}