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

// ===== tag =====
$tag-sibling-distance-base: base.padding(1) !default;
$tag-padding-vertical: base.padding(1) !default;
$tag-padding-horizontal: base.padding(2) !default;
$tag-label-disabled-color: base.color-gray(6) !default;
$tag-size-list: (xs, sm, md, lg) !default;
$tag-color-list: (
  "normal", "light",
  "brand", "success", "danger", "warning",
  "red", "orange", "yellow", "green", "cyan", "blue", "purple", "pink",
) !default;
$tag-mode-select-color-list: ("normal", "light") !default;
$tag-text-color: (
  "light": base.$color-text-normal,
  "normal": base.$color-text-normal,
  "brand": base.color-brand(),
  "success": base.color-success(),
  "danger": base.color-danger(),
  "warning": base.color-warning(),
  "red": base.color-red(),
  "orange": base.color-orange(),
  "yellow": base.color-yellow(),
  "green": base.color-green(),
  "cyan": base.color-cyan(),
  "blue": base.color-blue(),
  "purple": base.color-purple(),
  "pink": base.color-pink(),
) !default;
$tag-bg-color: (
  "light": base.color-gray(1),
  "normal": base.color-gray(3),
  "brand": base.color-brand(1),
  "success": base.color-success(1),
  "danger": base.color-danger(1),
  "warning": base.color-warning(1),
  "red": base.color-red(1),
  "orange": base.color-orange(1),
  "yellow": base.color-yellow(1),
  "green": base.color-green(1),
  "cyan": base.color-cyan(1),
  "blue": base.color-blue(1),
  "purple": base.color-purple(1),
  "pink": base.color-pink(1),
) !default;
$tag-border-color: (
  "light": base.$color-border-control,
  "normal": base.$color-border-control,
  "brand": base.color-brand(4),
  "success": base.color-success(4),
  "danger": base.color-danger(4),
  "warning": base.color-warning(4),
  "red": base.color-red(4),
  "orange": base.color-orange(4),
  "yellow": base.color-yellow(4),
  "green": base.color-green(4),
  "cyan": base.color-cyan(4),
  "blue": base.color-blue(4),
  "purple": base.color-purple(4),
  "pink": base.color-pink(4),
) !default;
$tag-border-radius: (
  xs: base.$border-radius-small,
  sm: base.$border-radius-small,
  md: base.$border-radius-small,
  lg: base.$border-radius-medium,
) !default;
$tag-font-size: (
  xs: base.$font-size-sm,
  sm: base.$font-size-sm,
  md: base.$font-size-md,
  lg: base.$font-size-md,
) !default;
$tag-sibling-distance: (
  xs: $tag-sibling-distance-base,
  sm: $tag-sibling-distance-base,
  md: base.padding(2),
  lg: base.padding(2),
) !default;
$tag-height: (
  xs: base.height(5),
  sm: base.form-control-height(xs),
  md: base.form-control-height(sm),
  lg: base.form-control-height(md),
) !default;

$tag-mode-select-hover-color: (
  light: base.color-brand(),
  normal: map.get($tag-text-color, normal),
) !default;
$tag-mode-select-hover-bgc: (
  light: base.color-brand(1),
  normal: base.color-gray(4),
) !default;
$tag-mode-select-hover-border-color: (
  light: base.color-brand(),
  normal: map.get($tag-border-color, normal),
) !default;
$tag-mode-select-focus-color: $tag-mode-select-hover-color !default;
$tag-mode-select-focus-bgc: $tag-mode-select-hover-bgc !default;
$tag-mode-select-active-color: (
  light: base.color-brand(),
  normal: map.get($tag-text-color, normal),
) !default;
$tag-mode-select-active-bgc: (
  light: base.color-brand(2),
  normal: base.color-gray(5),
) !default;
$tag-mode-select-active-border-color: (
  light: base.color-brand(),
  normal: transparent,
) !default;
$tag-mode-select-disabled-color: (
  light: $tag-label-disabled-color,
  normal: $tag-label-disabled-color,
) !default;
$tag-mode-select-disabled-bgc: (
  light: base.color-gray(2),
  normal: base.color-gray(2),
) !default;
$tag-mode-select-disabled-border-color: (
  light: base.$color-border-normal,
  normal: base.$color-border-normal,
) !default;

$tag-mode-select-selected-color: (
  light: base.color-brand(),
  normal: base.color-gray(1),
) !default;
$tag-mode-select-selected-bgc: (
  light: base.color-brand(1),
  normal: base.color-brand(),
) !default;
$tag-mode-select-selected-border-color: (
  light: base.color-brand(),
  normal: transparent,
) !default;

$tag-mode-select-selected-hover-color: (
  light: base.color-gray(1),
  normal: base.color-gray(1),
) !default;
$tag-mode-select-selected-hover-bgc: (
  light: base.color-brand(5),
  normal: base.color-brand(5),
) !default;
$tag-mode-select-selected-hover-border-color: (
  light: transparent,
  normal: transparent,
) !default;
$tag-mode-select-selected-focus-color: $tag-mode-select-selected-hover-color !default;
$tag-mode-select-selected-focus-bgc: $tag-mode-select-selected-hover-bgc !default;
$tag-mode-select-selected-active-color: (
  light: base.color-gray(1),
  normal: base.color-gray(1),
) !default;
$tag-mode-select-selected-active-bgc: (
  light: base.color-brand(7),
  normal: base.color-brand(7),
) !default;
$tag-mode-select-selected-active-border-color: (
  light: transparent,
  normal: transparent,
) !default;

$tag-mode-select-selected-disabled-color: (
  light: base.color-brand(3),
  normal: base.color-gray(1),
) !default;
$tag-mode-select-selected-disabled-bgc: (
  light: base.color-brand(1),
  normal: base.color-brand(2),
) !default;
$tag-mode-select-selected-disabled-border-color: (
  light: base.color-brand(2),
  normal: transparent,
) !default;

$tag-max-width: 180px !default;
$tag-remove-btn-size: 12px !default;
$tag-remove-btn-margin: base.padding(1) !default;
$tag-remove-btn-color: base.$color-icon-normal !default;
$tag-remove-btn-color-hover: base.color-gray(8) !default;
$tag-remove-btn-color-active: base.$color-icon-normal-active !default;

$tag-disabled-bgc: base.color-gray(2) !default;
$tag-disabled-border-color: base.$color-border-normal !default;

$tag-edit-add-active-bgc: base.color-info(2) !default;;
$tag-group-input-width: 78px !default;