.zhny-container {
  display: flex;
  flex-direction: column;
  padding: 0 10px;
  border-radius: 4px;
  color: @tab-box-default-title-color;
  background: @tab-box-bg;
  .skin-dark & {
    color: @tab-box-default-title-color;
    background: @tab-box-dark-bg;
  }

  // 回退按钮（仅在一级标题下生效）
  &.zhny-container-type-1 {
    &.zhny-container-back {
      .zhny-container-text::after {
        display: none;
      }
      .back-info {
        display: flex;
        align-items: center;
        position: relative;
        color: @blue-primary;
        cursor: pointer;
        padding-right: 10px;
        margin-right: 10px;
        user-select: none;
        font-size: 14px;
        .skin-red & {
          color: @red-primary;
        }
        .skin-green & {
          color: @green-primary;
        }
        .skin-gray & {
          color: @gray-primary;
        }
        .skin-dark & {
          color: #95ADFF;
        }
        &::after {
          position: absolute;
          content: '';
          right: 0;
          width: 1px;
          height: 20px;
          background: #d8d8d8;
          top: calc(50%);
          transform: translateY(-50%);
          .skin-dark & {
            background: #3f465c;
          }
        }
        .back-icon {
          margin-right: 2px;
        }
      }
    }
  }

  // 二级标题样式
  &.zhny-container-type-2 {
    .zhny-container-title {
      height: auto;
    }
    .zhny-container-text::after {
      display: none;
    }
  }

  // 容器标题区域
  .zhny-container-title {
    flex-shrink: 0;
    height: @tab-box-title-height;
    display: flex;
    align-items: center;
    font-size: @tab-box-title-fontsize;
    border-bottom-width: 1px;
    border-bottom-style: solid;
    border-bottom-color: @tab-box-title-bottom-line-color;
    .skin-dark & {
      border-bottom-color: @tab-box-title-bottom-dark-line-color;
    }
    // 标题文字
    .zhny-container-text {
      flex-shrink: 0;
      position: relative;
      display: inline-flex;
      align-items: center;
      height: 100%;
      max-width: 80%;
      margin-right: 10px;
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
      color: @tab-box-title-selected-color;
      .skin-dark & {
        color: #fff;
      }
      &::after {
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
        height: @tab-box-ink-height;
        background: @blue-primary;
        content: '';
        .skin-red & {
          background: @red-primary;
        }
        .skin-green & {
          background: @green-primary;
        }
        .skin-yellow & {
          background: @yellow-primary;
        }
        .skin-gray & {
          background: @gray-primary;
        }
        .skin-dark & {
          background: @dark-primary;
        }
      }
    }
    // 标题左侧插槽
    .zhny-container-left-slots {
      .iconfont {
        &:not(:first-child) {
          margin-left: 10px;
        }
      }
    }
    .zhny-container-left-slots {
      display: inline-block;
      margin-left: 20px;
      .zhny-container-icon {
        font-size: 20px;
        cursor: pointer;
        &:hover {
          color: @blue-primary;
        }
        &.icon-disabled {
          color: #cecece !important;
          cursor: not-allowed !important;
        }
      }
    }
    .zhny-container-left-slotsdom {
      display: inline-block;
      margin-left: 10px;
      font-size: 0;
      .iconfont {
        font-size: 20px;
        cursor: pointer;
        &:hover {
          color: @blue-primary;
        }
        &.icon-disabled {
          color: #cecece !important;
          cursor: not-allowed !important;
        }
      }
    }
    // 标题右侧插槽
    .zhny-container-right-slots {
      height: 100%;
      flex: 1;
      min-width: 0px;
      display: flex;
      align-items: center;
      justify-content: flex-end;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      flex-wrap: nowrap;

      .ant-input-group.ant-input-group-compact {
        &::before,
        &::after {
          display: block;
        }
        > .ant-form-item {
          margin: 0;
          &:nth-of-type(1) {
            .ant-input-number {
              border-radius: 4px 0 0 4px;
            }
          }
          &:nth-of-type(2) {
            .ant-input-number {
              border-radius: 0 4px 4px 0;
            }
          }
        }
      }
      .ant-form-inline {
        flex-wrap: nowrap;
        justify-content: flex-end;
        .ant-form-item {
          margin-right: @tab-box-slot-form-item-gap;
          margin-bottom: 0;
          label {
            margin-right: @tab-box-slot-form-label-text-gap;
            &::after {
              display: none;
            }
          }
        }
        button + button {
          margin-left: @tab-box-slot-form-button-gap;
        }
      }
      .right-slots-box-hidden {
        display: none;
      }
      .show-filter-btn {
        margin-left: 10px;
      }
    }
  }

  // 容器内容区域
  .zhny-container-content {
    flex: 1;
    min-height: 0;
    height: 100%;
    font-size: 14px;
    display: flex;
    flex-direction: column;
    position: relative;
    .skin-dark & {
      color: #fff;
    }

    // 内容区域头部插槽
    .zhny-container-content-header {
      flex-shrink: 0;
    }

    // 内容区域高级过滤区域
    .zhny-container-advanced-filter {
      height: 0px;
      overflow: hidden;

      &.zhny-container-advanced-filter-show {
        height: auto;
        padding: 10px;
        background: @container-light-filter-bg;
      }
    }

    // 内容区域主体区域
    .zhny-container-content-body {
      flex: 1;
      min-height: 0;
      padding: 10px 0;
    }

    // 内容区域滚动区域
    .zhny-container-scroll-content {
      height: 100%;
      overflow-y: auto;
      .skin-dark & {
        .scroll-style-dark();
      }
    }
  }
}