/** element-plus transition */
$ep-transition-duration: (
  '': 0.3s,
  'fast': 0.2s,
);

$cst-gap-space: (
  'extra-mini': 2px,
  'medium-mini': 4px,
  'mini': 6px,
  'extra-small': 10px,
  'small': 12px,
  'extra-base': 16px,
  'medium-base': 18px,
  'base': 20px,
  'large': 30px,
  'super-large': 60px
);

/** element-plus font-size */
$ep-font-size: (
  'extra-large': 20px,
  'large': 18px,
  'medium': 16px,
  'base': 14px,
  'small': 13px,
  'extra-small': 12px,
);

/** element-plus colors */
$ep-colors: (
  'primary': (
    'base': #0091ff,
    'light': #00C4FF,
    'plus': #0064FF,
  ),
  'white': #ffffff,
  'black': #000000,
  'tip': (
    'base': #E02020,
  ),
  'success': (
    'base': #67c23a,
  ),
  'warning': (
    'base': #e6a23c,
  ),
  'danger': (
    'base': #f56c6c,
  ),
  'error': (
    'base': #f56c6c,
  ),
  'info': (
    'base': #909399,
  ),
);

/** element-plus fill colors */
$ep-fill-color: (
  '': #f0f2f5,
  'light': #f5f7fa,
  'lighter': #fafafa,
  'extra-light': #fafcff,
  'f8': #f8f8f8,
  'light-gray': #eee,
  'dark': #ebedf0,
  'darker': #e6e8eb,
  'blank': #ffffff,
);

/** element-plus border colors */
$ep-border-color: (
  '': #dcdfe6,
  'light': #e4e7ed,
  'lighter': #eee,
  'extra-light': #f2f6fc,
  'dark': #d4d7de,
  'darker': #cdd0d6,
);

/** element-plus text colors */
$ep-text-color: (
  'primary': #333,
  'primary-plus': #444,
  'regular': #666,
  'secondary': #888,
  'placeholder': #999,
  'disabled': #c0c4cc,
);


/** element-plus button */
$ep-button: (
  'bg-color': map-get($ep-fill-color, 'lighter'),
  'border-color':  map-get($ep-border-color, 'light'),
  'text-color':  map-get($ep-text-color, 'regular'),
);


$cst-button-colors: (
  'custom-1': #00ba97,
  'special': #e5f4ff,
);

/** element-plus background colors */
$ep-bg-color: (
  '': #ffffff,
  'page': #f2f3f5,
  'overlay': #ffffff,
);

/** element-plus border radius */
$ep-border-radius: (
  'base': 6px,
  'small': 4px,
  'round': 10px,
  'circle': 100%,
);

/** element-plus card */
$ep-card: (
  'border-radius': map-get($ep-border-radius, 'base'),
  'padding': map-get($cst-gap-space, 'base'),
  'border-color': transparent,
  'bg-color': map-get($ep-fill-color, 'blank'),
);

/** element-plus menu */
$ep-menu: (
  'item-height': 38px,
  'base-level-padding': 20px,
  'level-padding': 40px,
  'hover-bg-color': 'none',
  'icon-width': 14px,
  'hover-text-color': map-get($ep-text-color, 'regular'),
);

/** element-plus popper */
$ep-popper: (
  'border-radius': map-get($ep-border-radius, 'small'),
);

/** element-plus form */
$ep-form: (
  'label-font-size': map-get($ep-font-size, 'extra-small'),
);

/** element-plus component size */
$ep-common-component-size: (
  'large': 54px,
  'default': 40px,
  'small': 32px,
);

/** element-plus input font size */
$ep-input-font-size: (
  'large': 15px,
  'default': 12px,
  'small': 12px,
);

/** element-plus box-shadow */
$ep-box-shadow: (
  '': (
    0px 12px 32px 4px rgba(0, 0, 0, 0.04),
    0px 8px 20px rgba(0, 0, 0, 0.08),
  ),
  'light': (
    0px 0px 12px rgba(0, 0, 0, 0.12),
  ),
  'lighter': (
    0px 0px 6px rgba(0, 0, 0, 0.12),
  ),
  'dark': (
    0px 16px 48px 16px rgba(0, 0, 0, 0.08),
    0px 12px 32px rgba(0, 0, 0, 0.12),
    0px 8px 16px -8px rgba(0, 0, 0, 0.16),
  ),
);

/** element-plus table */
$ep-table: (
  'border-color': map-get($ep-border-color, 'lighter'),
  'border': 1px solid map-get($ep-border-color, 'lighter'),
  'text-color': map-get($ep-text-color, 'regular'),
  'header-text-color': map-get($ep-text-color, 'primary-plus'),
  'row-hover-bg-color': map-get($ep-fill-color, 'light'),
  'current-row-bg-color': var(--el-color-primary-light-9),
  'header-bg-color': map-get($ep-bg-color, ''),
  'fixed-box-shadow': map-get($ep-box-shadow, 'light'),
  'bg-color': map-get($ep-fill-color, 'blank'),
  'tr-bg-color': map-get($ep-fill-color, 'blank'),
  'expanded-cell-bg-color': map-get($ep-fill-color, 'blank'),
  'fixed-left-column': inset 10px 0 10px -10px rgb(0 0 0 / 15%),
  'fixed-right-column': inset -10px 0 10px -10px rgb(0 0 0 / 15%),
);

/** element-plus table font-size*/
$ep-table-font-size: (
  'large': map-get($ep-font-size, 'base'),
  'default': map-get($ep-font-size, 'small'),
  'small': map-get($ep-font-size, 'extra-small'),
);

/** element-plus table padding*/
$ep-table-padding: (
  'large': 14px 0,
  'default': 12px 0,
  'small': 10px 0,
);

/** element-plus table cell padding*/
$ep-table-cell-padding: (
  'large': 0 16px,
  'default': 0 12px,
  'small': 0 8px,
);

/** element-plus pagination */
$ep-pagination: (
  'font-size': 14px,
  'bg-color': map-get($ep-fill-color, 'blank'),
  'text-color': map-get($ep-text-color, 'primary'),
  'border-radius': 3px,
  'button-color': map-get($ep-text-color, 'primary'),
  'button-width': 32px,
  'button-height': 32px,
  'button-disabled-color': map-get($ep-text-color, 'placeholder'),
  'button-disabled-bg-color': map-get($ep-fill-color, 'blank'),
  'button-bg-color': map-get($ep-fill-color, ''),
  'hover-color': map-get($ep-colors, 'primary', 'base'),
  'height-extra-small': 24px,
  'line-height-extra-small': 24px,
);

/** element-plus dialog */
$ep-dialog: (
  'width': fit-content,
  'margin-top': 15vh,
  'bg-color': map-get($ep-fill-color, 'blank'),
  'box-shadow': map-get($ep-box-shadow, ''),
  'title-font-size': map-get($ep-font-size, 'base'),
  'content-font-size': map-get($ep-font-size, 'extra-small'),
  'font-line-height': normal,
  'padding-primary': map-get($cst-gap-space, 'base'),
  'border-radius': map-get($ep-border-radius, 'base'),
  /**  custom */ //
  'header-height': 44px,
  'header-bg-color': map-get($ep-fill-color, 'f8'),
  'header-font-size': map-get($ep-font-size, 'base'),
  'header-font-color': map-get($ep-text-color, 'primary'),
);

$ep-dialog-body-padding:(
  'small': 16px,
  'base': 20px,
  'medium': 30px,
  'large': 40px
);