﻿.ºcombobox{
	position: relative;
	display: flex;
	align-items: center;
	height: var(--control-height-2);
	background: var(--control-background);
	border: 1px solid var(--control-border-color);
	border-radius: var(--control-border-radius);
	cursor: pointer;
	transition: all .3s ease-in;
}
	.ºcombobox > .icon{
		display: flex;
		align-items: center;
		margin: 0 var(--size-1) 0 var(--size-2);
		width: 24px;
		line-height: var(--control-height-2);
		font-size: 16px;
	}
	.ºcombobox > .label{
		position: relative;
		flex: 1;
		display: flex;
		align-items: center;
		margin: 0 0 0 var(--size-2);
		background: transparent;
	}
		.ºcombobox > .label .text-size{
			position: absolute;
			left: 0; right: 0;
			line-height: var(--control-height);
			overflow: hidden;
			white-space: nowrap;
			text-overflow: ellipsis;
		}
	.ºcombobox > .icon + .label{
		margin: 0;
	}
	
	.ºcombobox > .arrow{
		display: flex;
		width: var(--control-height);
		line-height: var(--control-height-2);
		justify-content: center;
		color: var(--color-text-3);
		transition: transform .3s ease-in;
	}
		.ºcombobox > .arrow:before{
			line-height: var(--control-height-2);
		}
		.ºcombobox > .arrow:hover{
			color: var(--color-border-hover);
		}
	.ºcombobox:hover{
		border-color: var(--color-border-hover);
	}
	.ºcombobox.focus{
		border-color: var(--color-border-focus);
		box-shadow: 0 0 0 3px var(--control-border-hover);
	}
	.ºcombobox.expanded > .label{
		color: var(--color-text-disable);
	}
	.ºcombobox.expanded > .arrow{
		transform: rotate(-180deg);
	}
	.ºcombobox > .link{
		display: flex;
		width: var(--control-height);
		line-height: var(--control-height-2);
		justify-content: center;
		color: var(--color-text-2);
		transition: transform .3s ease-in;
	}
		.ºcombobox > .link:before{
			font-size: 16px;
			line-height: var(--control-height-2);
		}
		.ºcombobox > .link:hover{
			color: var(--color-border-hover);
		}	

	
.ºcombobox-dropdown{
	position: absolute;
	height: auto;
	overflow: hidden;
	background: #FFF;
	border-radius: 0 0 var(--control-border-radius-2) var(--control-border-radius-2);
	z-index: 999;
	box-shadow: var(--control-dropdown-shadow);
}
	.ºcombobox-dropdown > .container{
		overflow: hidden;
		overflow-y: auto;
		transition: max-height .3s ease-in 0s;
	}
		.ºcombobox-dropdown > .container > .item{
			display: flex;
			align-items: center;
			padding: 0 var(--size-2);
			height: var(--control-height);
			cursor: pointer;
			transition: background .5s ease-out;
		}
			.ºcombobox-dropdown > .container > .item .icon{
				display: flex;
				align-items: center;
				margin: 0 var(--size-1) 0 0;
				width: 24px;
				line-height: var(--control-height);
				font-size: 16px;
			}
			.ºcombobox-dropdown > .container > .item .value{
				overflow: hidden;
				white-space: nowrap;
				text-overflow: ellipsis;
			}
			.ºcombobox-dropdown > .container > .item.selected{
				background: var(--color-8);
			}
			.ºcombobox-dropdown > .container > .item:hover,
			.ºcombobox-dropdown > .container > .item.focus{
				background: var(--color-text-4);
			}
	.ºcombobox-dropdown.collapsed{
		opacity: 0;
		transition: opacity 0s linear .3s;
	}
		.ºcombobox-dropdown.collapsed > .container{
			max-height: 0 !important;
		}
	
.ºcombobox.blocked{
	border: 0;
	pointer-events: none;
}	
	.ºcombobox.blocked > .arrow{
		display: none;
	}
	
.ºcombobox.disabled,
.disabled .ºcombobox{
	background: var(--control-disable-bg) !important;
}

	.ºcombobox.disabled .arrow,
	.disabled .ºcombobox .arrow{
		display: none;
	}
	.ºgrid .ºcombobox.disabled,
	.ºgrid .disabled .ºcombobox{
		background: transparent !important;
	}

.ºcombobox.no-editable, .no-editable .ºcombobox{
    border: 0;
	box-shadow: none;
}
	.ºcombobox.no-editable .arrow, .no-editable .ºcombobox .arrow{
		display: none;
	}

.disabled .ºcombobox .link,
.ºcombobox.disabled .link,
.ºcombobox.blocked .link,
.no-editable .ºcombobox .link,
.ºcombobox.no-editable .link{
	pointer-events: none;
	display: none;
}	