@use '../../../css/breakpoints.scss' as breakpoints;

@media (min-width: breakpoints.$mobile-breakpoint) {

  .sidebar {
    position: fixed;
    top: 4rem;
    overflow: auto;
    left: 0;
    display: flex;
    flex-direction: column;
    width: var(--doc-sidebar-width);
    max-width: 100%;
    height: calc(100% - 3.5rem);
  }

  .sidebarWithHideableNavbar {
    padding-top: 0;
  }

  .sidebarHidden {
    opacity: 0;
    visibility: hidden;
  }

  .sidebarLogo {
    display: flex !important;
    align-items: center;
    margin: 0 var(--ifm-navbar-padding-horizontal);
    min-height: var(--ifm-navbar-height);
    max-height: var(--ifm-navbar-height);
    color: inherit !important;
    text-decoration: none !important;
  }

  .sidebarLogo img {
    margin-right: 0.5rem;
    height: 2rem;
  }
}

.sidebarLogo {
  display: none;
}

.sidebarSearchContainer {
  padding: 0 1rem;
  margin-top: 1.5rem;
}

@media (min-width: breakpoints.$laptop-breakpoint) {
  .sidebarSearchContainer {
    margin-top: 5rem !important;
  }
}
