@use '@style/theme/index.scss' as global;

@forward '@style/theme/index.scss';
@forward '@style/color/colors.scss' hide $sd-vars-prefix, $sd-cssvars-prefix;

@use 'sass:string';
@use '@style/theme/index.scss' as *;

/******** 基础配置项 end *******/

// 背景色
$input-color-bg: var(string.unquote('#{global.$sd-cssvars-prefix}-color-fill-2'));
$input-color-bg_hover: var(string.unquote('#{global.$sd-cssvars-prefix}-color-fill-3'));
$input-color-bg_focus: var(string.unquote('#{global.$sd-cssvars-prefix}-color-bg-2'));
$input-color-bg_disabled: var(string.unquote('#{global.$sd-cssvars-prefix}-color-fill-2'));
$input-color-addon-bg: $input-color-bg;

// 边框色
$input-color-addon-border: var(string.unquote('#{global.$sd-cssvars-prefix}-color-neutral-3'));
$input-border-addon-separator-width: global.$border-1;
$input-color-border_focus: global.$color-primary-6;
$input-color-shadow_focus: var(
  string.unquote('#{global.$sd-cssvars-prefix}-color-primary-light-2')
);
$input-size-shadow_focus: global.$shadow-distance-none;
$input-color-addon-border_default: global.$color-transparent;

// 文本色
$input-color-text: var(string.unquote('#{global.$sd-cssvars-prefix}-color-text-1'));
$input-color-placeholder-text: var(string.unquote('#{global.$sd-cssvars-prefix}-color-text-3'));
$input-color-text_disabled: var(string.unquote('#{global.$sd-cssvars-prefix}-color-text-4'));

// textarea  color
$textarea-color-tip-text: var(string.unquote('#{global.$sd-cssvars-prefix}-color-text-3'));

/******** 基础配置项 end *******/

/******** 高级配置项 *******/

// 错误状态
$input-color-bg_error: var(string.unquote('#{global.$sd-cssvars-prefix}-color-danger-light-1'));
$input-color-bg_error_hover: var(
  string.unquote('#{global.$sd-cssvars-prefix}-color-danger-light-2')
);
$input-color-bg_error_focus: $input-color-bg_focus;
$input-color-border_error_focus: global.$color-danger-6;
$input-color-shadow_error_focus: var(
  string.unquote('#{global.$sd-cssvars-prefix}-color-danger-light-2')
);
$input-size-shadow_error_focus: global.$shadow-distance-none;

// 圆角
$input-border-radius: global.$radius-small;

// 不同尺寸
$input-size-default-height: global.$size-default;
$input-size-mini-height: global.$size-mini;
$input-size-small-height: global.$size-small;
$input-size-large-height: global.$size-large;

// 边框尺寸以及边框色
$input-border-width: global.$border-1;
$input-color-border: global.$color-transparent;
$input-color-border_disabled: global.$color-transparent;
$input-color-border_hover: global.$color-transparent;
$input-color-border_error: global.$color-transparent;
$input-color-border_error_hover: global.$color-transparent;

// 不同尺寸文字大小
$input-size-default-font-size: global.$font-size-body-3;
$input-size-small-font-size: global.$font-size-body-3;
$input-size-large-font-size: global.$font-size-body-3;
$input-size-mini-font-size: global.$font-size-body-1;
$input-font-tip-size: global.$font-size-body-1; // show limit word 文字色

// 不同尺寸的 suffix，addon 尺寸。
$input-size-mini-icon-suffix-size: global.$size-3;
$input-size-small-icon-suffix-size: 14px;
$input-size-default-icon-suffix-size: 14px;
$input-size-large-icon-suffix-size: 14px;

$input-size-mini-icon-addon-size: global.$size-3;
$input-size-small-icon-addon-size: 14px;
$input-size-default-icon-addon-size: 14px;
$input-size-large-icon-addon-size: 14px;

$input-size-icon-clear: global.$size-3;
$input-color-prefix-text: var(string.unquote('#{global.$sd-cssvars-prefix}-color-text-2'));
$input-color-suffix-text: var(string.unquote('#{global.$sd-cssvars-prefix}-color-text-2'));
$input-color-tip-text: var(string.unquote('#{global.$sd-cssvars-prefix}-color-text-3'));
$input-color-icon-clear: var(string.unquote('#{global.$sd-cssvars-prefix}-color-text-2'));
$input-color-icon-clear-bg_hover: var(string.unquote('#{global.$sd-cssvars-prefix}-color-fill-4'));

// input search
$search-color-icon: var(string.unquote('#{global.$sd-cssvars-prefix}-color-text-2'));
$search-size-icon: 14px;

// 布局
$input-padding-horizontal: global.$spacing-6;
$input-margin-left-clear-btn: global.$spacing-6;
$input-spacing-clear-icon-right: global.$spacing-4;
$input-padding-word-limit-left: global.$spacing-4;

// textarea
$textarea-padding-horizontal: global.$spacing-6;
$textarea-padding-vertical: global.$spacing-2;
$textarea-font-size: global.$font-size-body-3;
$textarea-font-tip-size: global.$font-size-body-1;
$textarea-layout-tip-right: global.$spacing-5;
$textarea-layout-tip-bottom: global.$spacing-3;
$textarea-size-min-height: global.$size-default;
$textarea-size-icon-clear: global.$font-size-body-1;
$textarea-layout-top-icon-clear: global.$spacing-5;

// password
$password-color-eye-icon: var(string.unquote('#{global.$sd-cssvars-prefix}-color-text-2'));
$password-size-eye-icon: global.$size-3;

// input.group
$input-group-border-radius_compact: global.$radius-small;
$input-group-border-separator-width: global.$border-1;
$input-group-color-separator-border: var(
  string.unquote('#{global.$sd-cssvars-prefix}-color-neutral-3')
);

/******** 高级配置项 end *******/

// vue覆盖变量
$input-size-medium-height: $input-size-default-height;
$input-size-medium-font-size: $input-size-default-font-size;
$input-size-mini-line-height: 1.667;
$input-size-small-line-height: $line-height-base;
$input-size-medium-line-height: $line-height-base;
$input-size-large-line-height: $line-height-base;

$input-feedback-icon-color_success: global.$color-success-6;
$input-feedback-icon-color_error: global.$color-danger-6;
$input-feedback-icon-color_warning: global.$color-warning-6;
$input-feedback-icon-color_validating: global.$color-primary-6;