/* ==========================================================
   LicitaAI.club
   sidebar.css
   Componente Sidebar
   Mobile First
   Versão: 1.0
==========================================================*/

/*==========================================================
  SIDEBAR
==========================================================*/

.sidebar{

    position:fixed;

    top:var(--header-height);

    left:0;

    width:var(--sidebar-width);

    height:calc(100vh - var(--header-height));

    background:var(--bg-sidebar);

    border-right:1px solid var(--border-color);

    display:flex;

    flex-direction:column;

    overflow-y:auto;

    transition:transform .25s ease;

    transform:translateX(-100%);

    z-index:var(--z-fixed);

}

/*==========================================================
  SIDEBAR OPEN
==========================================================*/

body.sidebar-open .sidebar {
    transform: translateX(0);
}

/*==========================================================
  NAV
==========================================================*/

.sidebar-nav{

    display:flex;

    flex-direction:column;

    padding:var(--space-5);

    gap:6px;

}

/*==========================================================
  LINK
==========================================================*/

.sidebar-link{

    display:flex;

    align-items:center;

    gap:12px;

    height:44px;

    padding:0 14px;

    border-radius:12px;

    color:var(--text-secondary);

    font-weight:500;

    transition:var(--transition-fast);

}

.sidebar-link:hover{

    background:var(--color-gray-100);

    color:var(--color-primary);

}

/*==========================================================
  ACTIVE
==========================================================*/

.sidebar-link.active{

    background:var(--color-primary);

    color:var(--color-white);

}

/*==========================================================
  ICON
==========================================================*/

.sidebar-link svg{

    width:20px;

    height:20px;

    flex-shrink:0;

}

/*==========================================================
  SECTION
==========================================================*/

.sidebar-title{

    padding:24px 16px 8px;

    font-size:12px;

    font-weight:600;

    text-transform:uppercase;

    letter-spacing:.08em;

    color:var(--color-gray-500);

}

/*==========================================================
  FOOTER
==========================================================*/

.sidebar-footer{

    margin-top:auto;

    padding:20px;

    border-top:1px solid var(--border-color);

}

/*==========================================================
  DESKTOP
==========================================================*/

@media(min-width:1024px){

.sidebar{

    transform:none;

    position:sticky;

    top:var(--header-height);

}

}