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

/*****************************************************
 * Layout 整体背景（容器主体与页脚共用）
 *****************************************************/
$layout-body-bg: var(string.unquote('#{$sd-cssvars-prefix}-color-fill-1'));
$layout-footer-bg: var(string.unquote('#{$sd-cssvars-prefix}-color-fill-1'));

/*****************************************************
 * Header
 *****************************************************/
$layout-header-bg: var(string.unquote('#{global.$sd-cssvars-prefix}-color-menu-dark-bg'));
$layout-header-height: global.$size-16; // 64px
$layout-header-padding-horizontal: 50px;
$layout-header-padding: 0 $layout-header-padding-horizontal;
$layout-header-color: color-mix(in srgb, $layout-header-bg, #fff 90%);

/*****************************************************
 * Footer
 *****************************************************/
$layout-footer-padding: 24px $layout-header-padding-horizontal;

/*****************************************************
 * Sider
 * 深色背景与 Menu 深色背景保持一致，避免内嵌菜单出现接缝
 *****************************************************/
$layout-sider-bg: var(string.unquote('#{$sd-cssvars-prefix}-color-menu-dark-bg'));
$layout-sider-trigger-height: global.$size-11; // 44px
$layout-sider-trigger-bg: var(string.unquote('#{$sd-cssvars-prefix}-color-menu-dark-hover'));
$layout-sider-trigger-color: var(string.unquote('#{$sd-cssvars-prefix}-color-white'));
$layout-sider-zero-trigger-width: global.$size-10; // 40px
$layout-sider-zero-trigger-height: global.$size-10; // 40px
$layout-sider-zero-trigger-font-size: 18px;

/*****************************************************
 * Sider rail（窄轨）
 *****************************************************/
$layout-sider-rail-width: global.$size-18; // 72px
$layout-sider-rail-expand-z-index: 20;

/*****************************************************
 * Sider light 主题
 *****************************************************/
$layout-light-sider-bg: var(string.unquote('#{$sd-cssvars-prefix}-color-bg-1'));
$layout-light-trigger-bg: var(string.unquote('#{$sd-cssvars-prefix}-color-bg-1'));
$layout-light-trigger-color: var(string.unquote('#{$sd-cssvars-prefix}-color-text-1'));

/*****************************************************
 * 公共
 *****************************************************/
$layout-radius-lg: global.$border-radius-large;
$layout-motion-duration-mid: global.$transition-duration-2;
$layout-motion-duration-slow: global.$transition-duration-3;
$layout-font-size: global.$font-size-body;