.sidebar{
	width: 56px;
	min-width: 56px;
	height: calc(100vh - 52px);
	background: var(--background-card);
	border-right: 2px solid var(--black);
	display: flex;
	flex-direction: column;
	padding: 12px 0;
	transition: width 0.22s cubic-bezier(.4,0,.2,1), min-width 0.22s cubic-bezier(.4,0,.2,1);
	overflow: hidden;
	position: absolute;
	top:52px;
	z-index: 10;
}
.sidebar:hover{
	width: 200px;
	min-width: 200px;
}

/* center */
.sidebar-item{
	display:flex;
	align-items:center;
	gap:12px;
	padding:10px 14px;
	cursor:pointer;
	border-radius: 0;
	transition:background 0.12s;
	white-space:nowrap;
	position:relative;
}
.sidebar-item:hover{
	background-color:var(--background-soft);
}
.sidebar-item.active{
	background-color:var(--accent);
	border-right: 3px solid var(--primary-500);
}
.sidebar-icon{
	width:28px;
	height:28px;
	display:flex;
	align-items:center;
	justify-content:center;
	font-size:16px;
	flex-shrink:0;
}
.sidebar-label{
	font-size:13px;
	font-weight:600;
	color:var(--black);
	transition:opacity 0.15s 0.05s;
}
.sidebar:hover .sidebar-label{
	opacity:1;
}
.sidebar-sub{
	padding-left:14px;
	overflow:hidden;
	max-height:0;
	transition: max-height 0.2s;
}
.sidebar:hover .sidebar-sub{
	max-height:100px;
}
.sidebar-sub-item{
	display:flex;
	align-items:center;
	gap:10px;
	padding: 7px 14px 7px 0;
	cursor:pointer;
	white-space:nowrap;
}
.sidebar-sub-dot{
	width:6px;
	height:6px;
	border-radius:50%;
	background-color: var(--gray-light);
	flex-shrink:0;
	margin-left:11px;
}
.sidebar-sub-label{
	font-size:12px;
	font-weight: 500;
	color: var(--gray-mid);
	opacity:0;
	transition: opacity 0.15s 0.05s;
}
 .sidebar:hover .sidebar-sub-label{
	opacity:1;
}
 .sidebar-sub-item:hover:not(.off) .sidebar-sub-dot{
	background-color: var(--primary-500);
}
 .sidebar-sub-item:hover .sidebar-sub-label{
	color: var(--primary-500);
}
.sidebar-spacer{
    flex-grow:1;
}
.sidebar-bottom{
	border-top: 2px solid var(--black);
	padding-top:10px;
}
/* footer */
.sidebar-footer{
	border-top: 2px solid var(--black);
	padding-top:10px;
}