@use 'sass:math';
@use 'sass:map';

@forward 'element-plus/theme-chalk/src/common/var';
@use 'element-plus/theme-chalk/src/common/var' as *;
@use 'element-plus/theme-chalk/src/mixins/function' as *;
@use '../mixins/function' as pdFn;

$font-famliy:
  PingFang SC,
  'helvetica neue',
  'hiragino sans gb',
  'arial',
  'microsoft yahei ui',
  'microsoft yahei',
  'simsun',
  'sans-serif' !default;

$font-path: 'pagoda-ui/lib/style/fonts' !default;

// Background
$pd-bg-color: () !default;
$pd-bg-color: map.merge(
  (
    'mute': #f2f2f2,
  ),
  $pd-bg-color
);

@each $type in $types {
  @for $i from 1 through 9 {
    @include set-color-mix-level($type, $i, 'light', $color-white);
  }
}

@each $type in $types {
  @for $i from 1 through 9 {
    @include set-color-mix-level($type, $i, 'dark', $color-black);
  }
}

// Components
// Layout
$layout: () !default;
$layout: map.merge(
  (
    'side-menu-width': 240px,
    'side-menu-collapse-width': 64px,
    'side-menu-padding': 20px,
    'top-menu-bg-color': #333,
    'side-menu-bg-color': #3a3a3a,
    'side-menu-active-bg-color': transparent,
    'sub-menu-bg-color': #2e2e2e,
    'main-bg-color': #e8ebf0,
    'content-bg-color': #fff,
    'tabs-bg-color': #fff,
    'tabs-border-bottom-color': getCssVar('border-color-light'),
    'top-menu-text-color': rgba(255, 255, 255, 0.9),
    'top-menu-active-text-color': getCssVar('color-primary'),
    'top-menu-disabled-text-color': rgba(255, 255, 255, 0.4),
    'side-menu-text-color': rgba(255, 255, 255, 0.9),
    'side-menu-disabled-text-color': rgba(255, 255, 255, 0.4),
    'side-menu-icon-color': rgba(255, 255, 255, 0.9),
    'side-menu-arrow-icon-color': #909399,
    'side-menu-group-title-text-color': rgba(255, 255, 255, 0.6),
  ),
  $layout
);

// LayoutV2
$layout-v2: () !default;
$layout-v2: map.merge(
  (
    'header-height': 60px,
    'sub-menu-hover-bg-color': pdFn.getCssVar('color-primary-dark-light-1'),
  ),
  $layout-v2
);

// Break-point
$lgs: 1280px !default;
$lgm: 1600px !default;

$pd-breakpoints: () !default;
$pd-breakpoints: map.merge(
  (
    'lgs': '(min-width: #{$lgs}) and (max-width: #{$lgm})',
    'lgm': '(min-width: #{$lgm}) and (max-width: 1920px)',
  ),
  $pd-breakpoints
);