/* container for full-page content with sidebar on left */

.flex-container {
  display: flex !important;
  gap: var(--page-spacing);
  margin-top: var(--page-spacing);
}

/* small options menu on the left, used in settings/admin pages */
.flex-container-nav {
  width: 240px;
}

/* wide sidebar on the right, used in frontpage */
.flex-container-sidebar {
  width: 35%;
}

.flex-container-main {
  flex: 1;
  min-width: 0; /* make the "text truncate" work, otherwise the flex axis is not limited and the text just overflows */
}

body.show-sticky-side-menus .page-content.user.settings .flex-container-nav,
body.show-sticky-side-menus .page-content.repository.settings .flex-container-nav,
body.show-sticky-side-menus .page-content.repository.actions .flex-container-nav,
body.show-sticky-side-menus .page-content.organization.settings .flex-container-nav,
body.show-sticky-side-menus .page-content.admin .flex-container-nav {
  min-height: 0;
}

html.restoring-user-settings-menu-scroll body.show-sticky-side-menus .page-content.user.settings .flex-container-nav > #user-settings-side-menu {
  visibility: hidden;
}

html.restoring-repo-actions-menu-scroll body.show-sticky-side-menus .page-content.repository.actions .flex-container-nav > #repo-actions-side-menu {
  visibility: hidden;
}

body.show-sticky-side-menus .page-content.user.settings .flex-container-nav > .ui.vertical.menu,
body.show-sticky-side-menus .page-content.repository.settings .flex-container-nav > .ui.vertical.menu,
body.show-sticky-side-menus .page-content.repository.actions .flex-container-nav > .ui.vertical.menu,
body.show-sticky-side-menus .page-content.organization.settings .flex-container-nav > .ui.vertical.menu,
body.show-sticky-side-menus .page-content.admin .flex-container-nav > .ui.vertical.menu {
  position: sticky;
  top: calc(var(--page-spacing) + var(--persistent-navbar-offset, 0px));
  max-height: calc(100dvh - var(--page-spacing) - var(--persistent-navbar-offset, 0px) - var(--page-space-bottom) - 40px);
  overflow-y: auto;
  overscroll-behavior: contain;
  transform: translateY(var(--sticky-side-menu-correction, 0px));
}

body.show-persistent-footer.show-sticky-side-menus .page-content.user.settings .flex-container-nav > .ui.vertical.menu {
  max-height: calc(100dvh - var(--page-spacing) - var(--persistent-navbar-offset, 0px) - 96px - env(safe-area-inset-bottom));
}

body.show-persistent-footer.show-sticky-side-menus .page-content.repository.settings .flex-container-nav > .ui.vertical.menu {
  max-height: calc(100dvh - var(--page-spacing) - var(--persistent-navbar-offset, 0px) - 96px - env(safe-area-inset-bottom));
}

body.show-persistent-footer.show-sticky-side-menus .page-content.repository.actions .flex-container-nav > .ui.vertical.menu {
  max-height: calc(100dvh - var(--page-spacing) - var(--persistent-navbar-offset, 0px) - 96px - env(safe-area-inset-bottom));
}

body.show-persistent-footer.show-sticky-side-menus .page-content.organization.settings .flex-container-nav > .ui.vertical.menu {
  max-height: calc(100dvh - var(--page-spacing) - var(--persistent-navbar-offset, 0px) - 96px - env(safe-area-inset-bottom));
}

body.show-sticky-side-menus .page-content.admin .flex-container-nav > .ui.vertical.menu {
  max-height: calc(100dvh - var(--page-spacing) - var(--persistent-navbar-offset, 0px) - var(--page-space-bottom) - 40px);
}

body.show-persistent-footer.show-sticky-side-menus .page-content.admin .flex-container-nav > .ui.vertical.menu {
  max-height: calc(100dvh - var(--page-spacing) - var(--persistent-navbar-offset, 0px) - 96px - env(safe-area-inset-bottom));
}

/* body.show-sticky-side-menus .page-content.user.settings .flex-container-nav > .ui.vertical.menu > .item,
body.show-sticky-side-menus .page-content.user.settings .flex-container-nav > .ui.vertical.menu > details.toggleable-item > summary {
  padding: 0.9em 1.14285714em;
} */

body.show-sticky-side-menus .page-content.user.settings .flex-container-nav > .ui.vertical.menu > .header.item,
body.show-sticky-side-menus .page-content.repository.settings .flex-container-nav > .ui.vertical.menu > .header.item,
body.show-sticky-side-menus .page-content.repository.actions .flex-container-nav > .ui.vertical.menu > .header.item,
body.show-sticky-side-menus .page-content.organization.settings .flex-container-nav > .ui.vertical.menu > .header.item,
body.show-sticky-side-menus .page-content.admin .flex-container-nav > .ui.vertical.menu > .header.item {
  position: sticky;
  top: 0;
  z-index: 1;
  background: var(--color-menu);
  box-shadow: inset 0 -1px 0 var(--color-secondary);
}

@media (min-width: 768px) {
  body.show-persistent-navbar {
    --persistent-navbar-offset: 49px;
  }

  body.show-sticky-side-menus .page-content.user.settings .flex-container-nav > .ui.vertical.menu,
  body.show-sticky-side-menus .page-content.repository.settings .flex-container-nav > .ui.vertical.menu,
  body.show-sticky-side-menus .page-content.repository.actions .flex-container-nav > .ui.vertical.menu,
  body.show-sticky-side-menus .page-content.organization.settings .flex-container-nav > .ui.vertical.menu,
  body.show-sticky-side-menus .page-content.admin .flex-container-nav > .ui.vertical.menu {
    scrollbar-width: none;
    -ms-overflow-style: none;
  }

  body.show-sticky-side-menus .page-content.user.settings .flex-container-nav > .ui.vertical.menu::-webkit-scrollbar,
  body.show-sticky-side-menus .page-content.repository.settings .flex-container-nav > .ui.vertical.menu::-webkit-scrollbar,
  body.show-sticky-side-menus .page-content.repository.actions .flex-container-nav > .ui.vertical.menu::-webkit-scrollbar,
  body.show-sticky-side-menus .page-content.organization.settings .flex-container-nav > .ui.vertical.menu::-webkit-scrollbar,
  body.show-sticky-side-menus .page-content.admin .flex-container-nav > .ui.vertical.menu::-webkit-scrollbar {
    width: 0;
    height: 0;
  }

  body.show-sticky-side-menus .page-content.user.settings .flex-container-nav > .ui.vertical.menu.has-scroll-hint-bottom,
  body.show-sticky-side-menus .page-content.repository.settings .flex-container-nav > .ui.vertical.menu.has-scroll-hint-bottom,
  body.show-sticky-side-menus .page-content.repository.actions .flex-container-nav > .ui.vertical.menu.has-scroll-hint-bottom,
  body.show-sticky-side-menus .page-content.organization.settings .flex-container-nav > .ui.vertical.menu.has-scroll-hint-bottom,
  body.show-sticky-side-menus .page-content.admin .flex-container-nav > .ui.vertical.menu.has-scroll-hint-bottom {
    box-shadow: inset 0 -1px 0 var(--color-green), inset 0 -16px 14px -10px var(--color-green-badge-hover-bg);
  }

  body.show-sticky-side-menus .page-content.user.settings .flex-container-nav > .ui.vertical.menu.has-scroll-hint-top,
  body.show-sticky-side-menus .page-content.repository.settings .flex-container-nav > .ui.vertical.menu.has-scroll-hint-top,
  body.show-sticky-side-menus .page-content.organization.settings .flex-container-nav > .ui.vertical.menu.has-scroll-hint-top,
  body.show-sticky-side-menus .page-content.admin .flex-container-nav > .ui.vertical.menu.has-scroll-hint-top {
    box-shadow: none;
  }

  body.show-sticky-side-menus .page-content.repository.actions .flex-container-nav > .ui.vertical.menu.has-scroll-hint-top {
    box-shadow: inset 0 1px 0 var(--color-green), inset 0 16px 14px -10px var(--color-green-badge-hover-bg);
  }

  body.show-sticky-side-menus .page-content.user.settings .flex-container-nav > .ui.vertical.menu.has-scroll-hint-top.has-scroll-hint-bottom,
  body.show-sticky-side-menus .page-content.repository.settings .flex-container-nav > .ui.vertical.menu.has-scroll-hint-top.has-scroll-hint-bottom,
  body.show-sticky-side-menus .page-content.organization.settings .flex-container-nav > .ui.vertical.menu.has-scroll-hint-top.has-scroll-hint-bottom,
  body.show-sticky-side-menus .page-content.admin .flex-container-nav > .ui.vertical.menu.has-scroll-hint-top.has-scroll-hint-bottom {
    box-shadow: inset 0 -1px 0 var(--color-green), inset 0 -16px 14px -10px var(--color-green-badge-hover-bg);
  }

  body.show-sticky-side-menus .page-content.repository.actions .flex-container-nav > .ui.vertical.menu.has-scroll-hint-top.has-scroll-hint-bottom {
    box-shadow: inset 0 1px 0 var(--color-green), inset 0 16px 14px -10px var(--color-green-badge-hover-bg), inset 0 -1px 0 var(--color-green), inset 0 -16px 14px -10px var(--color-green-badge-hover-bg);
  }

  body.show-sticky-side-menus .page-content.user.settings .flex-container-nav > .ui.vertical.menu.has-scroll-hint-top > .header.item,
  body.show-sticky-side-menus .page-content.repository.settings .flex-container-nav > .ui.vertical.menu.has-scroll-hint-top > .header.item,
  body.show-sticky-side-menus .page-content.repository.actions .flex-container-nav > .ui.vertical.menu.has-scroll-hint-top > .header.item,
  body.show-sticky-side-menus .page-content.organization.settings .flex-container-nav > .ui.vertical.menu.has-scroll-hint-top > .header.item,
  body.show-sticky-side-menus .page-content.admin .flex-container-nav > .ui.vertical.menu.has-scroll-hint-top > .header.item {
    box-shadow: inset 0 -1px 0 var(--color-green);
  }

  body.show-sticky-side-menus .page-content.user.settings .flex-container-nav > .ui.vertical.menu.has-scroll-hint-top > .header.item::after,
  body.show-sticky-side-menus .page-content.repository.settings .flex-container-nav > .ui.vertical.menu.has-scroll-hint-top > .header.item::after,
  body.show-sticky-side-menus .page-content.repository.actions .flex-container-nav > .ui.vertical.menu.has-scroll-hint-top > .header.item::after,
  body.show-sticky-side-menus .page-content.organization.settings .flex-container-nav > .ui.vertical.menu.has-scroll-hint-top > .header.item::after,
  body.show-sticky-side-menus .page-content.admin .flex-container-nav > .ui.vertical.menu.has-scroll-hint-top > .header.item::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -14px;
    height: 14px;
    pointer-events: none;
    background: linear-gradient(to bottom, var(--color-green-badge-hover-bg), transparent);
  }
}

@media (max-width: 767.98px) {
  .flex-container {
    flex-direction: column;
  }
  .flex-container-nav,
  .flex-container-sidebar {
    order: -1;
    width: auto;
  }

  body.show-sticky-side-menus .page-content.user.settings .flex-container-nav > .ui.vertical.menu,
  body.show-sticky-side-menus .page-content.repository.settings .flex-container-nav > .ui.vertical.menu,
  body.show-sticky-side-menus .page-content.repository.actions .flex-container-nav > .ui.vertical.menu,
  body.show-sticky-side-menus .page-content.organization.settings .flex-container-nav > .ui.vertical.menu,
  body.show-sticky-side-menus .page-content.admin .flex-container-nav > .ui.vertical.menu {
    position: static;
    max-height: none;
    overflow-y: visible;
    transform: none;
  }
}
