@import './config';

$mobileSidebarWidth: $sidebarWidth * 0.82;


@media (max-width: $MQNarrow) {
  .sidebar {
    font-size: 15px;
    width: $mobileSidebarWidth;
  }
  .page {
    padding-left: $mobileSidebarWidth;
  }
  .content:not(.custom) {
    // padding: 2rem;
  }
}


@media (max-width: $MQMobile) {
  .sidebar {
    top: 0;
    padding-top: $navbarHeight;
    transform: translateX(-100%);
    transition: $navbarHeight 0.2s ease;
  }
  .page {
    padding-left: 0;
  }
  .theme-container.sidebar-open {
    .sidebar {
      transform: translateX(0);
    }
  }
}


@media (max-width: $MQMobileNarrow) {
  h1 {
    font-size: 1.9rem;
  }
  .content:not(.custom) {
    // padding: 1.5rem;
  }
  .content {
    pre, pre[class*="language-"] {
      margin: 0.85rem -0.75rem;
      border-radius: 0;
    }
  }
}