
.ui-combobox {
	display: inline-block;
	
	position: relative;

	color: var(--gray-800);

	font-size: 1.3rem;

	/*
	overflow: visible;
	*/
}

.ui-combobox > input {
    padding: 0 2.7rem 0 0.5rem;
    width: 7.7rem;
    height: 2.8rem;
    /*
    font-size: 1.3rem;
    */
    
    border: 1px solid var(--gray-400);
    transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out;
}
.ui-combobox > input:hover {
	border-color: var(--gray-500);
}
.ui-combobox:focus-within > input {
	position: relative;
	
	border-color: #80bdff;
	
	box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
	/*
	z-index: 10000;
	*/
}

.ui-combobox > .ui-combobox-icon {
	display: inline-block;
	
	position: absolute;
	top: 0;
	right: 0;

	padding: 0 1.0rem 0 0.7rem;
	/*
	width: 2.7rem;
	*/

	/*
    margin: 0 0.25rem 0 0;
    padding: 0 0.5rem;
    */
    height: 100%;
  
    color: var(--gray-600);
    
    background: none;
    
    font-size: 1.4rem;
    
    /*
    font-family: 'Font Awesome 5 Free';
  	font-weight: 900;
    */
 
    font-family: Icons;
 
    cursor: pointer;
}

.ui-combobox > .ui-combobox-icon:before {
    content: '\f0d7';
    /*
    vertical-align: sub;
	*/
}

.ui-combobox:focus-within .ui-combobox-icon {
	color: var(--gray-700);
	
	transform: translate(1px, 1px);
}
/*
.ui-combobox > input:focus + .ui-combobox-icon {
	color: var(--gray-700);
	
	transform: translate(1px, 1px);
}
*/


.ui-combobox-list {
	display: none;
	
	position: absolute;
	bottom: 0;
	left: 0;
	
	/*
	width: 300px;
	*/
	/*
	height: 100px;
	*/
	/*
	max-height: 0;
	*/
	
	min-width: 100%;
	
	background: #ffffff;
	
	border: 0.667px solid #c5c5c5;
	
	box-shadow: 0 2px 10px 0 rgb(0 0 0 / 20%);
	
	/*
	transform: translateY(calc(-100% + -10px));
	*/
	
	transform: translateY(100%);

	overflow: hidden;

	z-index: 9999;

	/*
	clip: rect(auto, 100rem, 0, auto);
	*/
	/*
	transform: scaleY(0);    
  	transform-origin: top;
	*/
	
	/*
	z-index: 999;
	*/
}

.ui-combobox-list.-show.-empty-content:empty {
	display: flex;
	align-items: start;
	justify-content: start;
}
.ui-combobox-list.-empty-content:empty:after {
	content: "";

	margin-top: 1rem;

	padding: 0.7rem 0 0.7rem 0.5rem;

	width: 100%;

	color: var(--gray-700);
	
	background: var(--blue-gray-50);

	font-size: 1.2rem;
}



/*
.ui-combobox:focus-within .ui-combobox-list:not(:empty) {

	display: block;
}
*/
.ui-combobox-list.-show {
	display: block;
}

.ui-combobox .ui-combobox-item {
	display: flex;
    justify-content: space-between;
    align-items: center;
	
	padding: 0 1rem;
	
	height: 3rem;

	color: inherit;

	font-size: inherit;

	cursor: pointer;
}

.ui-combobox .ui-combobox-item.-hover {
	background: var(--gray-200);
}

.ui-combobox .ui-combobox-item > * {
	pointer-events: none;
}



/*
.ui-combobox > input:focus + .ui-combobox-icon:before {
	transform: translate(1px, 10px);
}
*/

/*
.ui-combobox:after {
	position: absolute;
	right: 1rem;
	bottom: 0.8rem;
	
	font-family: Icons;
    font-style: normal;
    font-size: 1.4rem;
    font-weight: 400;
    
    color: var(--gray-600);
    
    text-decoration: inherit;
    text-align: center;
	
	transform: translateY(50%);
	
	content: "\f0d7";
}
*/