.jCounterContainer {
	display: table;
	
	> div {
		display: table-row;
	}
}

.jCounterInput {
	height: 16px;
	width: 100%;
	position: relative;
	z-index: 9999;
	box-sizing: content-box !important;
	.boxShadowInset(0, 1px, rgba(0, 0, 0, .1));
	.transition(~"border .2s linear 0, box-shadow", .2s);
	
	&:hover + .jCounter, &:focus + .jCounter {
		border-color: @wcfInputHoverBorderColor;
	}
	
	&:focus + .jCounter {
		.boxShadowNative(~"0 0 5px" fade(@wcfInputHoverBorderColor, 50%) ~", inset 0 1px 5px rgba(0, 0, 0, .1)");
	}
	
	.formError & + .jCounter {
		border-color: @wcfErrorBackgroundColor;
		.boxShadowNative(~"0 0 5px" fade(@wcfErrorBackgroundColor, 50%) ~", inset 0 1px 5px rgba(0, 0, 0, .1)");
	}
	
	.formSuccess & + .jCounter {
		border-color: @wcfSuccessBackgroundColor;	
		.boxShadowNative(~"0 0 5px" fade(@wcfSuccessBackgroundColor, 50%) ~", inset 0 1px 5px rgba(0, 0, 0, .1)");
	}
}

.jCounterInput, .jCounter {
	display: table-cell;
}

.jCounter {
	@backgroundColor: darken(@wcfInputBackgroundColor, 15%);
	.textShadow(darken(@wcfInputBackgroundColor, 15%));
	text-align: center;
	vertical-align: middle;
	background-color: @backgroundColor;
	padding: 0 5px 0 10px;
	position: relative;
	z-index: 0 !important;
	.borderRadius(0px, 5px, 5px, 0px);
	border-color: darken(@wcfInputBorderColor, 20%) @wcfInputBorderColor lighten(@wcfInputBorderColor, 10%);
	border-style: solid;
	border-width: 1px;
	width: 30px;
	
	.adapt(@backgroundColor, @color) when (lightness(@backgroundColor) - lightness(@color) >= 40%) {
		color: darken(@color, 8%);
		content: "darken";
	}
	
	.adapt(@backgroundColor, @color) when (lightness(@backgroundColor) - lightness(@color) < 40%) {
		color: lighten(@color, 8%);
		content: "lighten";
	}
	
	&.color-1 {
		.adapt(@backgroundColor, mix(@wcfInputColor, #666, 50%));
	}
	
	&.color-2 {
		.adapt(@backgroundColor, mix(@wcfInputColor, #EECC22, 70%));
	}
	
	&.color-3 {
		.adapt(@backgroundColor, mix(@wcfInputColor, #D40D12, 30%));
	}
}