@import "../palette";
@import "../variables";

.application-layout {
  display: flex;
  align-content: stretch;
  &.relative {
    position: relative;
    @include border;
    min-height: 90vh;
    overflow: hidden;
    .application-side-bar {
      position: absolute;
      min-height: 100%;
      bottom: 0;
    }
  }
  &--collapsed {
    .application-layout__content {
      margin: 0 0 0 $collapsed-side-bar-width;
      max-width: calc(100% - #{$collapsed-side-bar-width});
    }
  }

  &__content {
    transition: all $global-transition-duration;
    margin: 0 0 0 $side-bar-width;
    max-width: calc(100% - #{$side-bar-width});
    flex: 1;
    position: relative;
    padding: em-calc(30px) em-calc(45px);

    @media (max-width: $medium)  {
      margin: 0 0 0 $collapsed-side-bar-width;
      max-width: calc(100% - #{$collapsed-side-bar-width});
    }
  }
}