{$class-app}
  @extend $position-relative

$placeholder-app__item
  @extend $block
  col: $var-grid-cols, $var-grid-cols
  min-height: 100vh

{$class-app__aside}
  @extend $absolute-top-left, $placeholder-app__item, $level-200
  height: 100%
  overflow-x: hidden
  overflow-y: auto
  pull: 1, 1, false
  transition: $var-app__aside-transition unless $var-app__aside-transition is false
  @media (min-width: $var-breakpoints.md.value)
    col: 16, 6
  @media (min-width: $var-breakpoints.lg.value)
    col: 16, 5
    pull: 1, 0, false
  @media (min-width: $var-breakpoints.xl.value)
    col: 16, 3

{$class-app__aside--blue}
  @extend $scheme--blue

{$class-app__aside--black}
  @extend $scheme--black

{$class-app__aside--gray}
  @extend $scheme--gray

{$class-app__aside--green}
  @extend $scheme--green

{$class-app__aside--orange}
  @extend $scheme--orange

{$class-app__aside--purple}
  @extend $scheme--purple

{$class-app__aside--red}
  @extend $scheme--red

{$class-app__aside--white}
  @extend $scheme--white

{$class-app__aside--yellow}
  @extend $scheme--yellow

{$class-app__aside--expanded}
  pull: 1, 0, false

{$class-app__content}
  @extend $block, $placeholder-app__item
  @media (min-width: $var-breakpoints.md.value)
    col: 1, 1
    // push: 16, 6
  @media (min-width: $var-breakpoints.lg.value)
    col: 16, 11
    push: 16, 5
  @media (min-width: $var-breakpoints.xl.value)
    col: 16, 13
    push: 16, 3

{$class-app__content--blue}
  @extend $scheme--blue-dark

{$class-app__content--black}
  @extend $scheme--black-dark

{$class-app__content--gray}
  @extend $scheme--gray-dark

{$class-app__content--green}
  @extend $scheme--green-dark

{$class-app__content--orange}
  @extend $scheme--orange-dark

{$class-app__content--purple}
  @extend $scheme--purple-dark

{$class-app__content--red}
  @extend $scheme--red-dark

{$class-app__content--white}
  @extend $scheme--gray-bright

{$class-app__content--yellow}
  @extend $scheme--yellow-dark

{$class-app__title}
  @extend $flex-xs
  height: $var-app__title-height unless $var-app__title-height is false or is-ident($var-app__title-height)
  line-height: 1
  +cache('$app-content-padding'+ $var-app__title-padding)
    padding: $var-app__title-padding unless $var-app__title-padding is false or is-ident($var-app__title-padding)

{$class-app__title--blue}
  @extend $scheme--blue-bright

{$class-app__title--black}
  @extend $scheme--black-bright

{$class-app__title--gray}
  @extend $scheme--gray-bright

{$class-app__title--green}
  @extend $scheme--green-bright

{$class-app__title--orange}
  @extend $scheme--orange-bright

{$class-app__title--purple}
  @extend $scheme--purple-bright

{$class-app__title--red}
  @extend $scheme--red-bright

{$class-app__title--white}
  @extend $scheme--white

{$class-app__title--yellow}
  @extend $scheme--yellow-bright

{$class-app__toolbar}
  @extend {$class-app__title}

{$class-app__toolbar--black}
  @extend $scheme--black

{$class-app__toolbar--blue}
  @extend $scheme--blue

{$class-app__toolbar--gray}
  @extend $scheme--gray

{$class-app__toolbar--green}
  @extend $scheme--green

{$class-app__toolbar--orange}
  @extend $scheme--orange

{$class-app__toolbar--purple}
  @extend $scheme--purple

{$class-app__toolbar--red}
  @extend $scheme--red

{$class-app__toolbar--white}
  @extend $scheme--white

{$class-app__toolbar--yellow}
  @extend $scheme--yellow