@layout-prefix: ~'@{prefix}layout';
@header-prefix: ~'@{prefix}layout-header';
@content-prefix: ~'@{prefix}layout-content';
@footer-prefix: ~'@{prefix}layout-footer';
@sider-prefix: ~'@{prefix}layout-sider';

.@{layout-prefix} {
  position: relative;
  display: flex;
  flex-direction: column;
  flex: auto;
  min-height: 0;
  z-index: 1;
  overflow: hidden;
  .h-func-clearfix();

  & & {
    overflow: hidden;
  }
  &&-has-sider {
    flex-direction: row;
  }
  &&-header-fixed {
    padding-top: @layout-header-height;
    > .@{header-prefix} {
      top: 0;
      left: 0;
      right: 0;
      position: fixed;
      z-index: 2;
    }
    > .@{content-prefix} {
      z-index: 1;
    }
    > .@{sider-prefix} {
      z-index: 1;
    }
  }

  &&-sider-fixed {
    padding-left: @layout-sider-width;
    > .@{content-prefix} {
      z-index: 1;
    }
    > .@{sider-prefix} {
      position: fixed;
      bottom: 0;
      top: 0;
      left: 0;
      overflow: auto;
      z-index: 2;
    }
  }

  &&-sider-fixed&-sider-collapsed {
    padding-left: @layout-sider-collapse-width;
  }

  &&-sider-collapsed {
    > .@{sider-prefix} {
      width: @layout-sider-collapse-width;
      flex: 0 0 @layout-sider-collapse-width;
      max-width: @layout-sider-collapse-width;
      min-width: @layout-sider-collapse-width;
      overflow: initial;
      z-index: 2;
    }
  }
  &&-header-fixed > &-sider-fixed > .@{sider-prefix} {
    top: @layout-header-height;
  }
  &&-has-sider > &-header-fixed > .@{header-prefix} {
    left: @layout-sider-width;
  }
  &&-sider-collapsed > &-header-fixed > .@{header-prefix} {
    left: @layout-sider-collapse-width;
  }
}

.@{header-prefix} {
  height: @layout-header-height;
  line-height: @layout-header-height;
  z-index: 1;
  &-theme-dark {
    color: rgba(255, 255, 255, 0.65);
    background: @menu-dark-color;
  }
  &-theme-white {
    background: #fff;
  }
}

.@{sider-prefix} {
  transition: all 0.2s;
  position: relative;
  flex: 0 0 @layout-sider-width;
  max-width: @layout-sider-width;
  min-width: @layout-sider-width;
  width: @layout-sider-width;
  z-index: 1;
  &-theme-dark {
    background: @menu-dark-color;
  }
  &-theme-white {
    background: #fff;
  }
}

.@{content-prefix} {
  position: relative;
  flex: auto;
}