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

  justify-content: flex-start;
  width: 100vw;
  height: 100vh;
  overflow: hidden;

  @include e(logo) {
    @include flex-center;

    width: getCssVar('layout-nav', 'width');
    height: getCssVar('layout-header', 'height');
  }

  @include e(logo-caption) {
    font-size: getCssVar('layout', 'caption-font-size');
  }

  @include when(collapse) {
    @include b(layout-content) {
      padding-left: getCssVar('layout-nav', 'width-collapse');
    }
  }
}

@include b(layout-nav) {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  background-color: getCssVar('layout-nav', 'bg-color');
  box-shadow: getCssVar('layout-nav', 'box-shadow');
}

@include b(layout-header) {
  position: absolute;
  top: 0;
  right: 0;
  z-index: 14;
  @include flex($horizontal: space-between);

  width: 100%;
  height: getCssVar('layout-header', 'height');
  padding: 0;
  line-height: getCssVar('layout-header', 'height');
  color: getCssVar('layout-header', 'text-color');
  background-color: getCssVar('layout-header', 'bg-color');
  box-shadow: getCssVar('layout-header', 'box-shadow');
  @include e(left) {
    @include flex;
  }

  @include e(icon) {
    @include flex($direction: column, $horizontal: center);

    font-size: getCssVar('layout-header', 'icon-font-size');
    cursor: pointer;
  }

  @include e(back-icon) {
    height: 100%;
    margin: getCssVar('layout-header', 'back-icon-margin');
    font-size: getCssVar('layout-header', 'back-icon-font-size');
    cursor: pointer;
  }
}

@include b(layout-content) {
  width: 100%;
  padding-left: getCssVar('layout-nav', 'width');
  background-color: getCssVar('layout-content', 'bg-color');
  transition: all 0.2s ease-in-out;
  @include e(main) {
    height: calc(100% - getCssVar('layout-header', 'height'));
    padding-top: getCssVar('layout-header', 'height');
  }
}
