﻿.ºpopup{
	position: absolute;
	overflow: hidden;
	background: var(--color-12);
	border-radius: var(--control-border-radius-2);
	box-shadow: var(--control-dropdown-shadow);
	z-index: 99;
}

.ºpopup{
	max-height: 0;
	transform-origin: top center;
}
	.ºpopup.collapsed{
		max-height: none;
		animation: slideDownIn .3s ease-in-out forwards;		
	}
	.ºpopup.expanded{
		max-height: none;
		animation: slideDownOut .3s ease-in-out forwards;		
	}
	
.ºpopup.dropdown{
	border-radius: var(--control-border-radius);
	overflow: visible;
}
	.ºpopup.dropdown .item{
		display: flex;
		align-items: center;
		padding: 0 var(--size-5) 0 var(--size-3);
		height: var(--control-height);
		white-space: nowrap;
		cursor: pointer;
		transition: all .5s ease-in;
	}
		.ºpopup.dropdown .item:first-child{
			margin-top: 4px;
		}
		.ºpopup.dropdown .item:last-child{
			margin-bottom: 4px;
		}
		.ºpopup.dropdown .item.selected{
			background: var(--color-8);
			color: var(--color-3);
		}		
		.ºpopup.dropdown .item:hover{
			background: var(--color-text-4);
		}
		.ºpopup.dropdown .item .icon{
			display: flex;
			align-items: center;
			justify-content: center;
			width: 22px;
			height: 22px;
			margin-right: var(--size-1);
		}
		.ºpopup.dropdown .item.disabled{
			pointer-events: none;
			filter: grayscale(1);
			opacity: .5;
		}
			.ºpopup.dropdown .item.disabled .icon{
				opacity: .5;
			}
	.ºpopup.dropdown .break{
		margin: 4px 0;
		border-bottom: 1px solid var(--control-border-color-2);
	}
	
.ºpopup.tooltip{
	position: absolute;
	box-shadow: var(--control-dropdown-shadow);
	overflow: visible;
	z-index: 99;
}
	.ºpopup.tooltip.expanded{
		transition:
			top .3s ease-in,
			left .3s ease-in;
	}

	.ºpopup.tooltip .label{
		overflow: hidden;
		padding: var(--size-2) var(--size-3);
		background: var(--color-12);
		border-radius: var(--control-border-radius-2);
		white-space: nowrap;
	}
	.ºpopup.tooltip.wrap .label{
		white-space: normal;
	}
		.ºpopup.tooltip.wrap .label p{
			padding-bottom: 9px;
		}


	.ºpopup > .arrow{
		position: absolute;
		width: 16px;
		height: 16px;
		background: var(--color-12);
		transform: rotate(45deg);

		z-index: -1;
	}
		.ºpopup.align_bottom > .arrow{
			bottom: -8px;
		}
		.ºpopup.tooltip > .arrow{
			box-shadow: var(--control-dropdown-shadow);			
		}
		.ºpopup > .arrow *{
			width: 100%;
			height: 100%;
		}		

.ºpopup.tooltip{
	max-height: 0;
	transform-origin: top center;
	text-align: left !important;
}
	.ºpopup.tooltip.collapsed{
		max-height: none;
		animation: zoomIn .2s ease-in-out forwards;		
	}
	.ºpopup.tooltip.expanded{
		max-height: none;
		animation: zoomOut .2s ease-in-out forwards;		
	}
	.ºpopup.tooltip .header{
		padding: var(--size-1) 0 var(--size-1) var(--size-3);
		margin: calc(var(--size-2) * -1) calc(var(--size-3) * -1) var(--size-2);
		line-height: var(--size-5);
		font-weight: 400;
	}
		.ºpopup.gray.bottom .arrow *,
		.ºpopup.gray .header{
			background: var(--color-text-3);
			color: var(--color-12);
		}
		.ºpopup.green.bottom .arrow *,
		.ºpopup.green .header{
			background: var(--color-green-4);
			color: var(--color-green);
		}
		.ºpopup.blue.bottom .arrow *,
		.ºpopup.blue .header{
			background: var(--color-blue-4);
			color: var(--color-blue);
		}
		.ºpopup.orange.bottom .arrow *,
		.ºpopup.orange .header{
			background: var(--color-orange-4);
			color: var(--color-orange);
		}
	.ºpopup.tooltip .label .photo{
		margin: 9px 0 3px;
	}
	
