$black:#0d0d0d;$dark:#181820;$text:#5c636a;$gray:#21212b;$text-active:#e3e3e3;$closed-width:5.5rem;html.light{.sidebar{background:#fefefe}.footer,.footer a,.logo{color:#bdbcb8}.logo:hover{color:$dark}nav li a,nav li button{color:#bdbcb8;&:hover{color:$dark}}.footer{.icon:hover,.more:hover,a:hover{color:$dark}}ul li.withDivider{border-top:1px solid rgba(#000,.1)}.footer,.search input{background:#eef2f7}.search{color:#bdbcb8;&:focus-within{color:$dark}}nav li.active a,nav li.active button{background:#2984ff!important;color:#fefefe}nav{color:#eef2f7}.toggle{background:#eef2f7;color:#bdbcb8;&:hover{color:$dark}}}.sidebar{background:$dark;width:17rem;height:100vh;height:100dvh;color:$text;transition:width .3s,background 1s;nav{overflow-y:overlay;overflow-x:hidden;color:$gray;transition:color 1s}ul{li.active a,li.active button{color:white;background:#7F56D9}li.withDivider{border-top:1px solid rgba(#eee,.1)}.indicator{animation:blink 1.5s infinite}a:hover,button:hover{color:white}a span{transition:opacity .3s}li a,li button{color:#D6BBFB}}.active-sub-link{background:#7F56D9;color:white}.footer{height:$closed-width;background:$gray;transition:background 1s;a{color:white;transition:color .3s;&:hover{color:$text}}.icon:hover,.more:hover{color:$text-active}}.toggle{background:$black;color:$text;&:hover{color:$text-active}}&.closed{width:5.5rem;.toggle{transform:rotate(180deg)}nav ul li a span,nav ul li button span span{opacity:0;width:0}.indicator{transform:translate(-15px,-8px)}.footer .briefcase,.footer .more{opacity:0}::-webkit-scrollbar{width:0;height:0}}}::-webkit-scrollbar,::-webkit-scrollbar-thumb{width:16px;border-radius:8px;background-clip:padding-box;border:6px solid transparent}::-webkit-scrollbar-thumb{box-shadow:inset 0 0 0 10px}@keyframes blink{50%{background:transparent}}