@use "sass:map";
@use "sass:math";
@use "./base";
@use "./button";

// ===== tabs =====
$tabs-size-list: (sm, md) !default;
$tabs-font-size: (
  sm: base.$font-size-sm,
  md: base.$font-size-md,
) !default;
$tabs-border-color: base.$color-border-intensive !default;
$tabs-tab-padding-vertical: base.padding(2) !default;
$tabs-tab-padding-horizontal: (
  sm: base.padding(3),
  md: base.padding(4),
) !default;
$tabs-tab-min-width: (
  sm: 48px + map.get($tabs-tab-padding-horizontal, md) * 2,
  md: 56px + map.get($tabs-tab-padding-horizontal, md) * 2,
) !default;

$tabs-tab-border-radius: base.$border-radius-medium !default;

$tabs-tab-color: base.$color-text-normal !default;
$tabs-tab-color-hover: base.color-brand(5) !default;
$tabs-tab-color-active: base.color-brand(7) !default;
$tabs-tab-color-disabled: base.$color-text-disabled !default;
$tabs-tab-color-danger: base.color-danger() !default;
$tabs-tab-color-danger-disabled: base.color-danger(3) !default;

$tabs-tab-active-border-width: 2px !default;
$tabs-tab-active-color: base.color-brand(6) !default;
$tabs-tab-active-color-disabled: base.color-brand(3) !default;

$tabs-tab-ellipsis-button-size: 12px !default;
$tabs-tab-ellipsis-button-padding-vertical: $tabs-tab-padding-vertical !default;
$tabs-tab-ellipsis-button-padding-horizontal: base.padding(2) !default;

$tabs-tab-add-button-margin: base.padding(3) !default;
$tabs-tab-add-button-padding-horizontal: $tabs-tab-add-button-margin - base.$border-width-base;
$tabs-tab-add-button-padding-vertical: (
  // add-button 尺寸恒为 md, 需要对 padding 进行调整
  sm: $tabs-tab-add-button-padding-horizontal - math.div(button.btn-plain-icon-only-size(md) - button.btn-plain-icon-only-size(sm), 2),
  md: $tabs-tab-add-button-padding-horizontal,
);
$tabs-tab-delete-button-margin-text: base.padding(1) !default;
$tabs-tab-delete-button-margin-edge: base.padding(2) !default;

$tabs-tab-card-color: base.$color-text-normal !default;
$tabs-tab-card-bg-color: base.color-gray(2) !default;
$tabs-tab-card-bg-color-hover: base.color-gray(3) !default;
$tabs-tab-card-bg-color-active: base.color-gray(4) !default;
$tabs-tab-card-active-bg-color: base.color-gray(1) !default;
$tabs-tab-card-shadow-color: base.color-brand(2) !default;
$tabs-tab-card-status-padding-right: base.padding(1) !default;
$tabs-tab-card-cross-padding-left: base.padding(1) !default;
$tabs-tab-card-cross-padding-right: base.padding(2) !default;
// 使 ellipsis button 为正方形
$tabs-tab-card-ellipsis-button-padding-horizontal:  (
  sm: math.div(base.line-height(map.get($tabs-font-size, sm)) + $tabs-tab-ellipsis-button-padding-vertical * 2 - $tabs-tab-ellipsis-button-size, 2),
  md: math.div(base.line-height(map.get($tabs-font-size, md)) + $tabs-tab-ellipsis-button-padding-vertical * 2 - $tabs-tab-ellipsis-button-size, 2),
) !default;

$tabs-container-margin-bottom: base.padding(4) !default;

$tabs-tab-tag-font-size: button.$btn-font-size !default;
$tabs-tab-tag-min-width: (
  sm: 72px,
  md: 88px,
) !default;
$tabs-tab-tag-height: button.$btn-height !default;
$tabs-tab-tag-border-radius: button.$btn-border-radius !default;
$tabs-tab-tag-sibling-margin: (
  sm: base.padding(2),
  md: base.padding(3)
) !default;
$tabs-tab-tag-active-bg-color: base.color-brand(1) !default;

$tabs-tab-tag-color-hover: $tabs-tab-color-hover !default;
$tabs-tab-tag-color-active: $tabs-tab-color-active !default;