.generate-z-index(@n, @i: 1) when (@i =< @n) {
  &:nth-child(@{i}){
    z-index: (50-@i);
  }
  .generate-z-index(@n, (@i + 1));
}
.ant-tabs.ant-tabs-card{
  &.gradient.ant-tabs-top, &.ant-tabs-top {
    z-index: 0;
    margin-left: -10px;
    &.initClass {
      .ant-tabs-ink-bar {
        border-left: 4px solid @white-color;
        border-right: 4px solid @white-color;
        box-sizing: content-box;
      }
    }
    &.tabs__transform-left {
      .ant-tabs-ink-bar {
        margin-left: 3px;
      }
    }
    &.tabs__transform-right {
      .ant-tabs-ink-bar {
        margin-left: -4px;
      }
    }
    & > .ant-tabs-bar {
      .ant-tabs-nav-scroll {
        height: 39px;
        padding-top: 9px;
        overflow: initial;
      }
      .ant-tabs-nav-wrap {
        overflow: initial;
      }
      .ant-tabs-nav-container-scrolling {
        padding-left: 0;
        padding-right: 0;
      }
      .ant-tabs-ink-bar {
        height: 36px;
        background: @bg-color;
        box-shadow: @shadow-outset-tabs-active-color;
        // z-index: 199;
        border-radius: 12px 12px 0 0;
        border-left: 4px solid @white-color;
        border-right: 4px solid @white-color;
        box-sizing: content-box;
        visibility: initial;
        margin-left: -4px;
        z-index: 51;
      }
      &.ant-tabs-card-bar {
        border: none;
        margin: 0;
        position: relative;
        margin-left: 10px;
        &::before {
          content: '';
          position: absolute;
          left: 0;
          right: 0;
          bottom: -5px;
          height: 4px;
          filter: blur(2px);
          background: linear-gradient(135deg, #2ea1db 0%, rgba(46, 161, 219, 0) 100%);
        }
        .ant-tabs-nav-container {
          position: relative;
          overflow: initial;
          &::before {
            content: '';
            position: absolute;
            width: 100%;
            left: 0;
            right: 0;
            bottom: -2px;
            height: 3px;
            background: linear-gradient(135deg, @primary-color 20%, rgba(46, 161, 219, 0) 100%);
            z-index: 200;
          }
        }
        .ant-tabs-tab {
          position: relative;
          border-top-left-radius: 0;
          border-top-right-radius: 8px;
          height: 32px;
          line-height: 30px;
          padding: 0 28px 0 24px;
          min-width: 100px;
          font-style: normal;
          font-weight: 400;
          font-size: 14px;
          // padding: 0 24px;
          text-align: center;
          border: none;
          margin-right: 0;
          color: @tabs-btn-textColor;
          vertical-align: bottom;
          box-shadow: @shadow-outset-tabs-color;
          // background: linear-gradient(rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 1) 100%);
          background-color: @white-color;
          transition: none;
          .generate-z-index(30);
          &:not(:first-child):not(.ant-tabs-tab-active) {
            &::before {
              position: absolute;
              content: '';
              width: 4px;
              height: 100%;
              left: -4px;
              top: 0;
              border-radius: 0;
              border: none;
              background: @white-color;
            }
          }
          &:first-child {
            border-top-left-radius: 8px;
          }
          &.ant-tabs-tab-active {
            border-top-left-radius: 8px;
            color: @white-color;
            // z-index: 100;
            line-height: 32px;
            height: 32px;
            font-style: normal;
            font-weight: 500;
            font-size: 14px;
            // border-radius: 12px 12px 0 0;
            border-radius: 9px 9px 0 0;
            // background: #000;
            top: 0;
            // padding: 0 24px;
            box-shadow: @primary-shadow;
            background: @primary-color;
            z-index: 52;
            // z-index: 11;

            &::before {
              border: none;
            }
          }
        }
      }
      .ant-tabs-tab-prev {
        display: none;
      }
      .ant-tabs-tab-next {
        display: none;
      }
    }
  }
  .ant-tabs-top-content, .ant-tabs-bottom-content {
    padding-top: 10px;
  }
  .ant-tabs-top-content {
    margin-left: 10px;
    padding-right: 10px;
  }
  &.shadow.ant-tabs-top {
    & > .ant-tabs-bar {
      margin-left: 0;
      .ant-tabs-nav-scroll {
        height: auto;
        padding-top: 0;
        overflow-y: auto;
      }
      &.ant-tabs-card-bar {
        border: none;
        &:before {
          display: none;
        }
        &::after {
          display: none;
        }
        .ant-tabs-nav-container {
          height: 34px;
          &::before {
            height: 0;
          }
        }
        .ant-tabs-tab {
          font-style: normal;
          font-weight: 500;
          font-size: 14px;
          line-height: 26px;
          height: 28px;
          padding: 1px 16px;
          margin: 1px 2px;
          background-color: transparent;
          border: none;
          box-shadow: none;
          transition: none;
          top: 0;
          &::before {
            visibility: hidden;
          }
        }
        .ant-tabs-tab-active {
          position: relative;
          box-shadow: @shadow-outset-filter-color;
          border-radius: 20px;
          background-color: @white-color;
          color: @white-color;
          height: 28px;
          line-height: 26px;
          & + .ant-tabs-tab {
            padding-left: 16px;
          }
          &::after {
            position: absolute;
            content: '';
            left: 3px;
            top: 3px;
            right: 3px;
            bottom: 3px;
            border-radius: inherit;
            box-shadow: @primary-shadow;
            background-color: @btn-light-color;
            z-index: -1;
          }
        }
      }
      .ant-tabs-ink-bar {
        visibility: hidden;
      }
      .ant-tabs-tab-prev {
        display: none;
      }
      .ant-tabs-tab-next {
        display: none;
      }
      .ant-tabs-nav {
        height: 34px;
        background-color: @tabs-shadow-bgColor;
        padding: 2px 3px;
        border-radius: 20px;
      }
    }
  }
}
.ant-tabs-nav {
  .ant-tabs-tab {
    padding: 13px 16px;
    &:hover, &:focus {
      color: @primary-color;
    }
  }
  .ant-tabs-tab-active {
    color: @primary-color;
  }
}
.ant-tabs-ink-bar {
  background-color: @primary-color;
}
.app-container {
  .ant-tabs.ant-tabs-card.ant-tabs-top > .ant-tabs-bar .ant-tabs-ink-bar, 
  .ant-tabs.ant-tabs-card.gradient.ant-tabs-top > .ant-tabs-bar .ant-tabs-ink-bar {
    margin-left: -0.26rem;
  }
}