/* 
    Created on : 10.01.2015, 14:34:44
    Author     : DFD
	Styles for : Quantity selector
*/
/* Quantity selector */
.quantity {
	@s: 50px;
    .rel();
    float: left;
	width: 77px;
    height: @s;
	text-align: center;
	margin-right: 15px;
	border: 2px solid @third-site-dark-color;
	
	.plus,
	.minus {
		font-family: @font-icons-main;
		font-size: 12px;
		.abs();
		right: 0;
		.block();
		width: 28px;
		height: 50%;
		line-height: @s/2;
		padding: 0;
		border: none;
		color: @title-color;
		background-color: transparent;
		border-left: 1px solid @border-color;
		cursor: pointer;
		z-index: 2;
		.transition(~"background .3s ease, color .3s ease, border-color .3s ease");
		&:hover {
			color: @main-site-dark-color;
			background: @third-site-dark-color;
			border-color: @third-site-dark-color;
		}
	}
	
	.plus {
		top: 0;
		border-bottom: 1px solid @border-color;
	}
	
	.minus {
		bottom: 0;
	}
	
	input.qty {
		.link-style();
		width: 46px;
		height: 100%;
		text-align: center;
		margin-right: 28px;
		margin-bottom: 0;
		background: transparent;
		border-width: 0;
		.rounded(0);
		
		&::-webkit-outer-spin-button,
		&::-webkit-inner-spin-button {
			/* display: none; <- Crashes Chrome on hover */
			-webkit-appearance: none;
			margin: 0; /* <-- Apparently some margin are still there even though it's hidden */
		}
	}
	input[type=number] {
		-moz-appearance: textfield;
	}
}

#content .quantity input.qty {
   width: 48px;
}