// Application Chrome
.app-chrome {
  display: flex;
  height: 100vh;
  overflow: hidden;

  @each $theme, $color in $nav-themes {
    &--#{$theme} {
      background: $color;
    }
  }
}

.app-body {
  display: flex;
  flex-direction: column;
  flex: 1;
  max-width: 100%;
}

.app-content {
  background: palette(gray, x-light);
  flex: 1;
  overflow-x: hidden;
  overflow-y: scroll;
}

.app-footer__section:not(:empty) {
  padding: 1em;
}

.app-footer {
  display: flex;

  @each $theme, $color in $nav-themes {
    &--#{$theme} {
      background: $color;
    }
  }

  &__section {
    &--right {
      margin-left: auto;
    }
  }

  &:not(:empty) {
    box-shadow: 0 -2px 2px -1px palette(gray, light);
    z-index: $zIndex-10;
  }
}