@import './config.less';

:root {
  --mobileSidebarWidth: calc(var(--sidebarWidth) * 0.82);
}

// narrow desktop / iPad
@media (max-width: @MQNarrow) {
  .sidebar {
    font-size: 1.1rem;
    width: var(--mobileSidebarWidth);
  }
  .page {
    padding-left: 0;
  }
}

// wide mobile
@media (max-width: @MQMobile) {
  .sidebar {
    top: 0;
    padding-top: var(--navbarHeight);
    transform: translateX(-100%);
    transition: transform .2s ease;
  }
  .page {
    padding-left: 0;
    margin-left: calc(0rem - (var(--sidebarWidth)));
  }
  .theme-container {
    &.sidebar-open {
      .sidebar {
        transform: translateX(0);
      }
    }
    &.no-navbar {
      .sidebar {
        padding-top: 0;
      }
    }
  }
}

// narrow mobile
@media (max-width: @MQMobileNarrow) {
  h1 {
    font-size: 1.9rem;
  }
  .content {
    div[class*="language-"] {
      margin: 0.85rem -1.5rem;
      border-radius: 0;
    }
  }
}
