applicator-input{	
	position: fixed;
	/*transition: opacity 0.15s;*/

	font-family: var(--bold-font);
	/* box-shadow: 5px 5px rgba(0,0,0,0.4); */
	pointer-events: none;
	opacity: 0;
	/* transition: opacity 0.25s; */
	z-index: 3;		
	--regular-option-height:32px;
	/* for cursors */
	--squat-option-height:21px;
	/* --regular-option-height:21px; */
	/* This is occasionally overwritten by minWidth field in options when displaying menu */
	--min-option-width:50px;
}
applicator-input[shown]{
	opacity: 1;
	pointer-events: initial;
	transition: opacity 0.25s;	
	transition-delay: 0s;
}
applicator-input:not([shown]){
	opacity: 0;
	transition:opacity 0.25s;
	/* transition-delay: 0.15s; */
}

applicator-input.hidden,
applicator-input.canceled{
	visibility: hidden;
	opacity: 0;	
	transition: opacity 0s;
}

applicator-input .tip-container{
	/* no longer using */
	display: none;		
	/* --*/
	position: relative;
	pointer-events: none;		
}
applicator-input .options{	
	outline:2px solid var(--hover-color);
	/*font-size: 0px;
	line-height: 0px;*/
	
	/* new */
	outline:none;
	background-color: black;
	border:2px solid black;
	border-radius: 4px;
	box-shadow: 5px 5px rgba(0,0,0,0.4);	
}
applicator-input[placement="place-top-edge"] .options,
applicator-input[placement="place-top-left"] .options{
	border-radius: 0px 0px 4px 4px;
}

applicator-input .options>div{
	display: flex;
	align-items: center;
    justify-content: flex-start;
	/*height:20px;*/
	width:50px;	
	background-color: white;
	/*border-bottom:2px solid #aaa;*/	
	padding-top: 2px;
	padding-bottom: 2px;
	padding-left: 6px;
	padding-right: 80px;
	font-size: 10px;

	/* new */
	background-color: var(--warning-yellow);
	color:black;

	/* margin-bottom: 1px; */
	/* border-bottom: 1px dotted black; */
}
applicator-input .options.double-digit>div .val{
	min-width: 12px;
    text-align: right;
}	

applicator-input .options>div.default{
	padding-top: 12px;
	padding-bottom: 12px;
	position: relative;
}

applicator-input .options>div.default[data-label]::before{
	
	position:absolute;
	height:100%;
	padding-left: 12px;
	padding-right: 12px;
	right:calc(100% + 2px);
	border:2px solid black;
	display: flex;
	align-items: center;
	border-top-left-radius: 4px;
	border-bottom-left-radius: 4px;
	content: attr(data-label);
	background-color:black;
	/* background-color:var(--hover-color); */
	color:white;		
	white-space: nowrap;
	box-shadow: 2px 2px rgba(0,0,0,0.4);	
	text-transform: uppercase;
	letter-spacing: 0.05em;
}

/* when showing a list of options rather than the default (squished list of numbers) */
applicator-input .options.list>div{	
	height:var(--regular-option-height);
	min-width: var(--min-option-width);
	font-size: 12px;
	width:auto;	
	margin-bottom: 1px;
	padding-right: 40px;	
}

applicator-input .options.list.align-right>div{
	padding-left: 40px;
	padding-right: 12px;	
	justify-content: flex-end;
}

/* dropdown is always rounded on the top except for place-top-edge, in which case its overridden */
applicator-input .options>div:first-of-type{
	border-top-left-radius: 2px;
	border-top-right-radius: 2px;
}

/* dropdown is always rounded on the bottom except for place-bottom-edge, which isn't supported anyway so.. */
applicator-input .options>div:last-of-type{
	border-bottom-left-radius: 2px;
	border-bottom-right-radius: 2px;
	margin: 0px !important;
}

/* applicator-input .options.list>div:first-of-type:last-of-type{
	border-radius: 2px 2px 2px 2px;	
} */

applicator-input[placement="place-top-left"] .options>div{
	padding-right:10px;
}

applicator-input[placement="place-top-edge"] .options.list>div:first-of-type,
applicator-input[placement="place-top-left"] .options.list>div:first-of-type{	
	border-top-left-radius: 0px !important;
	border-top-right-radius: 0px !important;
}



/* when displayed as a row */
applicator-input[row] .options>div{
	margin-right: 1px;		
	align-items: center;
	justify-content: center;
	margin-bottom: 0px !important;
	padding-bottom: 60px;
	padding-top: 12px;
	padding-left: 10px;
	padding-right: 10px;
}
applicator-input[row] .options>div:last-of-type{
	margin-right: 0px !important;
}
applicator-input[row] .options>div:first-of-type{
	border-radius: 2px 0px 0px 2px;
}
applicator-input[row] .options>div:last-of-type{
	border-radius: 0px 2px 2px 0px;
}

applicator-input[row] .options>div:first-of-type:last-of-type{
	border-radius: 2px 2px 2px 2px;
	margin:0px;
}


/*applicator-input .options>div:hover,*/  /* this is causing problems... not un-hovering... ??? */
applicator-input .options>div.hover,
applicator-input:not(.hover) .option.selected,
applicator-input.hover .option.selected.hover{
	background-color: var(--hover-color);	
	color:white;		
}
applicator-input.hover .option.selected:not(.hover){
	/* background-color: #ddd; */
	background-color: #999;
	color:black;
}

applicator-input .options>div *{
	pointer-events: none;
}
@media(hover: hover) and (pointer: fine) {
	.tip{
		visibility: hidden !important;
	}
}
applicator-input .tip{
	text-align: right;
	box-sizing: border-box;	
	min-width: 100px;
	height: 100px;
	padding-left:24px; 
	padding-right:24px; 
	background-color: var(--hover-color);
	font-size:24px;
	text-align: center;
	color:white;	
	position: fixed;		
	display: flex;
	visibility: visible;
	justify-content: center;
	align-items: center;
	box-shadow: 2px 2px rgba(0,0,0,0.4);	
}

applicator-input .tip:empty{
	visibility: hidden
}





/*

*/

applicator-input[row] .options{
	display:flex;
}

applicator-input[placement="place-right-edge"][row] .options{
	flex-direction:row-reverse;
}
applicator-input[placement="place-right-edge"][row] .options{
	flex-direction:row-reverse;
}

/*
	The styling for row assumes left to right ordering.
	We're flipping it for place-right-edge so the 'distance from finger' for each option is preserved
	This means we need to adjust the styling though :P
*/
applicator-input[row][placement="place-right-edge"] .options>div:last-of-type{
	margin-right: 1px !important;
	border-radius: 2px 0px 0px 2px;
}
applicator-input[row][placement="place-right-edge"] .options>div:first-of-type{
	margin-right: 0px !important;
	border-radius: 0px 2px 2px 0px;
}
applicator-input[row][placement="place-right-edge"] .options>div:first-of-type:last-of-type{
	border-radius: 2px 2px 2px 2px;
	margin:0px !important;
}




/* applicator-input[placement="place-around"]{
} */

applicator-input[placement="place-around"] .options{
	position: relative;
	outline: none;	
}

applicator-input[placement="place-around"] .option{
	position: absolute;
	outline:2px solid var(--hover-color);
	box-shadow: 5px 5px rgba(0,0,0,0.4);
	top:0px;
	left:0px;
}

applicator-input[placement="place-around"] .option.empty{
	display: none;
}

/* top */
applicator-input[placement="place-around"] .option:nth-child(1){	
	transform: translate(-50%, -170%)
}
/* right */
applicator-input[placement="place-around"] .option:nth-child(2){
	transform: translate(35px, -50%)
}
/* bottom */
applicator-input[placement="place-around"] .option:nth-child(3){
	transform: translate(-50%, 70%)
}
/* left */
applicator-input[placement="place-around"] .option:nth-child(4){
	left: initial;
	right:calc(100% + 35px);
	transform: translateY(-50%);
}

/*
	Flag based styling
*/

applicator-input .options>div.illegal{
	position:relative;
}
applicator-input .options>div.illegal::before{	
	box-sizing      : border-box;     
	content         : "";
	width           : 100%;
	height          : 100%;
	position        : absolute;
	left            : 0px;
	top             : 0px;
	background-image: url("img/black-thin-lines.svg");
	opacity			: 0.5 ;
	mix-blend-mode  : multiply;
	pointer-events  : none;
}

/* applicator-input .arrow{
	width:50px;
	height:20px;
	background-image: url("img/dropdown-arrow.svg");
	background-size: contain;
	position:absolute;
	top:0px;
	left:0px;	
	transform-origin: center;
	background-repeat: no-repeat;
	z-index: -1;
}
applicator-input[placement="place-on-top"] .arrow,
applicator-input[placement="place-point"] .arrow,
applicator-input[placement="place-left-edge"] .arrow,
applicator-input[placement="place-right-edge"] .arrow{
	visibility: hidden;
}
applicator-input[placement="place-below"] .arrow{
	transform:translate(0px,-20px);

}
applicator-input[placement="place-above"] .arrow{
	bottom: 0px;
    top: initial;
    transform: translate(5px, 20px) scale(1, -1);
    height: 15px;
}
applicator-input[placement="place-right"] .arrow{
	transform-origin:top left;
	transform:rotate(90deg) scale(-1 1) translate(0px, calc(100% + 50px));
} */

/* @media (pointer: fine) { */
	applicator-input[condensed] .options:not(.list)>div{
		padding-left:6px;		
		padding-right:6px;
		justify-content: center;
		width: unset;
	}
	applicator-input[condensed] .options:not(.list)>div .val{
		min-width: none;
		text-align: center;
	}
	applicator-input[condensed] .options.list>div{
		padding-left: 10px;
		padding-right:10px;
	}
	/* applicator-input .options.list>div{
		height:var(--squat-option-height);
	} */

	applicator-input[condensed][row] .options>div{
		padding-bottom:6px;		
		padding-top:6px;
	}
/* } */