.app-view-layout {
  display: flex;
  width: 100%;
  height: 100%;
  flex-direction: column;
  padding: var(--app-view-layout-padding);
  background-color: var(--app-view-layout-bg-color);
}
.app-view-layout__header {
  flex: none;
  display: flex;
  flex-direction: column;
  padding: 0 10px;
  background-color: var(--app-view-layout-header-bg-color);
  border-bottom: 1px solid var(--app-view-layout-header-border-bottom);
}
.app-view-layout__header-content {
  display: flex;
  justify-content: space-between;
  height: var(--app-view-layout-header-height);
  min-height: var(--app-view-layout-header-min-height);
  margin: --app-view-layout-header-padding;
  .app-view__caption {
    white-space: nowrap;
    font-size: var(--app-view-caption-font-size);
  }
}
.app-view-layout__body {
  display: flex;
  flex: auto;
  height: 100%;
  padding: 10px;
  flex-direction: column;
  overflow: auto;
  background-color: var(--app-view-layout-body-bg-color);
}
.app-view-layout__footer {
  flex: none;
  display: flex;
  justify-content: space-between;
  background-color: var(--app-view-layout-footer-bg-color);
}