@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 *;

$menu-font-size: 14px;
$menu-line-height: $line-height-base;
$menu-border-radius: global.$radius-small;
$menu-font-weight-item-selected: global.$font-weight-500;
$menu-color-label-item-selected: global.$color-primary-6;
$menu-height-label-item-selected: 3px;
$menu-margin-left-item-suffix-icon: global.$spacing-3;
$menu-margin-right-item-prefix-icon: global.$spacing-7;
$menu-horizontal-margin-right-item-prefix-icon: global.$spacing-7;

// vertical 模式下 item 之间的间隙
$menu-item-gap: global.$spacing-2;
// vertical 下嵌套子菜单的层级缩进
$menu-item-indent-spacing: global.$spacing-8;

// 折叠按钮
$menu-width-collapse-button: global.$size-6;
$menu-height-collapse-button: global.$size-6;
$menu-border-radius-collapse-button: global.$radius-small;

/**********************************************
 * theme: light / dark
 * status: default / disabled / selected / hover
 **********************************************/
$menu-light-color-bg: var(string.unquote('#{global.$sd-cssvars-prefix}-color-menu-light-bg'));
$menu-light-color-bg-item_default: $menu-light-color-bg;
$menu-light-color-bg-item_hover: var(string.unquote('#{global.$sd-cssvars-prefix}-color-fill-2'));
$menu-light-color-bg-item_selected: var(
  string.unquote('#{global.$sd-cssvars-prefix}-color-fill-2')
);
$menu-light-color-bg-item_disabled: $menu-light-color-bg;
$menu-light-color-item_default: var(string.unquote('#{global.$sd-cssvars-prefix}-color-text-2'));
$menu-light-color-item_hover: var(string.unquote('#{global.$sd-cssvars-prefix}-color-text-2'));
$menu-light-color-item_selected: global.$color-primary-6;
$menu-light-color-submenu_selected: global.$color-primary-6;
$menu-light-color-bg-submenu_selected_hover: var(
  string.unquote('#{global.$sd-cssvars-prefix}-color-fill-2')
);
$menu-light-color-item_disabled: var(string.unquote('#{global.$sd-cssvars-prefix}-color-text-4'));
$menu-light-color-icon_default: var(string.unquote('#{global.$sd-cssvars-prefix}-color-text-3'));
$menu-light-color-icon_hover: var(string.unquote('#{global.$sd-cssvars-prefix}-color-text-3'));
$menu-light-color-icon_selected: global.$color-primary-6;
$menu-light-color-icon_disabled: var(string.unquote('#{global.$sd-cssvars-prefix}-color-text-4'));
$menu-light-color-group-title: var(string.unquote('#{global.$sd-cssvars-prefix}-color-text-3'));

$menu-dark-color-bg: var(string.unquote('#{global.$sd-cssvars-prefix}-color-menu-dark-bg'));
$menu-dark-color-bg-item_default: $menu-dark-color-bg;
$menu-dark-color-bg-item_hover: var(
  string.unquote('#{global.$sd-cssvars-prefix}-color-menu-dark-hover')
);
$menu-dark-color-bg-item_selected: var(
  string.unquote('#{global.$sd-cssvars-prefix}-color-menu-dark-hover')
);
$menu-dark-color-bg-item_disabled: $menu-dark-color-bg;
$menu-dark-color-submenu_selected: global.$color-primary-6;
$menu-dark-color-bg-submenu_selected_hover: var(
  string.unquote('#{global.$sd-cssvars-prefix}-color-menu-dark-hover')
);
$menu-dark-color-item_default: var(string.unquote('#{global.$sd-cssvars-prefix}-color-text-4'));
$menu-dark-color-item_hover: var(string.unquote('#{global.$sd-cssvars-prefix}-color-text-4'));
$menu-dark-color-item_selected: var(string.unquote('#{global.$sd-cssvars-prefix}-color-white'));
$menu-dark-color-item_disabled: var(string.unquote('#{global.$sd-cssvars-prefix}-color-text-2'));
$menu-dark-color-icon_default: var(string.unquote('#{global.$sd-cssvars-prefix}-color-text-3'));
$menu-dark-color-icon_hover: var(string.unquote('#{global.$sd-cssvars-prefix}-color-text-3'));
$menu-dark-color-icon_selected: var(string.unquote('#{global.$sd-cssvars-prefix}-color-white'));
$menu-dark-color-icon_disabled: var(string.unquote('#{global.$sd-cssvars-prefix}-color-text-2'));
$menu-dark-color-group-title: var(string.unquote('#{global.$sd-cssvars-prefix}-color-text-3'));

// popup sub-menu
$menu-color-border-popup: var(string.unquote('#{global.$sd-cssvars-prefix}-color-neutral-3'));

// collapse button style
$menu-light-color-bg-button: var(string.unquote('#{global.$sd-cssvars-prefix}-color-fill-1'));
$menu-light-color-bg-button_hover: var(string.unquote('#{global.$sd-cssvars-prefix}-color-fill-3'));
$menu-light-color-button: var(string.unquote('#{global.$sd-cssvars-prefix}-color-text-3'));
$menu-dark-color-bg-button: global.$color-primary-6;
$menu-dark-color-bg-button_hover: global.$color-primary-7;
$menu-dark-color-button: var(string.unquote('#{global.$sd-cssvars-prefix}-color-white'));

/**********************************************
 * horizontal / vertical
 **********************************************/
$menu-horizontal-padding-vertical: 14px;
$menu-horizontal-padding-horizontal: global.$spacing-8;
$menu-horizontal-item-gap: global.$spacing-6;
$menu-horizontal-item-height: 30px;
$menu-horizontal-item-padding-horizontal: global.$spacing-6;

$menu-vertical-padding-vertical: global.$spacing-2;
$menu-vertical-padding-horizontal: global.$spacing-4;
$menu-vertical-item-height: 40px;
$menu-vertical-item-padding-horizontal: global.$spacing-6;

/************************************************
 * collapse
 ***********************************************/
$menu-collapse-width: global.$size-12;
$menu-collapse-padding-vertical: global.$spacing-2;
$menu-collapse-padding-horizontal: global.$spacing-2;

/************************************************
 * popButton
 ***********************************************/
$menu-pop-button-size: global.$size-10;
$menu-pop-button-margin-bottom: global.$spacing-7;
$menu-pop-button-box-shadow: global.$shadow2-down;
$menu-pop-button-border-color: global.$color-transparent;

/**********************************************
 * Theme dark in dropdown
 **********************************************/
$dropdown-dark-color-bg: var(string.unquote('#{global.$sd-cssvars-prefix}-color-menu-dark-bg'));
$dropdown-dark-color-border: $dropdown-dark-color-bg;

$dropdown-dark-option-color-bg_default: global.$color-transparent;
$dropdown-dark-option-color-bg_hover: var(
  string.unquote('#{global.$sd-cssvars-prefix}-color-menu-dark-hover')
);
$dropdown-dark-option-color-bg_selected: global.$color-transparent;
$dropdown-dark-option-color-bg_disabled: global.$color-transparent;

$dropdown-dark-option-color-text_default: var(
  string.unquote('#{global.$sd-cssvars-prefix}-color-text-4')
);
$dropdown-dark-option-color-text_hover: var(
  string.unquote('#{global.$sd-cssvars-prefix}-color-text-4')
);
$dropdown-dark-option-color-text_selected: var(
  string.unquote('#{global.$sd-cssvars-prefix}-color-white')
);
$dropdown-dark-option-color-text_disabled: var(
  string.unquote('#{global.$sd-cssvars-prefix}-color-text-2')
);

$dropdown-dark-group-title-color-text: var(
  string.unquote('#{global.$sd-cssvars-prefix}-color-text-3')
);