@keyframes fadeIn {
	from {opacity: .0} 
	to {opacity: 1}
}

@keyframes fadeOut {
	from {opacity: 1} 
	to {opacity: 0}
}

.glide-container{
	position: fixed; 
	
	/*position*/
	top: .5rem;
	right: .5rem;
	
	z-index: 30;
	transition: width, height;
	transition-duration: 1s;
	animation-name: fadeIn;
	animation-duration: 1.5s; 
	overflow: auto;
	
	-ms-overflow-style: none; /* for Internet Explorer, Edge */
	scrollbar-width: none; /* for Firefox */
}

.glide-container::-webkit-scrollbar {
	display: none; /* for Chrome, Safari, and Opera */
}

.glide-container--small{
	width:  200px;
	height: 64px;
}
.glide-container--big{
	width: 352px;
	height: 95vh;
}

.glide-small--open{
	
	display: block;
	animation-name: fadeIn;
	animation-duration: 1.5s; 
	
	width: 100%;
	height: 100%;
	display: inline-flex;
	justify-content: space-evenly;
	align-items: center;
	
	
}
.glide-small--closed{
	display: none;
	animation-name: fadeOut;
	animation-duration: 1.5s; 
}

.glide-big--open{
	display: block;
	animation-name: fadeIn;
	animation-duration: 1.5s; 
}
.glide-big--closed{
	display: none;
	animation-name: fadeOut;
	animation-duration: 1.5s; 
}

/*Phase these out and let the user address it themselves?*/
.glide-big--open li:hover{
	background: var(--neutral-light-2);
	color: white;
	border-radius: 4px;
}

.glide-big-icon{
	width: 24px; 
	height: auto; 
	vertical-align: middle;
}
.glide-big-label{
	display: inline; 
	vertical-align: middle;
	margin-left: .5rem;
}