@import "../lib.less";
@import "../variables/components/layout.less";

.@{veui-prefix}-layout {
  display: flex;
  flex: auto;
  background-color: @veui-layout-background-color;
  min-height: 100%;
  min-width: @veui-layout-min-width;

  & & {
    min-height: auto;
    min-width: auto;
  }

  &-column {
    flex-direction: column;
  }

  &-row {
    flex-direction: row;
  }

  &:not(&-has-sidebar) {
    --dls-layout-header-height: unset;
    --dls-layout-footer-height: unset;
  }

  & > &-header,
  & > &-sidebar,
  & > &-footer {
    z-index: 10;
  }

  & > & > &-header,
  & > & > &-sidebar,
  & > & > &-footer {
    z-index: 9;
  }

  & > & > & > &-header,
  & > & > & > &-sidebar,
  & > & > & > &-footer {
    z-index: 8;
  }
}