/* ==================================
   #MAIN CONTAINER
   ================================== */

/* Variables
   ========================================================================== */

$au-main-container-breakpoint: medium !default;

/* Component
   ========================================================================== */

.au-c-main-container {
  display: flex;
  flex-wrap: wrap;

  .au-c-app & {
    position: relative;
    flex-grow: 1;
  }

  @include mq($au-main-container-breakpoint) {
    height: calc(100vh - 4.2rem);

    .au-c-app & {
      height: auto;
      overflow: hidden;
    }
  }
}

.au-c-main-container__sidebar {
  flex-basis: 100%;

  @include mq($au-main-container-breakpoint) {
    height: 100%;
    flex-basis: 25rem;
    flex-grow: 1;
  }
}

.au-c-main-container__sidebar--small {
  @include mq($au-main-container-breakpoint) {
    flex-basis: 17rem;
    width: 17rem;
  }
}

.au-c-main-container__sidebar--large {
  @include mq($au-main-container-breakpoint) {
    flex-basis: 44rem;
    width: 44rem;
  }
}

.au-c-main-container__sidebar--collapsed {
  @include mq($au-main-container-breakpoint) {
    flex-basis: 5rem;
    width: 5rem;
  }
}

.au-c-main-container__content {
  flex-basis: 100%;
  max-width: 100%;

  @include mq($au-main-container-breakpoint) {
    height: 100%;
    flex-basis: 0;
    flex-grow: 999;
  }
}

.au-c-main-container__content--scroll {
  @include mq($au-main-container-breakpoint) {
    height: 100%;
    overflow: auto;
  }
}