:host{
	position: relative;
	display: inline-block;
	box-sizing: border-box;
	/*min-width: 250px !important;*/
	margin: 0px !important;
	cursor: text;	
	--dim-grey:#aaa;
}

/* :host([custom-count]){ */
	/* margin-bottom: 24px !important; */
	/* outline-color:#9ace31 !important; */
/* } */

:host([custom-count])::after{
	content: "+" attr(custom-count) " Customs";
    cursor: auto;
    letter-spacing: 0.05em;
    pointer-events: none;
    /* background-color: #9ace31; */
    background-color: black;
    border-radius: 14px;
    box-sizing: border-box;
    color: white;
    font-family: var(--bold-font);
    display: block;
    font-size: 10px;
    padding: 4px 8px;
    position: absolute;
    right: -10px;
    text-align: right;
    bottom: calc(74%);
    z-index: 2;
}
:host([custom-count="1"])::after{
	content: "+" attr(custom-count) " Custom";
}

strong{
	/* Issue in safari faux bold on low res screens :( */
	/* font-weight: normal; */
	font-family: var(--bold-font);
	font-weight: normal;
}
/* :host(:focus){

} */

/* this will adjust based on the padding of mech-menu */
div#wrapper{
	position: relative;	
	padding: 0px;
	margin:	 0px;
};

#inputPreview,
#yearLabel
input[type="text"]{
	min-width: 300px;
	text-align: left;
	margin: 0px;
	padding: 0px;
	display: inline-block;
	font-size   : inherit;
	font-weight : inherit;
	line-height : inherit;
	color       : inherit;		
	outline  	: none;	
}

#yearLabel{
	visibility: hidden;
	pointer-events: none;
	text-transform: uppercase;
    position: absolute;
    left: 273px;
    top: 2px;
    letter-spacing: 0.15em;
    font-size: 10px;
    color: var(--dim-grey);
}

/* 
	input is after #inputPreview and needs to be slid over back on top.
	inputPreview needs to be in normal flow to give mech-menu size :(
*/

input[type="text"],
input[type="text"]:empty{
	font-family: var(--bold-font);
	min-width: 300px;	
}

#inputPreview{
	pointer-events: none;
	position: absolute;
	top: 0px;
	left: 0px;	
}

#inputPreview .inputMirror{
	color:transparent;
}
#inputPreview .autoComplete{
	color:#aaa;
	/** prevent long name overflow */
	display: inline-block;
	max-width: 250px;
	text-overflow: ellipsis;
	overflow: hidden;
	white-space: nowrap;
}

/*

	Dropdown menu styling

*/



:host([open]) #suggestions{
	display: block;
	pointer-events: auto;
}
:host([open]) #yearLabel{
	visibility: visible;
}

:host([no-list]){
	pointer-events: none;
	cursor:not-allowed;
	opacity: 0.4;
	border:1px solid #ccc;
	background-color:white;
	text-decoration: line-through;
	text-decoration-color: #666;
	cursor: not-allowed;
}

:host{
	--menu-bottom:202px; /* will be reset internally */
	--max-suggestion-height:calc( var(--vh,vh) * 100 - var(--menu-bottom) - 20px);
}

#suggestions{
	position: absolute;
	top:115%;
	margin: 0px;
	padding: 0px;
	outline: 1px solid #ccc;
	outline-offset: -1px; 	
	left:0px;
	box-shadow: 5px 5px rgba(0,0,0,0.2);
	background-color: white;
	padding: 0px;	
	width:100%;
	line-height: 1.5;
	transform: translate(0,-5px);
	max-height: var(--max-suggestion-height);
	overflow-y:scroll;
	display: none;
	list-style: none;	
	pointer-events: none;
	z-index: 1;
}		
#suggestions li{	
	position: relative;		
	padding:0px;
	border: 0px;
	margin:0px;
	/*background-color:#efefef; */
	text-align: left;
	cursor: pointer;
	user-select: none;
	padding-left: 10px;
	padding-right: 10px;
	padding-top: 1px;
	white-space: nowrap;
}

#suggestions li:not(.custom) + li.custom{
	display: block;
	border-top: 1px solid #efefef;
	margin-top: 14px;
} 

/* #suggestions li.unsupported{
	text-decoration:line-through;
}

#suggestions li.unsupported::after{
	content: "✖️";
	position: absolute;
	right:14px;
} */

/* #suggestions li:not(.custom) + li.custom::before{
	content:"YOUR CUSTOMS";
	letter-spacing:0.1em;
	bottom:100%;
	font-size:8px;
	color:#666;
	position:absolute;
} */

#suggestions li *{
	pointer-events: none;
}
#suggestions *{
	user-select: none;
}
#suggestions .autoComplete{
	color: var(--dim-grey);
}
#suggestions .year{
	color: var(--dim-grey);
	float: right;
	position: relative;
}
#suggestions .year:empty::after{
	content:"";
}
#suggestions .year::after{
	/*float: right;*/
	position: relative;
	/*left: 0px;*/
	content:"🖨";
	padding-left: 7px;
	padding-right: 2px;
	opacity: 0;
}
#suggestions .year.markable::after{
	content:"⚙️";
	opacity: 1;
}

.unsupported .year::before{
	content: "Unsupported";
    position: absolute;
    display: flex;
    text-align: initial;
    color: white;
    background-color: #ccc;
    font-size: 9px;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    font-family: var(--bold-font);
    border-radius: 4px;
    padding: 0px 5px;
    padding-top: 1px;
    line-height: 16px;
    right: 2px;
}

#suggestions .markable{
	background-image: url(img/yellow-gear.svg);
	background-repeat: no-repeat;
	background-size: 12px;
	background-position: center;
	background-position-x: calc(100% - 14px);
}


/* #suggestions li:hover, */	/* pointer event polyfill in safari doesn't unhover item in shadow if pointer leaves while button down / releaseCapture is not working correctly in PEP I don't think. */
#suggestions li.hovered{ 		/* fix for above. */
	color:white;
	/* font-weight: 800; */
	/*background-color: black;*/
	background-color: var(--hover-color);
	cursor: pointer;	
	user-select: none;		
}
#suggestions li.hovered *{
	color:white;
}

#suggestions li.selected{
	color:white;
	/* font-weight: 800 !important; */
	/*background-color: black;*/
	background-color: var(--hover-color);
}
#suggestions li.selected *{
	color:white;
}

#suggestions:hover .selected{
	background-color: #ccc;
}

#suggestions:hover li.selected:hover{
	background-color:var(--hover-color) !important;
}