@use '@growi/core/scss/bootstrap/init' as bs;

@use '~/styles/variables' as var;

.grw-sidebar-nav :global {
  // set position and z-index to prevent dropdowns covered by other element
  position: relative;
  z-index: bs.$zindex-fixed;

  height: 100vh;

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

  .grw-logo {
    svg {
      width: var.$grw-logo-width;
      height: var.$grw-logo-width;
      padding: (var.$grw-logo-width - var.$grw-logomark-width) / 2;
    }
  }

  .grw-sidebar-nav-secondary-container {
    position: fixed;
    bottom: 1.5rem;
  }
}


// == Colors
.grw-sidebar-nav :global {
}
@include bs.color-mode(light) {
  .grw-sidebar-nav :global {
    background-color: var(--grw-sidebar-nav-bg, var(--grw-highlight-100));
  }
}
@include bs.color-mode(dark) {
  .grw-sidebar-nav :global {
    background-color: var(--grw-sidebar-nav-bg, var(--grw-highlight-800));
  }
}