
.SpinnerControl {
	overflow:hidden; display:inline-block;
	box-sizing:border-box;
	background-color:#fff; border-radius:5px;
	div {
		float:left;
        height:1.6em;line-height:1.3em; /* [e42] origin: line-height:20px; height:24px; */
		border: 1px solid #666;
	}
	.LeftButton,
	.RightButton {
        position:relative;
        width:2em; /* [e42] origin: width:30px; */
		background-color:#666; cursor:pointer;
		&::after {
			content: '';
			position:absolute; 
            box-sizing:border-box;
            /* e42: border-top:6px solid transparent; border-bottom: 6px solid transparent;*/
            top:0; left:0; /* [e42] origin: top:50%; left:50%; margin-top:-6px; margin-left:-8px; */
            width:100%; text-align:center; /* [e42] origin: width:16px; */       
		}
	}
	.ValueDisplay {
		padding: 0 10px;
		border-left:none; border-right:none;
		background-color:#fff; text-align:center;
        min-width:2.5em !important; /* +e42 */
	}
	.LeftButton {
		border-radius:5px 0 0 5px; border-right:none;
        /* [e42] origin: &::after {border-right: 8px solid #fff;} */
	}
	.RightButton {
		border-radius: 0 5px 5px 0;
		border-left: none;
		/* [e42] origin: &::after {  border-left: 8px solid #fff; } */
	}
    .LeftButton  { &::after {content:'-';color:#fff} } /* +e42 */
    .RightButton { &::after {content:'+';color:#fff} } /* +e42 */

	&.Orange {
		div { border: 1px solid orange; }
		.LeftButton,
		.RightButton { background-color: orange; }
	}
	&.OrangeRed {
		div { border: 1px solid orangered; }
		.LeftButton,
		.RightButton { background-color: orangered; }
	}
	&.Green {
		div { border: 1px solid green; }
		.LeftButton,
		.RightButton { background-color: green; }
	}
	&.Blue {
		div { border: 1px solid blue; }
		.LeftButton,
		.RightButton { background-color: blue; }
	}
}

