@include b(view-layout) {
  @include set-component-css-var('view-layout', $view-layout);
  @include set-component-css-var('view-layout-header', $view-layout-header);
  @include set-component-css-var('view-layout-content', $view-layout-content);

  @include flex(column);

  position: relative;
  width: 100%;
  height: 100%;

  // 工具栏占位
  @include e(toolbar) {
    @include flex;
  }

  @include when(no-header) {
    > .#{bem(view-layout-content)} {
      margin: 0;
    }
  }

  @include b(view-layout-header) {
    flex-shrink: 0;
    width: 100%;
    height: getCssVar('view-layout', 'header-height');
    background: getCssVar('view-layout', 'header-bg-color');
    border-bottom: getCssVar('view-layout', 'header-border-bottom');
    @include b(view-layout-header-content) {
      @include flex(row, space-between);
      @include e(right) {
        @include flex(row, space-between);
      }
      @include e(caption) {
        @include flex(row, flex-start, center);

        max-width: getCssVar('view-layout-header', 'caption-max-width');
        height: 100%;
        font-size: getCssVar('view-layout-header', 'caption-font-size');
        font-weight: getCssVar('view-layout-header', 'caption-font-weight');
        color: getCssVar('view-layout-header', 'caption-color');
      }
    }
  }

  @include b(view-layout-content) {
    @include flex;

    flex: 1 1 auto;
    min-height: getCssVar('view-layout-content', 'min-height');
    overflow: auto;
    background-color: getCssVar('view-layout-content', 'bg-color');
    border-radius: getCssVar('view-layout-content', 'border-radius');
    @include e(body) {
      flex: 1 1 auto;
      overflow: auto;
      background-color: getCssVar('view-layout-content', 'body-bg-color');
    }
  }

  // 路由模式下
  @include m(route) {
    @include b(view-layout-header) {
      padding: getCssVar('view-layout', 'header-padding');
    }
    @include b(view-layout-content) {
      padding: getCssVar('view-layout-content', 'padding');
      margin: getCssVar('view-layout-content', 'margin');
    }
  }

  // 抽屉
  @include m(drawer) {
    @include set-component-css-var(
      'view-layout-drawer-header',
      $view-layout-drawer-header
    );
    @include set-component-css-var(
      'view-layout-drawer-content',
      $view-layout-drawer-content
    );
    @include b(view-layout-header) {
      padding: getCssVar('view-layout-drawer-header', 'padding');
    }
    @include b(view-layout-content) {
      min-height: getCssVar('view-layout-drawer-content', 'min-height');
      padding: getCssVar('view-layout-drawer-content', 'padding');
    }
  }

  // 模态
  @include m(modal) {
    @include set-component-css-var(
      'view-layout-modal-header',
      $view-layout-modal-header
    );
    @include set-component-css-var(
      'view-layout-modal-content',
      $view-layout-modal-content
    );
    @include b(view-layout-header) {
      padding: getCssVar('view-layout-modal-header', 'padding');
    }
    @include b(view-layout-content) {
      min-height: getCssVar('view-layout-modal-content', 'min-height');
      padding: getCssVar('view-layout-modal-content', 'padding');
    }
  }

  // 嵌入
  @include m(embed) {
    @include set-component-css-var(
      'view-layout-embed-header',
      $view-layout-embed-header
    );
    @include set-component-css-var(
      'view-layout-embed-content',
      $view-layout-embed-content
    );
    @include b(view-layout-header) {
      height: getCssVar('view-layout-embed-header', 'height');
      padding: getCssVar('view-layout-embed-header', 'padding');
      line-height: getCssVar('view-layout-embed-header', 'line-height');
      @include b(view-layout-header-content) {
        height: getCssVar('view-layout-embed-header', 'content-height');
        @include e(caption) {
          font-size: getCssVar('view-layout-embed-header', 'caption-font-size');
          color: getCssVar('view-layout-embed-header', 'caption-color');
        }
      }
    }
    @include b(view-layout-content) {
      padding: getCssVar('view-layout-embed-content', 'padding');
      margin: getCssVar('view-layout-embed-content', 'margin');
    }
  }
}
