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

  width: 100%;
  height: 100%;
  background-color: getCssVar('portlet-layout','bg-color');

  // 标题样式
  @include e(caption){
    max-width: getCssVar('portlet-layout','caption-max-width');
    @include e(caption-text){
      font-size: getCssVar('portlet-layout','caption-font-size');
      font-weight: getCssVar('portlet-layout','caption-font-weight');
      color: getCssVar('portlet-layout','caption-color');
      vertical-align: middle;
    }
  }

  // 无头部时的样式
  @include when(no-header) {
    >.#{bem(portlet-layout-content)}{
      height: 100%;
    }
  }
}

// 头部样式
@include b(portlet-layout-header) {
  @include flex(row, space-between, center);

  height: getCssVar('portlet-layout','header-height');
  padding: getCssVar('portlet-layout','header-padding');
  margin: getCssVar('portlet-layout','header-margin');
  background-color: getCssVar('portlet-layout','header-bg-color');
  border-bottom:  getCssVar('portlet-layout','header-border-bottom');
}

// 内容区样式
@include b(portlet-layout-content) {
  height: calc(100% - getCssVar('portlet-layout','header-height'));
  padding: getCssVar('portlet-layout','content-padding');
  margin: getCssVar('portlet-layout','content-margin');
  background-color: getCssVar('portlet-layout','content-bg-color');
}