@import '../../style/variables.less';

.pro-tabs {
  &.pro-tabs-mode-card {
    &.pro-tabs-size-small {
      .pro-tabs-card {
        .pro-tabs-card-left {
          width: 84px !important;
        }
        .pro-tabs-card-right {
          width: 24px !important;
        }
        .pro-tabs-card-right img {
          width: 24px !important;
        }
      }
    }
    .@{ant-prefix}-tabs-nav-list {
      div[data-node-key='1'] {
        margin-left: 0 !important;
      }
    }
    .@{ant-prefix}-tabs-tab {
      margin-left: 10px !important;
      background: #ffffff !important;
      border-radius: 8px !important;
      &.@{ant-prefix}-tabs-tab-active {
        background: var(--ant-primary-1) !important;
        .pro-tabs-card {
          border-color: var(--ant-primary-color) !important;
        }
      }
      .pro-tabs-card {
        width: 100%;
        padding: 8px 12px !important;
        border: 1px solid #e7e7e7 !important;
        border-radius: 8px !important;
      }
    }
    .@{ant-prefix}-tabs-ink-bar {
      display: none !important;
    }
  }
  .@{ant-prefix}-tabs .@{ant-prefix}-tabs-nav-list .@{ant-prefix}-tabs-tab {
    padding: 0 !important;
  }

  .@{ant-prefix}-tabs-top > .@{ant-prefix}-tabs-nav::before,
  .@{ant-prefix}-tabs-bottom > .@{ant-prefix}-tabs-nav::before,
  .@{ant-prefix}-tabs-top > div > .@{ant-prefix}-tabs-nav::before,
  .@{ant-prefix}-tabs-bottom > div > .@{ant-prefix}-tabs-nav::before {
    border: none;
  }

  .@{ant-prefix}-tabs-nav-list {
    .@{ant-prefix}-tabs-tab {
      &:first-child {
        .pro-tabs-card {
          border-left: 1px solid var(--zaui-line, #dddddd);
        }
      }
    }
  }

  .@{ant-prefix}-tabs-tab-active {
    .pro-tabs-card {
      background: var(--ant-primary-color-active-deprecated-f-30, rgba(230, 247, 255, 0.3));
    }
  }

  .@{ant-prefix}-tabs-ink-bar {
    top: 0;
    height: 3px !important;
  }

  .pro-tabs-card {
    width: 192px;
    padding: calc(9px * var(--zaui-size; 1)) 16px calc(9px * var(--zaui-size; 1)) 24px;
    border: 1px solid var(--zaui-line, #dddddd);
    border-left: none;

    .pro-tabs-card-left {
      width: 104px;
      text-shadow: none;

      .pro-tabs-card-left-total {
        color: var(--zaui-text, #343434);
        font-weight: 600;
        font-size: var(--zaui-font-size-lg, 16px);
      }

      .pro-tabs-card-left-label {
        color: #626366;
        font-weight: 400;
        font-size: var(--zaui-font-size, 14px);
      }
    }

    .pro-tabs-card-right {
      display: flex;
      width: 48px;
      img {
        width: 48px;
      }
    }
  }
}

.pro-tabs-tab {
  .pro-tabs-card {
    .@{ant-prefix}-tag {
      min-width: 22px;
      margin-right: 0;
      padding: 0 var(--zaui-space-size-xs, 4px);
      text-align: center;
      border-radius: 12px;
    }

    .@{ant-prefix}-space-item {
      display: flex;
    }
  }
}

.@{ant-prefix}-tabs-dropdown-menu {
  .pro-tabs-card {
    width: 200px;
    padding: calc(9px * var(--zaui-size; 1)) 16px calc(9px * var(--zaui-size; 1)) 24px;
    border: 1px solid var(--zaui-line, #dddddd);
    border-radius: var(--zaui-border-radius, 8px);

    .pro-tabs-card-left {
      width: 104px;
      text-shadow: none;

      .pro-tabs-card-left-total {
        color: var(--zaui-text, #343434);
        font-weight: 600;
        font-size: var(--zaui-font-size-lg-title, 24px);
      }

      .pro-tabs-card-left-label {
        color: var(--aui-text, #343434);
        font-weight: 400;
        font-size: var(--zaui-font-size, 14px);
      }
    }

    .pro-tabs-card-right {
      display: flex;

      img {
        width: 48px;
      }
    }
  }
}