.combobox-list {
  position: relative;
	box-sizing: border-box;
	width:100%;
	border-bottom: 1px solid var(--wp--preset--color--medium-gray);
	background-color:var(--wp--preset--color--white);
}
.combobox-list.bordered{
	border: 1px solid var(--wp--preset--color--medium-gray);
}

.combobox .group {
	display: flex;
	cursor: pointer;
	width: 100%;
	box-sizing: border-box;
	align-items:flex-end;
}

.combobox input,
.combobox button {
  background-color: transparent;
  color: black;
  box-sizing: border-box;
  height: var(--input-height);
  padding: 0;
  margin: 0;
  vertical-align: bottom;
	border:none;
  position: relative;
  cursor: pointer;
}

.combobox input {
  flex-grow:1;
  outline: none;
  font-size: 87.5%;
  padding: 1px 3px;
	overflow: hidden;
	text-overflow: ellipsis;
}

.combobox button {
  width: 21px;
  border-left: none;
  outline: none;
  color: var(--wp--preset--color--dark-gray);
	margin:1px;
}

.combobox button:hover{
	outline: var(--focus-not-visible-not-active-outline);
  box-shadow: var(--focus-not-visible-not-active-box-shadow);
}


.combobox button[aria-expanded="true"] svg {
  transform: rotate(180deg) translate(0, -1px);
}

.combobox button svg{
	height:16px;
	width:18px;
	
	display:inline-block;
	background-image: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz48c3ZnIGlkPSJ1dWlkLTFjOWMxZTcwLTIwNzYtNDQ4MS04NmQ4LWYxNjQyZTY3ZmE1YSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB2aWV3Qm94PSIwIDAgMTIgOCI+PHBvbHlsaW5lIHBvaW50cz0iMS41IDIuNSA2LjAxOSA2LjYwNCAxMC41IDIuNSIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjMDAwIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiLz48L3N2Zz4=");
	background-position: center center;
	background-repeat: no-repeat;
}

.combobox button.hide{
	display:none;
}

.combobox button.clear{
	font-size:1.5rem;
	line-height:1.5rem;
}

ul.type-ahead[role="listbox"] {
	margin: 0;
	padding: 0;
	position: absolute;
	left: 0px;
	top: 30px;
	list-style: none;
	background-color: white;
	display: none;
	border: 2px currentcolor solid;
	max-height: 250px;
	width: 100%;
	overflow: scroll;
	overflow-x: hidden;
	font-size: 87.5%;
	cursor: pointer;
	box-sizing: border-box;
	z-index:9999;
}

ul.type-ahead[role="listbox"].show{
	display:block;
}

ul.type-ahead[role="listbox"] li.type-ahead[role="option"] {
  margin: 0;
  display: block;
  padding-left: 3px;
  padding-top: 2px;
  padding-bottom: 2px;
}

/* focus and hover styling */

.combobox .group.focus{
	outline-style: var(--focus-visible-style);
  outline-color: var(--focus-visible-color);
  outline-width: var(--focus-visible-width);
  outline-offset: var(--focus-visible-offset);
}

.combobox:hover {
	outline: var(--focus-not-visible-not-active-outline);
  box-shadow: var(--focus-not-visible-not-active-box-shadow);
}

.combobox .group.focus polygon,
.combobox .group:hover polygon {
  fill-opacity: 1;
}

.combobox .group.focus input,
.combobox .group.focus button,
.combobox .group input:hover,
.combobox .group button:hover {
  /*background-color: #def;*/
}

.type-ahead[role="listbox"].focus .type-ahead[role="option"][aria-selected="true"],
.type-ahead[role="listbox"] .type-ahead[role="option"]:hover {
  background-color: #def;
  padding-top: 0;
  padding-bottom: 0;
  border-top: 2px solid currentcolor;
  border-bottom: 2px solid currentcolor;
}