@import "../../style/themes/default";
@import "../../style/mixins/index";

@layout-prefix-cls: ~"@{mkui-prefix}-layout";
@layout-list-prefix-cls: ~"@{layout-prefix-cls}-list";
.@{layout-list-prefix-cls} {
  background-color: #fff;
  position: relative;
  height: 100%;
  &-header {
    position: absolute;
    top: 0;
    left: 0;
    padding: 0 @layout-detail-horiz-padding;
    height: @layout-detail-head-height;
    width: 100%;
    line-height: @layout-detail-head-height;
    background-color: @background-color-light;
  }
  &-content {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    height: 100%;
    &.@{layout-list-prefix-cls}-has-head {
      padding-top: @layout-detail-head-height;
    }
    &-filter {
      vertical-align: top;
    }
    &-toolbar {
      padding: 0 @layout-detail-horiz-padding;
      height: @layout-toolbar-height;
      line-height: @layout-toolbar-height;
      > button {
        margin-right: @layout-toolbar-button-gutter;
      }
    }
    &-table {
      flex-grow: 1;
      overflow: hidden;
      .mkui-table-wrapper {
        height: 100%;
        .mkui-spin-nested-loading {
          height: 100%;
          .mkui-spin-container {
            height: 100%;
            display: flex;
            flex-direction: column;
            .mkui-table {
              overflow: auto;
              flex-grow: 1;
              border-bottom: 1px solid @border-color-split;
              .mkui-table-content {
                height: 100%;
                .mkui-table-scroll {
                  height: 100%;
                  display: flex;
                  flex-direction: column;
                  .mkui-table-header {
                    flex-shrink: 0;
                  }
                  .mkui-table-body {
                    max-height: none !important;
                    flex-grow: 1;
                  }
                }
              }
            }
            .mkui-pagination {
              text-align: right;
            }
          }
        }
      }
    }
  }
  &-auto-height {
    height: 100%;
    overflow: hidden;
  }
  &-has-head {
    padding-top: 50px;
  }
}