/* Layouts */

// sidebar
.sidebar {
  position: fixed;
  width: $sidebar-width-lg;
  height: 100vh;
  top: 0;
  overflow: auto;

  .sidebar-brand-wrapper {
    margin-bottom: 60px;
  }

  &.sidebar-offcanvas {
    -webkit-transition: all 0.25s ease-out;
    -o-transition: all 0.25s ease-out;
    transition: all 0.25s ease-out;

    @include media-breakpoint-down(md) {
      height: calc(100vh - #{$navbar-height});
      top: $navbar-height;
      left: -$sidebar-width-lg;

      &.active {
        left: 0;
      }
    }

    @include media-breakpoint-up(lg) {
      left: 0;
    }
  }
}


// page-body
.page-body-wrapper {
  display: flex;
  min-height: calc(100vh - #{$navbar-height});
  width: calc(100% - #{$sidebar-width-lg});

  margin-left: $sidebar-width-lg;
  padding-left: 0;
  padding-right: 0;

  transition: width 0.25s ease, margin 0.25s ease;
  -webkit-transition: width 0.25s ease, margin 0.25s ease;
  -moz-transition: width 0.25s ease, margin 0.25s ease;
  -ms-transition: width 0.25s ease, margin 0.25s ease;

  .navbar {
    left: $sidebar-width-lg;
  }

  @include media-breakpoint-down(md) {
    margin-left: 0;
    width: 100%;

    .navbar {
      left: 0;
      width: 100vw;
    }

    .content-wrapper {
      padding: 2.25rem #{($grid-gutter-width * 0.5)};
    }
  }

  .main-panel {
    margin-top: $navbar-height;
    height: calc(100vh - #{$navbar-height});
    overflow-y: scroll;
  }

}

.sidebar-hide {
  @media (min-width: 992px) {
    .sidebar-offcanvas {
      left: -$sidebar-width-lg;
    }

    .page-body-wrapper {
      width: 100%;
      margin-left: 0;

      .navbar {
        left: 0;
        width: 100vw;
      }
    }
  }
}