/* FastyBird Chalk Variables */
@use 'sass:color';
@use 'sass:math';
@use 'sass:map';

@use '../mixins/function.scss' as *;

// Special comment for theme configurator
// type|skipAutoTranslation|Category|Order
// skipAutoTranslation 1

// Types
$types: primary, success, warning, danger, error, info, default;

// Color
$colors: () !default;
$colors: map.deep-merge(
	(
		'white': #fff,
		'black': #000,
		'primary': (
			'base': #d9230f,
		),
		'success': (
			'base': #67c23a,
		),
		'warning': (
			'base': #e6a23c,
		),
		'danger': (
			'base': #f56c6c,
		),
		'error': (
			'base': #f56c6c,
		),
		'info': (
			'base': #409eff,
		),
		'default': (
			'base': #909399,
		),
	),
	$colors
);
$color-white: map.get($colors, 'white') !default;
$color-black: map.get($colors, 'black') !default;
$color-primary: map.get($colors, 'primary', 'base') !default;
$color-success: map.get($colors, 'success', 'base') !default;
$color-warning: map.get($colors, 'warning', 'base') !default;
$color-danger: map.get($colors, 'danger', 'base') !default;
$color-error: map.get($colors, 'error', 'base') !default;
$color-info: map.get($colors, 'info', 'base') !default;
$color-default: map.get($colors, 'default', 'base') !default;

// https://sass-lang.com/documentation/values/maps#immutability
// mix colors with white/black to generate light/dark level
@mixin set-color-mix-level($type, $number, $mode: 'light', $mix-color: $color-white) {
	$colors: map.deep-merge(
		(
			$type: (
				'#{$mode}-#{$number}': color.mix($mix-color, map.get($colors, $type, 'base'), math.percentage(math.div($number, 10))),
			),
		),
		$colors
	) !global;
}

// $colors.primary.light-i
// --fb-color-primary-light-i
// 10% 53a8ff
// 20% 66b1ff
// 30% 79bbff
// 40% 8cc5ff
// 50% a0cfff
// 60% b3d8ff
// 70% c6e2ff
// 80% d9ecff
// 90% ecf5ff
@each $type in $types {
	@for $i from 1 through 9 {
		@include set-color-mix-level($type, $i, 'light', $color-white);
	}
}

// --fb-color-primary-dark-2
@each $type in $types {
	@include set-color-mix-level($type, 2, 'dark', $color-black);
}

$text-color: () !default;
$text-color: map.merge(
	(
		'primary': #303133,
		'regular': #606266,
		'secondary': #909399,
		'placeholder': #a8abb2,
		'disabled': #c0c4cc,
	),
	$text-color
);
$border-color: () !default;
$border-color: map.merge(
	(
		'': #dcdfe6,
		'light': #e4e7ed,
		'lighter': #ebeef5,
		'extra-light': #f2f6fc,
		'dark': #d4d7de,
		'darker': #cdd0d6,
	),
	$border-color
);
$fill-color: () !default;
$fill-color: map.merge(
	(
		'': #f0f2f5,
		'light': #f5f7fa,
		'lighter': #fafafa,
		'extra-light': #fafcff,
		'dark': #ebedf0,
		'darker': #e6e8eb,
		'blank': #fff,
	),
	$fill-color
);

// Background
$bg-color: () !default;
$bg-color: map.merge(
	(
		'': #fff,
		'page': #f2f3f5,
		'overlay': #fff,
	),
	$bg-color
);

// Border
$border-width: 1px !default;
$border-style: solid !default;
$border-color-hover: getCssVar('text-color', 'disabled') !default;
$border-radius: () !default;
$border-radius: map.merge(
	(
		'base': 4px,
		'small': 2px,
		'round': 20px,
		'circle': 100%,
	),
	$border-radius
);

// Box-shadow
$box-shadow: () !default;
$box-shadow: map.merge(
	(
		'': (
			0 12px 32px 4px rgb(0 0 0 / 4%),
			0 8px 20px rgb(0 0 0 / 8%),
		),
		'light': (
			0 0 12px rgb(0 0 0 / 12%),
		),
		'lighter': (
			0 0 6px rgb(0 0 0 / 12%),
		),
		'dark': (
			0 16px 48px 16px rgb(0 0 0 / 8%),
			0 12px 32px rgb(0 0 0 / 12%),
			0 8px 16px -8px rgb(0 0 0 / 16%),
		),
	),
	$box-shadow
);

// Typography
$font-family: () !default;
$font-family: map.merge(
	(
		// default family
		'': "'Helvetica Neue', Helvetica, 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', '微软雅黑', Arial, sans-serif"
	),
	$font-family
);
$font-size: () !default;
$font-size: map.merge(
	(
		'extra-large': 20px,
		'large': 18px,
		'medium': 16px,
		'base': 14px,
		'small': 13px,
		'extra-small': 11px,
	),
	$font-size
);

// zIndex
$z-index: () !default;
$z-index: map.merge(
	(
		'normal': 1,
		'top': 1000,
		'popper': 2000,
	),
	$z-index
);

// Disable default
$disabled: () !default;
$disabled: map.merge(
	(
		'bg-color': getCssVar('fill-color', 'light'),
		'text-color': getCssVar('text-color', 'placeholder'),
		'border-color': getCssVar('border-color', 'light'),
	),
	$disabled
);
$common-component-size: () !default;
$common-component-size: map.merge(
	(
		'large': 40px,
		'default': 32px,
		'small': 24px,
	),
	$common-component-size
);

// Overlay
$overlay-color: () !default;
$overlay-color: map.merge(
	(
		'': rgb(0 0 0 / 80%),
		'light': rgb(0 0 0 / 70%),
		'lighter': rgb(0 0 0 / 50%),
	),
	$overlay-color
);

// Mask
$mask-color: () !default;
$mask-color: map.merge(
	(
		'': rgb(255 255 255 / 90%),
		'extra-light': rgb(255 255 255 / 30%),
	),
	$mask-color
);

// Components
// ----------

// Alert
// css3 var in packages/theme-chalk/src/fb-alert.scss
$alert: () !default;
$alert: map.merge(
	(
		'padding': 8px 16px,
		'border-radius-base': getCssVar('border-radius-base'),
		'title-font-size': 14px,
		'title-with-description-font-size': 16px,
		'description-font-size': 14px,
		'close-font-size': 16px,
		'close-customed-font-size': 14px,
		'icon-size': 16px,
		'icon-large-size': 28px,
	),
	$alert
);

// Badge
// css3 var in packages/theme-chalk/src/fb-badge.scss
$badge: () !default;
$badge: map.merge(
	(
		'bg-color': getCssVar('color-danger'),
		'radius': 10px,
		'font-size': 12px,
		'padding': 6px,
		'size': 18px,
	),
	$badge
);

// Button
// css3 var in packages/theme-chalk/src/button.scss
$button: () !default;
$button: map.merge(
	(
		'font-weight': getCssVar('font-weight-primary'),
		'border-color': getCssVar('border-color'),
		'bg-color': getCssVar('fill-color', 'blank'),
		'text-color': getCssVar('text-color', 'regular'),
		'disabled-text-color': getCssVar('disabled-text-color'),
		'disabled-bg-color': getCssVar('fill-color', 'blank'),
		'disabled-border-color': getCssVar('border-color-light'),
		'divide-border-color': rgba($color-white, 0.5),
		'hover-text-color': getCssVar('color-primary'),
		'hover-bg-color': getCssVar('color-primary', 'light-9'),
		'hover-border-color': getCssVar('color-primary-light-7'),
		'active-text-color': getCssVar('button-hover-text-color'),
		'active-border-color': getCssVar('color-primary'),
		'active-bg-color': getCssVar('button', 'hover-bg-color'),
		'outline-color': getCssVar('color-primary', 'light-5'),
		'hover-link-text-color': getCssVar('color-info'),
		'active-color': getCssVar('text-color', 'primary'),
	),
	$button
);
$button-border-width: $border-width !default;

// need mix, so do not use css var
$button-hover-tint-percent: 20%;
$button-active-shade-percent: 10%;
$button-border-color: () !default;
$button-bg-color: () !default;
$button-text-color: () !default;

@each $type in $types {
	$button-border-color: map.merge(
		(
			$type: map.get($colors, $type, 'base'),
		),
		$button-border-color
	) !global;
	$button-bg-color: map.merge(
		(
			$type: map.get($colors, $type, 'base'),
		),
		$button-bg-color
	) !global;
}

$button-font-size: () !default;
$button-font-size: map.merge(
	(
		'large': getCssVar('font-size', 'medium'),
		'default': getCssVar('font-size', 'base'),
		'small': 12px,
	),
	$button-font-size
);
$button-border-radius: () !default;
$button-border-radius: map.merge(
	(
		'large': getCssVar('border-radius', 'base'),
		'default': getCssVar('border-radius', 'base'),
		'small': calc(#{getCssVar('border-radius', 'base')} - 1px),
	),
	$button-border-radius
);
$button-padding-vertical: () !default;
$button-padding-vertical: map.merge(
	(
		'large': 13px,
		'default': 9px,
		'small': 6px,
	),
	$button-padding-vertical
);
$button-padding-horizontal: () !default;
$button-padding-horizontal: map.merge(
	(
		'large': 20px,
		'default': 16px,
		'small': 12px,
	),
	$button-padding-horizontal
);

// Card
// css3 var in packages/theme-chalk/src/fb-card.scss
$card: () !default;
$card: map.merge(
	(
		'border-color': getCssVar('border-color', 'light'),
		'border-radius': 4px,
		'padding': 20px,
		'bg-color': getCssVar('fill-color', 'blank'),
		'header-bg-color': transparent,
		'body-bg-color': transparent,
		'footer-bg-color': transparent,
		'box-shadow': getCssVar('box-shadow', 'light'),
	),
	$card
);

// Checkbox
// css3 var in packages/theme-chalk/src/fb-checkbox.scss
$checkbox: () !default;
$checkbox: map.merge(
	(
		'font-size': 14px,
		'font-weight': getCssVar('font-weight-primary'),
		'text-color': getCssVar('text-color-regular'),
		'input-height': 14px,
		'input-width': 14px,
		'border-radius': getCssVar('border-radius-small'),
		'bg-color': getCssVar('fill-color', 'blank'),
		'input-border': getCssVar('border'),
		'disabled-border-color': getCssVar('border-color'),
		'disabled-input-fill': getCssVar('fill-color', 'light'),
		'disabled-icon-color': getCssVar('text-color-placeholder'),
		'disabled-checked-input-fill': getCssVar('border-color-extra-light'),
		'disabled-checked-input-border-color': getCssVar('border-color'),
		'disabled-checked-icon-color': getCssVar('text-color-placeholder'),
		'checked-text-color': getCssVar('color-primary'),
		'checked-input-border-color': getCssVar('color-primary'),
		'checked-bg-color': getCssVar('color-primary'),
		'checked-icon-color': getCssVar('color', 'white'),
		'input-border-color-hover': getCssVar('color-primary'),
	),
	$checkbox
);
$checkbox-button: () !default;
$checkbox-button: map.merge(
	(
		'checked-bg-color': getCssVar('color-primary'),
		'checked-text-color': getCssVar('color-white'),
		'checked-border-color': getCssVar('color-primary'),
	),
	$checkbox-button
);
$checkbox-bordered-padding-left: () !default;
$checkbox-bordered-padding-left: map.merge(
	(
		'large': 12px,
		'default': 10px,
		'small': 8px,
	),
	$checkbox-bordered-padding-left
);
$checkbox-bordered-padding-right: () !default;
$checkbox-bordered-padding-right: map.merge(
	(
		'large': 20px,
		'default': 16px,
		'small': 12px,
	),
	$checkbox-bordered-padding-right
);

// Component loading
// css3 var in packages/theme-chalk/src/fb-component-loading.scss
$component-loading: () !default;
$component-loading: map.merge(
	(
		'font-weight': getCssVar('font-weight-primary'),
	),
	$component-loading
);
$component-loading-font-size: () !default;
$component-loading-font-size: map.merge(
	(
		'large': getCssVar('font-size', 'base'),
		'default': getCssVar('font-size', 'base'),
		'small': 12px,
	),
	$component-loading-font-size
);
$component-loading-padding-vertical: () !default;
$component-loading-padding-vertical: map.merge(
	(
		'large': 48px,
		'default': 24px,
		'small': 16px,
	),
	$component-loading-padding-vertical
);
$component-loading-padding-horizontal: () !default;
$component-loading-padding-horizontal: map.merge(
	(
		'large': 48px,
		'default': 24px,
		'small': 16px,
	),
	$component-loading-padding-horizontal
);
$component-loading-icon-size: () !default;
$component-loading-icon-size: map.merge(
	(
		'large': 77px,
		'default': 40px,
		'small': 24px,
	),
	$component-loading-icon-size
);

// Component loading error
// css3 var in packages/theme-chalk/src/fb-component-loading-error.scss
$component-loading-error: () !default;
$component-loading-error: map.merge(
	(
		'font-weight': getCssVar('font-weight-primary'),
	),
	$component-loading-error
);
$component-loading-error-font-size: () !default;
$component-loading-error-font-size: map.merge(
	(
		'large': getCssVar('font-size', 'base'),
		'default': getCssVar('font-size', 'base'),
		'small': 12px,
	),
	$component-loading-error-font-size
);
$component-loading-error-padding-vertical: () !default;
$component-loading-error-padding-vertical: map.merge(
	(
		'large': 48px,
		'default': 24px,
		'small': 16px,
	),
	$component-loading-error-padding-vertical
);
$component-loading-error-padding-horizontal: () !default;
$component-loading-error-padding-horizontal: map.merge(
	(
		'large': 48px,
		'default': 24px,
		'small': 16px,
	),
	$component-loading-error-padding-horizontal
);
$component-loading-error-icon-size: () !default;
$component-loading-error-icon-size: map.merge(
	(
		'large': 77px,
		'default': 40px,
		'small': 24px,
	),
	$component-loading-error-icon-size
);

// Drawer
// css3 var in packages/theme-chalk/src/fb-drawer.scss
$drawer: () !default;
$drawer: map.merge(
	(
		'bg-color': var(#{getCssVarName('modal', 'bg-color')}, #{getCssVar('bg-color')}),
		'padding-primary': var(#{getCssVarName('modal', 'padding-primary')}, 20px),
	),
	$drawer
);

// Input
// css3 var in packages/theme-chalk/src/fb-input.scss
$input: () !default;
$input: map.merge(
	(
		'text-color': getCssVar('text-color-regular'),
		'border': getCssVar('border'),
		'hover-border': getCssVar('border-color-hover'),
		'focus-border': getCssVar('color-primary'),
		'transparent-border': 0 0 0 1px transparent inset,
		'border-color': getCssVar('border-color'),
		'border-radius': getCssVar('border-radius-base'),
		'bg-color': getCssVar('fill-color', 'blank'),
		'icon-color': getCssVar('text-color-placeholder'),
		'placeholder-color': getCssVar('text-color-placeholder'),
		'hover-border-color': getCssVar('border-color-hover'),
		'clear-hover-color': getCssVar('text-color-secondary'),
		'focus-border-color': getCssVar('color-primary'),
		'width': 100%,
	),
	$input
);
$input-disabled: () !default;
$input-disabled: map.merge(
	(
		'fill': getCssVar('disabled-bg-color'),
		'border': getCssVar('disabled-border-color'),
		'text-color': getCssVar('disabled-text-color'),
		'placeholder-color': getCssVar('text-color-placeholder'),
	),
	$input-disabled
);
$input-font-size: () !default;
$input-font-size: map.merge(
	(
		'large': 14px,
		'default': 14px,
		'small': 12px,
	),
	$input-font-size
);
$input-height: () !default;
$input-height: map.merge($common-component-size, $input-height);
$input-line-height: () !default;
$input-line-height: map.merge($common-component-size, $input-line-height);
$input-number-width: () !default;
$input-number-width: map.merge(
	(
		'large': 180px,
		'default': 150px,
		'small': 120px,
	),
	$input-number-width
);
$input-padding-horizontal: () !default;
$input-padding-horizontal: map.merge(
	(
		'large': 16px,
		'default': 12px,
		'small': 8px,
	),
	$input-padding-horizontal
);

// List
// css3 var in packages/theme-chalk/src/fb-list.scss
$list: () !default;
$list: map.merge(
	(
		'list-margin': 1.5rem 0 0 0,
		'header-size': 3.8rem,
		'header-border': 1px solid getCssVar('border-color', 'dark'),
		'header-font-size': 1.8rem,
		'header-line-height': 3.8rem,
		'header-subtitle-color': getCssVar('text-color', 'secondary'),
		'item-background': getCssVar('fill-color', 'lighter'),
		'item-height': 5.5rem,
		'item-border': 1px solid getCssVar('border-color', 'dark'),
	),
	$list
);

// Loading box
// css3 var in packages/theme-chalk/src/fb-loading-box.scss
$loading-box: () !default;
$loading-box: map.merge(
	(
		'padding': 48px 48px,
		'icon-margin': 0 0 16px 0,
		'content-margin': 16px 0 0 0,
	),
	$loading-box
);
$loading-box-font-size: () !default;
$loading-box-font-size: map.merge(
	(
		'large': getCssVar('font-size-base'),
		'default': getCssVar('font-size-base'),
		'small': getCssVar('font-size-base'),
	),
	$loading-box-font-size
);

// Media item
// css3 var in packages/theme-chalk/src/fb-media-item.scss
$media-item: () !default;
$media-item: map.merge(
	(
		'heading-margin': 0,
		'heading-font-size': 2.5rem,
		'heading-line-height': 2.5rem,
	),
	$media-item
);

// Menu
// css3 var in packages/theme-chalk/src/fb-menu.scss
$menu: () !default;
$menu: map.merge(
	(
		'active-color': getCssVar('color-primary'),
		'text-color': getCssVar('text-color-primary'),
		'hover-text-color': getCssVar('color-primary'),
		'bg-color': getCssVar('fill-color', 'blank'),
		'hover-bg-color': getCssVar('color-primary-light-9'),
		'item-height': 56px,
		'sub-item-height': calc(#{getCssVar('menu-item-height')} - 6px),
		'horizontal-height': 60px,
		'horizontal-sub-item-height': 36px,
		'item-font-size': getCssVar('font-size-base'),
		'item-hover-fill': getCssVar('color-primary-light-9'),
		'border-color': getCssVar('border-color'),
		'base-level-padding': 20px,
		'level-padding': 20px,
		'icon-width': 24px,
	),
	$menu
);

// Message
// css3 var in packages/theme-chalk/src/fb-message.scss
$message: () !default;
$message: map.merge(
	(
		'bg-color': getCssVar('color', 'info', 'light-9'),
		'border-color': getCssVar('border-color-lighter'),
		'padding': 11px 15px,
		'close-size': 16px,
		'close-icon-color': getCssVar('text-color-placeholder'),
		'close-hover-color': getCssVar('text-color-secondary'),
	),
	$message
);

// MessageBox
// css3 var in packages/theme-chalk/src/fb-message-box.scss
$messagebox: () !default;
$messagebox: map.merge(
	(
		'title-color': getCssVar('text-color-primary'),
		'width': 420px,
		'border-radius': 4px,
		'box-shadow': getCssVar('box-shadow'),
		'font-size': getCssVar('font-size-large'),
		'content-font-size': getCssVar('font-size-base'),
		'content-color': getCssVar('text-color-regular'),
		'error-font-size': 12px,
		'padding-primary': 12px,
		'font-line-height': getCssVar('font-line-height-primary'),
	),
	$messagebox
);

// Modal
// css3 var in packages/theme-chalk/src/fb-modal.scss
$modal: () !default;
$modal: map.merge(
	(
		'width': 50%,
		'margin-top': 15vh,
		'bg-color': getCssVar('bg-color'),
		'box-shadow': getCssVar('box-shadow'),
		'title-font-size': getCssVar('font-size-large'),
		'content-font-size': 14px,
		'font-line-height': getCssVar('font-line-height-primary'),
		'padding-primary': 16px,
		'border-radius': getCssVar('border-radius-small'),
	),
	$modal
);

// Popper
// css3 var in packages/theme-chalk/src/fb-popper.scss
$popper: () !default;
$popper: map.merge(
	(
		'border-radius': var(#{getCssVarName('popover-border-radius')}, 4px),
	),
	$popper
);

// Radio
/// fontSize||Font|1
$radio: () !default;
$radio: map.merge(
	(
		'font-size': getCssVar('font-size-base'),
		'text-color': getCssVar('text-color-regular'),
		'font-weight': getCssVar('font-weight-primary'),
		'input-height': 14px,
		'input-width': 14px,
		'input-border-radius': getCssVar('border-radius-circle'),
		'input-bg-color': getCssVar('fill-color', 'blank'),
		'input-border': getCssVar('border'),
		'input-border-color': getCssVar('border-color'),
		'input-border-color-hover': getCssVar('color-primary'),
	),
	$radio
);
$radio-height: () !default;
$radio-height: map.merge($common-component-size, $radio-height);
$radio-button: () !default;
$radio-button: map.merge(
	(
		'checked-bg-color': getCssVar('color-primary'),
		'checked-text-color': getCssVar('color-white'),
		'checked-border-color': getCssVar('color-primary'),
		'disabled-checked-fill': getCssVar('border-color-extra-light'),
	),
	$radio-button
);
$radio-disabled: () !default;
$radio-disabled: map.merge(
	(
		'input-border-color': getCssVar('disabled-border-color'),
		'input-fill': getCssVar('disabled-bg-color'),
		'icon-color': getCssVar('disabled-bg-color'),
		'checked-input-border-color': getCssVar('disabled-border-color'),
		'checked-input-fill': getCssVar('disabled-bg-color'),
		'checked-icon-color': getCssVar('text-color-placeholder'),
	),
	$radio-disabled
);
$radio-checked: () !default;
$radio-checked: map.merge(
	(
		'text-color': getCssVar('color-primary'),
		'input-border-color': getCssVar('color-primary'),
		'icon-color': getCssVar('color-primary'),
	),
	$radio-checked
);
$radio-bordered-input-height: () !default;
$radio-bordered-input-height: map.merge(
	(
		'large': 14px,
		'default': 12px,
		'small': 12px,
	),
	$radio-bordered-input-height
);
$radio-bordered-input-width: () !default;
$radio-bordered-input-width: map.merge(
	(
		'large': 14px,
		'default': 12px,
		'small': 12px,
	),
	$radio-bordered-input-width
);

// Result
// css3 var in packages/theme-chalk/src/fb-result.scss
$result: () !default;
$result: map.merge(
	(
		'padding': 40px 30px,
		'icon-font-size': 64px,
		'title-font-size': 20px,
		'title-margin-top': 20px,
		'subtitle-margin-top': 10px,
		'extra-margin-top': 30px,
	),
	$result
);

// Scrollbar
// css3 var in packages/theme-chalk/src/fb-scrollbar.scss
$scrollbar: () !default;
$scrollbar: map.merge(
	(
		'opacity': 0.3,
		'bg-color': getCssVar('text-color-secondary'),
		'hover-opacity': 0.5,
		'hover-bg-color': getCssVar('text-color-secondary'),
	),
	$scrollbar
);
$scrollbar-shadow: () !default;
$scrollbar-shadow: map.merge(
	(
		'': rgb(0 0 0 / 12%),
		'light': rgb(0 0 0 / 8%),
		'dark': rgb(0 0 0 / 16%),
	),
	$scrollbar-shadow
);

// Select
// css3 var in packages/theme-chalk/src/fb-select.scss
$select: () !default;
$select: map.merge(
	(
		'border-color-hover': getCssVar('border-color-hover'),
		'disabled-color': getCssVar('disabled-text-color'),
		'disabled-border': getCssVar('disabled-border-color'),
		'font-size': getCssVar('font-size-base'),
		'close-hover-color': getCssVar('text-color-secondary'),
		'input-color': getCssVar('text-color-placeholder'),
		'multiple-input-color': getCssVar('text-color-regular'),
		'input-focus-border-color': getCssVar('color-primary'),
		'input-font-size': 14px,
		'width': 100%,
	),
	$select
);
$select-option: () !default;
$select-option: map.merge(
	(
		'text-color': getCssVar('text-color-regular'),
		'disabled-color': getCssVar('text-color-placeholder'),
		'height': 34px,
		'hover-background': getCssVar('fill-color', 'light'),
		'selected-text-color': getCssVar('color-primary'),
	),
	$select-option
);
$select-group: () !default;
$select-group: map.merge(
	(
		'text-color': getCssVar('color-primary'),
		'height': 30px,
		'font-size': 12px,
	),
	$select-group
);
$select-dropdown: () !default;
$select-dropdown: map.merge(
	(
		'bg-color': getCssVar('bg-color', 'overlay'),
		'shadow': getCssVar('box-shadow-light'),
		'empty-color': getCssVar('text-color-secondary'),
		'max-height': 274px,
		'padding': 6px 0,
		'empty-padding': 10px 0,
		'header-padding': 10px,
		'footer-padding': 10px,
		'border': 1px solid getCssVar('border-color-light'),
	),
	$select-dropdown
);
$select-wrapper-padding: () !default;
$select-wrapper-padding: map.merge(
	(
		'large': 8px 16px,
		'default': 4px 12px,
		'small': 2px 8px,
	),
	$select-wrapper-padding
);
$select-near-margin-left: () !default;
$select-near-margin-left: map.merge(
	(
		'large': -8px,
		'default': -8px,
		'small': -6px,
	),
	$select-near-margin-left
);
$select-item-gap: () !default;
$select-item-gap: map.merge(
	(
		'large': 6px,
		'default': 6px,
		'small': 4px,
	),
	$select-item-gap
);

// the same height of fb-tag
$select-item-height: () !default;
$select-item-height: map.merge(
	(
		'large': 24px,
		'default': 24px,
		'small': 20px,
	),
	$select-item-height
);

// Slider
// css3 var in packages/theme-chalk/src/fb-slider.scss
$slider: () !default;
$slider: map.merge(
	(
		'main-bg-color': getCssVar('color-primary'),
		'runway-bg-color': getCssVar('border-color-light'),
		'stop-bg-color': getCssVar('color-white'),
		'disabled-color': getCssVar('text-color-placeholder'),
		'border-radius': 3px,
		'height': 6px,
		'button-wrapper-size': 36px,
		'button-wrapper-offset': -15px,
	),
	$slider
);

// Spinner
// css3 var in packages/theme-chalk/src/fb-spinner.scss
$spinner-size: () !default;
$spinner-size: map.merge(
	(
		'large': 68px,
		'default': 38px,
		'small': 28px,
	),
	$spinner-size
);
$spinner-border: () !default;
$spinner-border: map.merge(
	(
		'large': 3px,
		'default': 2px,
		'small': 1px,
	),
	$spinner-border
);

// Switch
// css3 var in packages/theme-chalk/src/fb-switch.scss
$switch: () !default;
$switch: map.merge(
	(
		'on-color': getCssVar('color-primary'),
		'off-color': getCssVar('border-color'),
	),
	$switch
);

// Tabs
// css3 var in packages/theme-chalk/src/fb-tabs.scss
$tabs: () !default;
$tabs: map.merge(
	(
		'header-height': 40px,
	),
	$tabs
);

// Tag
// css3 var in packages/theme-chalk/src/fb-tag.scss
$tag: () !default;
$tag: map.merge(
	(
		'font-size': 12px,
		'border-radius': 4px,
		'border-radius-rounded': 9999px,
	),
	$tag
);
$tag-height: () !default;
$tag-height: map.merge(
	(
		'large': 32px,
		'default': 24px,
		'small': 20px,
	),
	$tag-height
);
$tag-padding: () !default;
$tag-padding: map.merge(
	(
		'large': 12px,
		'default': 10px,
		'small': 8px,
	),
	$tag-padding
);
$tag-icon-size: () !default;
$tag-icon-size: map.merge(
	(
		'large': 16px,
		'default': 14px,
		'small': 12px,
	),
	$tag-icon-size
);

// Popup
// css3 var in packages/theme-chalk/src/fb-popup.scss
$popup: () !default;
$popup: map.merge(
	(
		'modal-bg-color': getCssVar('color-black'),
		'modal-opacity': 0.5,
	),
	$popup
);

// Text
// css3 var in packages/theme-chalk/src/fb-text.scss
$text: () !default;
$text: map.merge(
	(
		'font-size': getCssVar('font-size', 'base'),
		'color': getCssVar('text-color', 'regular'),
	),
	$text
);
$text-font-size: () !default;
$text-font-size: map.merge(
	(
		'large': getCssVar('font-size', 'medium'),
		'default': getCssVar('font-size', 'base'),
		'small': getCssVar('font-size', 'extra-small'),
	),
	$text-font-size
);

// Form
// css3 var in packages/theme-chalk/src/fb-form.scss
$form: () !default;
$form: map.merge(
	(
		'label-font-size': getCssVar('font-size-base'),
		'inline-content-width': 220px,
	),
	$form
);

// Transition
$transition: () !default;
$transition: map.merge(
	(
		'all': all getCssVar('transition-duration') getCssVar('transition-function-ease-in-out-bezier'),
		'fade': opacity getCssVar('transition-duration') getCssVar('transition-function-fast-bezier'),
		'md-fade': (
			transform getCssVar('transition-duration') getCssVar('transition-function-fast-bezier'),
			opacity getCssVar('transition-duration') getCssVar('transition-function-fast-bezier'),
		),
		'fade-linear': opacity getCssVar('transition-duration-fast') linear,
		'border': border-color getCssVar('transition-duration-fast') getCssVar('transition-function-ease-in-out-bezier'),
		'box-shadow': box-shadow getCssVar('transition-duration-fast') getCssVar('transition-function-ease-in-out-bezier'),
		'color': color getCssVar('transition-duration-fast') getCssVar('transition-function-ease-in-out-bezier'),
	),
	$transition
);
$transition-duration: () !default;
$transition-duration: map.merge(
	(
		'': 0.3s,
		'fast': 0.2s,
	),
	$transition-duration
);
$transition-function: () !default;
$transition-function: map.merge(
	(
		'ease-in-out-bezier': cubic-bezier(0.645, 0.045, 0.355, 1),
		'fast-bezier': cubic-bezier(0.23, 1, 0.32, 1),
	),
	$transition-function
);

// Header
$header: () !default;
$header: map.merge(
	(
		'padding': 0 20px,
		'height': 60px,
	),
	$header
);

// Main
$main: () !default;
$main: map.merge(
	(
		'padding': 20px,
	),
	$main
);

// Footer
$footer: () !default;
$footer: map.merge(
	(
		'padding': 0 20px,
		'height': 60px,
	),
	$footer
);

// Break-point
$sm: 768px !default;
$md: 992px !default;
$lg: 1200px !default;
$xl: 1920px !default;
$breakpoints: (
	'xs': '(max-width: #{$sm - 1})',
	'sm': '(min-width: #{$sm})',
	'md': '(min-width: #{$md})',
	'lg': '(min-width: #{$lg})',
	'xl': '(min-width: #{$xl})',
) !default;
$breakpoints-spec: (
	'xs-only': '(max-width: #{$sm - 1})',
	'sm-and-up': '(min-width: #{$sm})',
	'sm-only': '(min-width: #{$sm}) and (max-width: #{$md - 1})',
	'sm-and-down': '(max-width: #{$md - 1})',
	'md-and-up': '(min-width: #{$md})',
	'md-only': '(min-width: #{$md}) and (max-width: #{$lg - 1})',
	'md-and-down': '(max-width: #{$lg - 1})',
	'lg-and-up': '(min-width: #{$lg})',
	'lg-only': '(min-width: #{$lg}) and (max-width: #{$xl - 1})',
	'lg-and-down': '(max-width: #{$xl - 1})',
	'xl-only': '(min-width: #{$xl})',
) !default;