// 应用壳
.app-container {
  width  : 100%;
  height : 100%;
  padding: 0;
  margin : 0;

  >.ant-layout {
    height: 100%;
  }
}

// 应用头部
.app-header.ant-layout-header {
  .flex(row, space-between, center);
  height     : 50px;
  line-height: 50px;
  padding    : 0 20px;

  .app-header__left {
    .flex(row, flex-start, center);
    height       : 100%;
    width        : auto;
    padding-right: 20px;

    .app-header__left__logo {
      .flex(row, flex-start, center);
      width : 180px;
      height: 50px;

      .logo__menuicon {
        display    : inline-block;
        height     : 50px;
        line-height: 50px;
        cursor     : pointer;
      }

      .app-icon {
        max-width: 20px;
      }

      >span {
        display     : block;
        padding-left: 12px;
        text-align  : left;
        font-weight : 600;
        font-size   : 16px;
        cursor      : pointer;
        .textellipsis;
      }
    }

    .anticon {
      font-size: 20px;
      padding  : 4px;
      cursor   : pointer;
    }
  }

  .app-header__center {
    .flex(row, flex-start, center);
    height   : 100%;
    flex-grow: 1;

    &.app-header__center--center {
      justify-content: center;
    }

    &.app-header__center--right {
      justify-content: flex-end;
    }
  }

  .app-header__right {
    .flex(row, flex-end, center);
    height     : 100%;
    flex-shrink: 0;
  }
}

// 应用正文
.app-content {
  display: flex;
  width  : 100%;

  .app-content__left {
    max-height: 100%;
  }

  .app-content__right {
    height: 100%;
  }

  .app-content__left__container {
    height: 100%;
    .flex(column, flex-start, center);
  }

  .app-content__left__container__top {
    padding: 10px;
  }

  .app-content__left__container__top,
  .app-content__left__container__center,
  .app-content__left__container__footer {
    width: 100%;
  }

  .app-content__left__container__center {
    flex-grow: 1;
    overflow: auto;
  }
}

.app-content {
  >.ant-layout {
    background-color: @container-background;
  }

  .ant-card {
    background-color: @layout-body-background;
  }
}

.app-content__left__container__top {
  background-color: @layout-body-background;
}

.app-header--dark.ant-layout-header.app-header {
  @bgColor        : @config-header-bg-dark;
  background-color: @bgColor;
  color           : contrast(@bgColor, darken(@bgColor, 80%), lighten(@bgColor, 80%));
}

.app-header--light.ant-layout-header.app-header {
  @bgColor        : @config-header-bg-light;
  background-color: @bgColor;
  color           : contrast(@bgColor, darken(@bgColor, 80%), lighten(@bgColor, 80%));
}