@import "../../../../theme.scss";

.sfsync-app-layout {
  display: flex;
  // Keeps the shell filling at least the viewport height even when a page's
  // content is short (previously handled per-page by .sfsyncSettings-wrapper's
  // own min-height, now removed in Task 9). Flex row children stretch to this
  // height by default (align-items: stretch), so __sidebar doesn't need its
  // own min-height anymore.
  min-height: calc(100vh - #{$shell-chrome-offset});

  // Sticky, capped to the viewport (minus the WP adminbar) rather than
  // stretching to match __main-column's height. Without this, a tall page
  // (e.g. Grid Manager with hundreds of posts) makes the flex row - and so
  // this sidebar, via the default align-items:stretch - as tall as the
  // content, which pushes SidebarNavigation's own pinned footer (Add
  // account) down to wherever that content happens to end instead of
  // keeping it reachable in the viewport. Same top-offset convention as
  // .pageHeader-container.
  &__sidebar {
    flex-shrink: 0;
    width: $sfsync-sidebar-width;
    background-color: $primary-bg;
    position: sticky;
    top: $wp-adminbar-height;
    height: calc(100vh - #{$wp-adminbar-height});
    z-index: $z-sticky;

    @media (max-width: 782px) {
      top: $wp-adminbar-height-mobile;
      height: calc(100vh - #{$wp-adminbar-height-mobile});
    }

    // WP core switches #wpadminbar to position:absolute below this width
    // (see the matching note in page-header-styles.scss), so it scrolls
    // away with the page instead of staying pinned.
    @media (max-width: 600px) {
      top: 0;
      height: 100vh;
    }
  }

  &__main-column {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
  }

  &__content {
    flex: 1;
    padding: $space-10;
  }

  &__content--full-bleed {
    padding: 0;
  }

  // Content gutter grows and the column caps/centers on very wide screens,
  // matching sideconvo-wp-plugin's app-layout.css breakpoints.
  @media screen and (min-width: 1440px) {
    &__content {
      padding: $space-12;
    }

    &__content--full-bleed {
      padding: 0;
    }
  }

  @media screen and (min-width: 1920px) {
    &__content {
      max-width: 1536px;
      margin: 0 auto;
    }

    &__content--full-bleed {
      max-width: 100%;
      margin: 0;
    }
  }

  &--mobile {
    flex-direction: column;

    .sfsync-app-layout__sidebar {
      width: unset;
      min-height: 0;
      // Mobile renders this as a collapsible top bar, not a side column -
      // undo the desktop sticky/height-capped rule above.
      position: static;
      height: auto;
    }
  }
}