// $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;

// @use '@style/element/index.scss' as *;
@use './common-var.scss' as *;

/** base */
$color--primary: map-get($ep-colors, 'primary', 'base');
$color--primary-plus: map-get($ep-colors, 'primary', 'plus');
$color--primary-light: map-get($ep-colors, 'primary', 'light');
$color--white:  map-get($ep-colors, 'white');

$BaseBgColor: #f2f2f2;
$LineColor: #eee;
$OnePixelLine: 1px solid $LineColor;
$ShadowColor: rgba(0, 0, 0, 0.05);

/** space */
$ExtraMiniGapSpace: map-get($cst-gap-space, 'extra-mini');
$MiniGapSpace: map-get($cst-gap-space, 'mini');
$ExtraSmallGapSpace: map-get($cst-gap-space, 'extra-small');
$SmallGapSpace: map-get($cst-gap-space, 'small');
$ExtraBaseGapSpace: map-get($cst-gap-space, 'extra-base');
$MediumBaseGapSpace: map-get($cst-gap-space, 'medium-base');
$BaseGapSpace: map-get($cst-gap-space, 'base');
$LargeGapSpace: map-get($cst-gap-space, 'large');

/** size */
$BaseFont: map-get($ep-font-size, 'base');
$SmallFont: map-get($ep-font-size, 'extra-small');
$MediumFont: map-get($ep-font-size, 'medium');
$LargeFont: map-get($ep-font-size, 'large');

/** color */
$NormalColor: map-get($ep-text-color, 'primary');
$NormalIconColor: map-get($ep-text-color, 'secondary');
$ActiveIconColor: $NormalColor;
$DangerColor: map-get($ep-colors, 'danger', 'base');
$RegularFontColor: map-get($ep-text-color, 'regular');
$PrimaryPlusFontColor: map-get($ep-text-color, 'primary-plus');

/** common */
$BlockTitleColor: map-get($ep-text-color, 'primary');

/** layout */
$MainLayoutHeaderHeight: 56px;
$MainLayoutHeaderBg: $color--white;
$MainLayoutHeaderLogoFontSize: map-get($ep-font-size, 'medium');
$MainLayoutHeaderLogoFontColor: $color--primary-plus;
$LayoutLeftMenuBg: $color--white;
$LayoutLeftMenuWidth: 220px;
$LayoutLeftMenuCollapseWidth: calc(map-get($ep-menu, 'icon-width') + map-get($ep-menu, 'base-level-padding') * 2);
$LayoutLeftMenuTransition: map-get($ep-transition-duration, '') width ease-in-out;
$LayoutLeftMenuRadius: map-get($ep-border-radius, 'round');
$LayoutLeftSubMenuColor: map-get($ep-text-color, 'regular');
$LayoutLeftMenuItemColor: map-get($ep-text-color, 'secondary');
$LayoutLeftMenuItemHoverColor: map-get($ep-text-color, 'regular');
$LayoutLeftMenuItemActiveColor: map-get($ep-text-color, 'primary');

/** scroll bar */
$ScrollBarThumbWidth: 8px;
$ScrollBarThumbRadius: 4px;
$ScrollBarThumbColor: rgba(0, 0, 0, 0.1);
$ScrollBarThumbHoverColor: rgba(0, 0, 0, 0.15);

/** form */
$FormItemDescriptionColor: map-get($ep-text-color, 'regular');

/** login */
$LoginModalBg: $color--white;
$LoginModalHeaderBg: linear-gradient(270deg, $color--primary-light 0%, $color--primary 100%);
$LoginModalHeaderFontSize: map-get($ep-font-size, 'extra-large');
$LoginModalHeaderFontColor: $color--white;
$LoginModalHeaderHeight: 80px;
$LoginModalRadius: map-get($ep-border-radius, 'round');
