.nav-section{
position:relative;
}
.nav-section + .nav-section{
margin-top:0;
}
.nav-section:last-child .nav-section-title:not(.active){
border-bottom:none;
}
.nav-section-title{
padding:14px var(--gap);
font-family:var(--ff2);
font-size:20px;
font-weight:700;
color:var(--tx3);
text-transform:uppercase;
letter-spacing:1px;
background-color:var(--bg3);
background-clip:padding-box;
border-top:none;
border-bottom:var(--bw1) solid var(--bc1);
margin:0;
cursor:pointer;
display:flex;
align-items:center;
justify-content:space-between;
user-select:none;
}
.nav-section-title:hover{
background-color:var(--hv1);
color:var(--cl1);
}
.nav-section-title.active{
color:var(--cl1);
}
.nav-section-arrow{
width:18px;
height:18px;
display:flex;
align-items:center;
justify-content:center;
transition:transform .2s ease;
}
.nav-section-arrow svg{
width:18px;
height:18px;
fill:currentColor;
stroke:currentColor;
}
.nav-section-title.active .nav-section-arrow{
transform:rotate(180deg);
}
.nav-section-links{
display:grid;
grid-template-rows:0fr;
overflow:hidden;
transition:grid-template-rows .25s ease;
}
.nav-section-links-inner{
overflow:hidden;
}
.nav-section-links.expanded{
grid-template-rows:1fr;
}
.nav-link{
display:flex;
align-items:center;
gap:12px;
padding:12px var(--gap);
color:var(--tx1);
font-family:var(--ff1);
font-size:var(--fz1);
font-weight:500;
border-bottom:var(--bw1) solid var(--bc1);
}
.nav-section:last-child .nav-link:last-child{
border-bottom:none;
}
.nav-link:hover{
background-color:var(--hv1);
color:var(--cl1);
text-decoration:none;
}
.nav-link-icon{
flex-shrink:0;
display:flex;
align-items:center;
justify-content:center;
width:24px;
height:24px;
}
.nav-link-icon svg{
width:24px;
height:24px;
display:block;
}
.nav-link-icon svg,
.nav-link-icon svg path{
fill:var(--icn);
}
.nav-link:hover .nav-link-icon svg,
.nav-link:hover .nav-link-icon svg path{
fill:var(--cl1);
}
.panel-header-user{
display:flex;
align-items:center;
gap:10px;
min-width:0;
}
.panel-user-avatar-link{
display:flex;
align-items:center;
flex-shrink:0;
}
.panel-user-name-link{
text-decoration:none;
min-width:0;
}
.panel-user-name-link:hover .panel-header-name{
color:var(--cl1);
}
.panel-header-avatar{
width:34px;
height:34px;
min-width:34px;
border-radius:50%;
background-color:var(--cl1);
display:flex;
align-items:center;
justify-content:center;
flex-shrink:0;
}
.panel-header-avatar span{
font-family:var(--ff2);
font-size:14px;
font-weight:800;
color:#fff;
}
.panel-header-avatar.panel-avatar-admin{
background-color:var(--rd1);
}
.panel-header-avatar.panel-avatar-writer{
background-color:var(--lnk);
}
.panel-header-avatar.panel-avatar-pic{
background-size:cover;
background-position:center;
background-color:var(--bg3);
}
.panel-header-name{
font-family:var(--ff2);
font-weight:700;
font-size:18px;
color:var(--tx1);
overflow:hidden;
text-overflow:ellipsis;
white-space:nowrap;
text-transform:uppercase;
letter-spacing:1px;
}
.panel-header-auth{
display:flex;
align-items:center;
gap:8px;
}
.panel-header-auth a{
font-family:var(--ff2);
font-size:18px;
font-weight:700;
color:var(--cl1);
text-decoration:none;
text-transform:uppercase;
letter-spacing:1px;
}
.panel-header-auth a:hover{
text-decoration:underline;
text-decoration-thickness:2px;
text-underline-offset:4px;
}
.panel-header-sep{
color:var(--tx3);
font-size:18px;
font-weight:700;
}