.zhny-tabbar-box {
  border-radius: 4px;
  height: 100%;
  color: @body-light-text;
  padding: 0 10px 10px;
  background-color: @tab-box-bg;
  .skin-dark & {
    color: #fff;
    background-color: @tab-box-dark-bg;
  }
  .zhny-tab-list {
    position: relative;
    height: @tab-box-title-height;
    margin-bottom: @tab-box-title-body-gap;
    &::before {
      position: absolute;
      right: 0;
      left: 0;
      bottom: 0;
      border-bottom-width: 1px;
      border-bottom-style: solid;
      border-bottom-color: @tab-box-title-bottom-line-color;
      content: '';
      .skin-dark & {
        border-bottom-color: @tab-box-title-bottom-dark-line-color;
      }
    }
    .zhny-tab-inline-list {
      position: relative;
      display: inline-flex;
      height: 100%;
    }
    .zhny-tab-list-item {
      display: flex;
      align-items: center;
      padding: 7px 0;
      height: 100%;
      font-size: @tab-box-title-fontsize;
      cursor: pointer;
      color: @tab-box-default-title-color;
      .skin-dark & {
        color: @tab-box-default-dark-title-color;
      }
      &:not(:last-child) {
        margin-right: @tab-box-title-gap;
      }
      &:not(.zhny-tab-list-item-disabled, .zhny-tab-list-item-acitve):hover {
        color: @blue-primary;
        .skin-red & {
          color: @red-primary;
        }
        .skin-green & {
          color: @green-primary;
        }
        .skin-yellow & {
          color: @yellow-primary;
        }
        .skin-gray & {
          color: @yellow-primary;
        }
        .skin-dark & {
          color: #cad6ff;
        }
      }
      &.zhny-tab-list-item-disabled {
        cursor: not-allowed;
        user-select: none;
        color: @tab-box-disabled-title-color !important;
        span {
          pointer-events: none;
        }
        .skin-dark & {
          color: @tab-box-disabled-dark-title-color!important;
        }
      }
      &.zhny-tab-list-item-acitve {
        color: @tab-box-title-selected-color;
        .skin-dark & {
          color: @tab-box-title-selected-dark-color;
        }
      }
    }
    .zhny-tab-ink {
      position: absolute;
      bottom: 0;
      height: @tab-box-ink-height;
      background: @blue-primary;
      transition: left 0.3s, width 0.3s, right 0.3s;
      .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-tabbar-right-slots {
      position: absolute;
      right: 0;
      top: 50%;
      transform: translateY(-50%);
      .ant-form-inline {
        .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;
            }
          }
        }
      }
      .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;
            }
          }
        }
      }
    }
    .zhny-tabbar-left-slots {
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      .iconfont {
        font-size: 20px;
        cursor: pointer;
        &:hover {
          color: @blue-primary;
        }
      }
    }
  }
  .zhny-tabbar-box-content {
    height: calc(100% - @tab-box-title-height - @tab-box-title-body-gap);
    overflow-y: auto;
    .skin-dark & {
      .scroll-style-dark();
    }
  }
}