@use 'sass:color';
@use 'sass:meta';
@use 'sass:list';
@use '../common/mixin' as *;

@function mapcolorvariable($pallete-name){
  @return var(#{'--color-sf-'+  $pallete-name});
}

@function maplayoutvariable($pallete-name){
  @return var(#{'--e-'+  $pallete-name});
}

@function shade-color($color, $percentage) {
  @return mix($black, $color, $percentage);
}

@function tint-color($color, $percentage) {
  @return mix($white, $color, $percentage);
}

:root{
  --color-sf-content-bg-color: rgba(255, 255, 255);
  --color-sf-content-bg-color-alt1: #f9fafb;
  --color-sf-content-bg-color-alt2: #f3f4f6;
  --color-sf-content-bg-color-alt3: #e5e7eb;
  --color-sf-content-bg-color-alt4: #9ca3af;
  --color-sf-content-bg-color-alt5: #6b7280;
  --color-sf-content-bg-color-hover: #f9fafb;
  --color-sf-content-bg-color-pressed: #f3f4f6;
  --color-sf-content-bg-color-focus: #f9fafb;
  --color-sf-content-bg-color-selected: #e5e7eb;
  --color-sf-content-bg-color-dragged: #f3f4f6;
  --color-sf-content-bg-color-disabled: #ffffff;
  --color-sf-flyout-bg-color: #ffffff;
  --color-sf-flyout-bg-color-hover: #f3f4f6;
  --color-sf-flyout-bg-color-pressed: #e5e7eb;
  --color-sf-flyout-bg-color-focus: #f3f4f6;
  --color-sf-flyout-bg-color-selected: #e5e7eb;
  --color-sf-flyout-bg-color-disabled: #fff;
  --color-sf-overlay-bg-color: rgba(107, 114, 128, .75);
  --color-sf-table-bg-color-hover: #f9fafb;
  --color-sf-table-bg-color-pressed: #f3f4f6;
  --color-sf-table-bg-color-selected: #e5e7eb;
  --color-sf-text-input-bg-color: #ffffff;
  --color-sf-treeview-item-active-hover-bg: #e5e7eb;

  // text-color
  --color-sf-content-text-color: #111827;
  --color-sf-content-text-color-alt1: #374151;
  --color-sf-content-text-color-alt2: #4b5563;
  --color-sf-content-text-color-alt3: #6b7280;
  --color-sf-content-text-color-alt4: #9ca3af;
  --color-sf-content-text-color-hover: #111827;
  --color-sf-content-text-color-pressed: #111827;
  --color-sf-content-text-color-focus: #111827;
  --color-sf-content-text-color-selected: #111827;
  --color-sf-content-text-color-dragged: #111827;
  --color-sf-content-text-color-disabled: #9ca3af;
  --color-sf-placeholder-text-color: #6b7280;
  --color-sf-flyout-text-color: #111827;
  --color-sf-flyout-text-color-hover: #111827;
  --color-sf-flyout-text-color-pressed: #111827;
  --color-sf-flyout-text-color-focus: #111827;
  --color-sf-flyout-text-color-selected: #111827;
  --color-sf-flyout-text-color-disabled: #9ca3af;
  --color-sf-table-text-color-hover: #111827;
  --color-sf-table-text-color-pressed: #111827;
  --color-sf-table-text-color-selected: #111827;

  // icon-color
  --color-sf-icon-color: #6b7280;
  --color-sf-icon-color-hover: #374151;
  --color-sf-icon-color-pressed: #6b7280;
  --color-sf-icon-color-disabled: #d1d5db;
  
  // close-icon-color
  --color-sf-close-icon-color: #9ca3af;
  --color-sf-close-icon-color-hover: #6b7280;
  --color-sf-close-icon-color-pressed: #6b7280;
  --color-sf-close-icon-color-disabled: #d1d5db;

  // border-color
  --color-sf-border-light: #e5e7eb;
  --color-sf-border: #d1d5db;
  --color-sf-border-dark: #9ca3af;
  --color-sf-border-hover: #d1d5db;
  --color-sf-border-pressed: #9ca3af;
  --color-sf-border-focus: #d1d5db;
  --color-sf-border-selected: #9ca3af;
  --color-sf-border-dragged: #e5e7eb;
  --color-sf-border-disabled: #e5e7eb;
  --color-sf-border-warning: #c2410c;
  --color-sf-border-error: #dc2626;
  --color-sf-border-success: #15803d;
  --color-sf-spreadsheet-gridline: #dee2e6;
  --color-sf-flyout-border: #e5e7eb;
  --color-sf-dialog-border: #fff;

  //sf Variables
  --color-sf-primary: rgba(79, 70, 229);
  --color-sf-primary-text-color: #fff;
  --color-sf-primary-light: #818cf8;
  --color-sf-primary-lighter: #e0e7ff;
  --color-sf-primary-dark: #4338ca;
  --color-sf-primary-darker: #3730a3;
  --color-sf-secondary: #ffffff;
  --color-sf-success: #15803d;
  --color-sf-info: #0e7490;
  --color-sf-warning: #c2410c;
  --color-sf-danger: #dc2626;
  --color-sf-success-light: #dcfce7;
  --color-sf-info-light: #cffafe;
  --color-sf-warning-light: #ffedd5;
  --color-sf-danger-light: #fee2e2;
  --color-sf-success-dark: #166534;
  --color-sf-info-dark: #155e75;
  --color-sf-warning-dark: #9a3412;
  --color-sf-danger-dark: #b91c1c;
  --color-sf-success-lighter: #f0fdf4;
  --color-sf-info-lighter: #ecfeff;
  --color-sf-warning-lighter: #fff7fd;
  --color-sf-danger-lighter: #fef2f2;
  --color-sf-black: 0, 0, 0;
  --color-sf-white: 255, 255, 255;

  // Primary-button
  --color-sf-primary-bg-color: #4f46e5;
  --color-sf-primary-border-color: #4f46e5;
  --color-sf-primary-text: #fff;
  --color-sf-primary-bg-color-hover: #4338ca;
  --color-sf-primary-border-color-hover: #4338ca;
  --color-sf-primary-text-hover: #ffffff;
  --color-sf-primary-bg-color-pressed: #3730a3;
  --color-sf-primary-border-color-pressed: #3730a3;
  --color-sf-primary-text-pressed: #fff;
  --color-sf-primary-bg-color-focus: #4338ca;
  --color-sf-primary-border-color-focus: #4338ca;
  --color-sf-primary-text-focus: #fff;
  --color-sf-primary-bg-color-disabled: #a5b4fc;
  --color-sf-primary-border-color-disabled: #a5b4fc;
  --color-sf-primary-text-disabled: #fff;
  
  // Secondary-button
  --color-sf-secondary-bg-color: #fff;
  --color-sf-secondary-border-color: #d1d5db;
  --color-sf-secondary-text-color: #374151;
  --color-sf-secondary-bg-color-hover: #f3f4f6;
  --color-sf-secondary-border-color-hover: #d1d5db;
  --color-sf-secondary-text-color-hover: #374151;
  --color-sf-secondary-bg-color-pressed: #e5e7eb;
  --color-sf-secondary-border-color-pressed: #d1d5db;
  --color-sf-secondary-text-color-pressed: #374151;
  --color-sf-secondary-bg-color-focus: #f3f4f6;
  --color-sf-secondary-border-color-focus: #d1d5db;
  --color-sf-secondary-text-color-focus: #374151;
  --color-sf-secondary-bg-color-disabled: #fff;
  --color-sf-secondary-border-color-disabled: #e5e7eb;
  --color-sf-secondary-text-color-disabled: #9ca3af;
  
  // Success-button
  --color-sf-success-bg-color: #15803d;
  --color-sf-success-border-color: #15803d;
  --color-sf-success-text: #fff;
  --color-sf-success-bg-color-hover: #166534;
  --color-sf-success-border-color-hover: #166534;
  --color-sf-success-text-hover: #fff;
  --color-sf-success-bg-color-pressed: #14532d;
  --color-sf-success-border-color-pressed: #14532d;
  --color-sf-success-text-pressed: #fff;
  --color-sf-success-bg-color-focus: #166534;
  --color-sf-success-border-color-focus: #166534;
  --color-sf-success-text-focus: #fff;
  --color-sf-success-bg-color-disabled: #86efac;
  --color-sf-success-border-color-disabled: #86efac;
  --color-sf-success-text-disabled: #fff;
  
  // Warning-button
  --color-sf-warning-bg-color: #c2410c;
  --color-sf-warning-border-color: #c2410c;
  --color-sf-warning-text: #fff;
  --color-sf-warning-bg-color-hover: #9a3412;
  --color-sf-warning-border-color-hover: #9a3412;
  --color-sf-warning-text-hover: #fff;
  --color-sf-warning-bg-color-pressed: #7c2d12;
  --color-sf-warning-border-color-pressed: #7c2d12;
  --color-sf-warning-text-pressed: #fff;
  --color-sf-warning-bg-color-focus: #9a3412;
  --color-sf-warning-border-color-focus: #9a3412;
  --color-sf-warning-text-focus: #fff;
  --color-sf-warning-bg-color-disabled: #fdba74;
  --color-sf-warning-border-color-disabled: #fdba74;
  --color-sf-warning-text-disabled: #fff;

  // Info-button
  --color-sf-info-bg-color: #0e7490;
  --color-sf-info-border-color: #0e7490;
  --color-sf-info-text: #fff;
  --color-sf-info-bg-color-hover: #155e75;
  --color-sf-info-border-color-hover: #155e75;
  --color-sf-info-text-hover: #fff;
  --color-sf-info-bg-color-pressed: #164e63;
  --color-sf-info-border-color-pressed: #164e63;
  --color-sf-info-text-pressed: #fff;
  --color-sf-info-bg-color-focus: #155e75;
  --color-sf-info-border-color-focus: #155e75;
  --color-sf-info-text-focus: #fff;
  --color-sf-info-bg-color-disabled: #67e8f9;
  --color-sf-info-border-color-disabled: #67e8f9;
  --color-sf-info-text-disabled: #fff;
  
  // danger-button
  --color-sf-danger-bg-color: #dc2626;
  --color-sf-danger-border-color: #dc2626;
  --color-sf-danger-text: #fff;
  --color-sf-danger-bg-color-hover: #b91c1c;
  --color-sf-danger-border-color-hover: #b91c1c;
  --color-sf-danger-text-hover: #fff;
  --color-sf-danger-bg-color-pressed: #991b1b;
  --color-sf-danger-border-color-pressed: #991b1b;
  --color-sf-danger-text-pressed: #fff;
  --color-sf-danger-bg-color-focus: #b91c1c;
  --color-sf-danger-border-color-focus: #b91c1c;
  --color-sf-danger-text-focus: #fff;
  --color-sf-danger-bg-color-disabled: #fca5a5;
  --color-sf-danger-border-color-disabled: #fca5a5;
  --color-sf-danger-text-disabled: #fff;

  //Outline button
  --color-sf-primary-outline: #4f46e5;
  --color-sf-secondary-outline: #d1d5db;
  --color-sf-warning-outline: #c2410c;
  --color-sf-danger-outline: #dc2626;
  --color-sf-success-outline: #15803d;
  --color-sf-info-outline: #0e7490;

  // Tooltip
  --color-sf-tooltip-bg-color: #111827;
  --color-sf-tooltip-border: #111827;
  --color-sf-tooltip-text-color: #f9fafb;

  //Light
  --color-sf-appbar-bg-color-alt1: #ffffff;
  --color-sf-appbar-color-alt1: #111827;
  --color-sf-appbar-border-color-alt1: #ffffff;
  --color-sf-appbar-hover-bg-color-alt1: rgba(255, 255, 255, .39);

  //dark
  --color-sf-appbar-bg-color-alt2: #1f2937;
  --color-sf-appbar-color-alt2: #ffffff;
  --color-sf-appbar-border-color-alt2: #1f2937;
  --color-sf-appbar-hover-bg-color-alt2: #818cf8;

  //diagram Palette color
  --color-sf-diagram-palette-background: #fff;
  --color-sf-diagram-palette-hover-background: #f9fafb;
  --color-sf-diagram-palette-selected-color: #e5e7eb;

  //rating
  --color-sf-rating-selected-color: #111827;
  --color-sf-rating-unrated-color: #e5e7eb;
  --color-sf-rating-selected-disabled-color: #9ca3af;
  --color-sf-rating-unrated-disabled-color: #e5e7eb;
  --color-sf-rating-selected-hover-color: #4f46e5;
  --color-sf-rating-unrated-hover-color: #374151;
  --color-sf-rating-pressed-color: #251bc3;

  //Message default
  --color-sf-msg-color: #374151;
  --color-sf-msg-bg-color: #f9fafb;
  --color-sf-msg-border-color: #e6e7ea;
  --color-sf-msg-color-alt1: #111827;
  --color-sf-msg-bg-color-alt1: rgba(255, 255, 255, .01);
  --color-sf-msg-border-color-alt1: #e6e7ea;
  --color-sf-msg-color-alt2: #374151;
  --color-sf-msg-bg-color-alt2: #f9fafb;
  --color-sf-msg-border-color-alt2: #f1f3f4;
  --color-sf-msg-icon-color: #374151;
  --color-sf-msg-icon-color-alt1: #111827;
  --color-sf-msg-icon-color-alt2: #808691;
  --color-sf-msg-close-icon-color: #374151;
  --color-sf-msg-close-icon-color-alt1: #6b7280;
  --color-sf-msg-close-icon-color-alt2: #374151;

  //Message danger
  --color-sf-msg-danger-color: #b91c1c;
  --color-sf-msg-danger-bg-color: #fff5f5;
  --color-sf-msg-danger-border-color: #fee2e2;
  --color-sf-msg-danger-color-alt1: #dc2626;
  --color-sf-msg-danger-bg-color-alt1: rgba(255, 255, 255, .01);
  --color-sf-msg-danger-border-color-alt1: #fecaca;
  --color-sf-msg-danger-color-alt2: #e45959;
  --color-sf-msg-danger-bg-color-alt2: #fff5f5;
  --color-sf-msg-danger-border-color-alt2: #fff5f5;
  --color-sf-msg-danger-icon-color: #dc2626;
  --color-sf-msg-danger-icon-color-alt1: #dc2626;
  --color-sf-msg-danger-icon-color-alt2: #dc2626;
  --color-sf-msg-danger-close-icon-color: #b91c1c;
  --color-sf-msg-danger-close-icon-color-alt1: #6b7280;
  --color-sf-msg-danger-close-icon-color-alt2: #6b7280;

  //Message success
  --color-sf-msg-success-color: #15803d;
  --color-sf-msg-success-bg-color: #f0fdf4;
  --color-sf-msg-success-border-color: #bbf7d0;
  --color-sf-msg-success-color-alt1: #15803d;
  --color-sf-msg-success-bg-color-alt1: rgba(255, 255, 255, .01);
  --color-sf-msg-success-border-color-alt1: #bbf7d0;
  --color-sf-msg-success-color-alt2: #15803d;
  --color-sf-msg-success-bg-color-alt2: #f0fdf4;
  --color-sf-msg-success-border-color-alt2: #f0fdf4;
  --color-sf-msg-success-icon-color: #15803d;
  --color-sf-msg-success-icon-color-alt1: #15803d;
  --color-sf-msg-success-icon-color-alt2: #15803d;
  --color-sf-msg-success-close-icon-color: #15803d;
  --color-sf-msg-success-close-icon-color-alt1: #6b7280;
  --color-sf-msg-success-close-icon-color-alt2: #6b7280;

  //Message warning
  --color-sf-msg-warning-color: #c2410c;
  --color-sf-msg-warning-bg-color: #fff7ed;
  --color-sf-msg-warning-border-color: #ffedd5;
  --color-sf-msg-warning-color-alt1: #c2410c;
  --color-sf-msg-warning-bg-color-alt1: rgba(255, 255, 255, .01);
  --color-sf-msg-warning-border-color-alt1: #fed7aa;
  --color-sf-msg-warning-color-alt2: #c2410c;
  --color-sf-msg-warning-bg-color-alt2: #fff7ed;
  --color-sf-msg-warning-border-color-alt2: #fff7ed;
  --color-sf-msg-warning-icon-color: #c2410c;
  --color-sf-msg-warning-icon-color-alt1: #c2410c;
  --color-sf-msg-warning-icon-color-alt2: #c2410c;
  --color-sf-msg-warning-close-icon-color: #c2410c;
  --color-sf-msg-warning-close-icon-color-alt1: #6b7280;
  --color-sf-msg-warning-close-icon-color-alt2: #6b7280;

  //Message info
  --color-sf-msg-info-color: #0e7490;
  --color-sf-msg-info-bg-color: #ecfeff;
  --color-sf-msg-info-border-color: #cffafe;
  --color-sf-msg-info-color-alt1: #0e7490;
  --color-sf-msg-info-bg-color-alt1: rgba(255, 255, 255, .01);
  --color-sf-msg-info-border-color-alt1: #bae6fd;
  --color-sf-msg-info-color-alt2: #0e7490;
  --color-sf-msg-info-bg-color-alt2: #ecfeff;
  --color-sf-msg-info-border-color-alt2: #ecfeff;
  --color-sf-msg-info-icon-color: #0e7490;
  --color-sf-msg-info-icon-color-alt1: #6b7280;
  --color-sf-msg-info-icon-color-alt2: #0e7490;
  --color-sf-msg-info-close-icon-color: #0e7490;
  --color-sf-msg-info-close-icon-color-alt1: #6b7280;
  --color-sf-msg-info-close-icon-color-alt2: #6b7280;

  //badge
  --color-sf-badge-light-bg-color: #faf9fa;
  --color-sf-badge-light-border-color: #faf9fa;
  --color-sf-badge-light-text-color: #000;
  --color-sf-badge-dark-bg-color: #212529;
  --color-sf-badge-dark-border-color: #212529;
  --color-sf-badge-dark-text-color: #fff;

  //tab
  --color-sf-tab-border: #343a40;

  //stepper
  --color-sf-stepper: #fff;
  --color-sf-shadow-color: #fff;
  --color-sf-shadow-color1: ##000;

  //breadcrumb
  --color-sf-breadcrumb-item-hover-color: #374151;
  --color-sf-breadcrumb-item-active-color: #4b5563;
  --color-sf-breadcrumb-item-focus-border-color: $transparent;
  
  // Transparent
  --color-sf-transparent: rgba(255, 255, 255, 0);
  
  //Primary-chip
  --color-sf-chip-primary-bg-color: #eef2ff;
  --color-sf-chip-primary-icon-color: rgba(67, 56, 202, .5);
  --color-sf-chip-primary-border-color: #e0e7ff;
  --color-sf-chip-primary-text: #4338ca;
  --color-sf-chip-primary-icon-color-hover: #4338ca;
  --color-sf-chip-primary-icon-color-pressed: #4338ca;
  --color-sf-chip-primary-bg-color-hover: #eef2ff;
  --color-sf-chip-primary-border-color-hover: #c7d2fe;
  --color-sf-chip-primary-text-hover: #4338ca;
  --color-sf-chip-primary-bg-color-pressed: #e0e7ff;
  --color-sf-chip-primary-icon-bg-color-pressed: #c7d2fe;
  --color-sf-chip-primary-icon-bg-color-hover: #c7d2fe;
  --color-sf-chip-primary-border-color-pressed: #e0e7ff;
  --color-sf-chip-primary-text-pressed: #4f46e5;
  --color-sf-chip-primary-bg-color-disabled: #eef2ff;
  --color-sf-chip-primary-border-color-disabled: #e0e7ff;
  --color-sf-chip-primary-text-disabled: #a5b4fc;
  
  //Secondary-chip
  --color-sf-chip-secondary-bg-color: #f9fafb;
  --color-sf-chip-secondary-icon-color: #9ca3af;
  --color-sf-chip-secondary-border-color: #f3f4f6;
  --color-sf-chip-secondary-text-color: #374151;
  --color-sf-chip-secondary-icon-color-hover: #5f6875;
  --color-sf-chip-secondary-icon-color-pressed: #5f6875;
  --color-sf-chip-secondary-bg-color-hover: #f9fafb;
  --color-sf-chip-secondary-border-color-hover: #e5e7eb;
  --color-sf-chip-secondary-text-color-hover: #374151;
  --color-sf-chip-secondary-bg-color-pressed: #e5e7eb;
  --color-sf-chip-secondary-icon-bg-color-pressed: #d7dadf;
  --color-sf-chip-secondary-icon-bg-color-hover: #d7dadf;
  --color-sf-chip-secondary-border-color-pressed: #e5e7eb;
  --color-sf-chip-secondary-text-color-pressed: #374151;
  --color-sf-chip-secondary-bg-color-disabled: #f9fafb;
  --color-sf-chip-secondary-border-color-disabled: #f3f4f6;
  --color-sf-chip-secondary-text-color-disabled: #9ca3af;
  
  //Success-chip
  --color-sf-chip-success-bg-color: #f0fdf4;
  --color-sf-chip-success-icon-color: rgba(21, 128, 61, .5);
  --color-sf-chip-success-border-color: #bbf7d0;
  --color-sf-chip-success-text: #15803d;
  --color-sf-chip-success-icon-color-hover: #489f68;
  --color-sf-chip-success-icon-color-pressed: #489f68;
  --color-sf-chip-success-bg-color-hover: #f0fdf4;
  --color-sf-chip-success-border-color-hover: #bbf7d0;
  --color-sf-chip-success-text-hover: #15803d;
  --color-sf-chip-success-bg-color-pressed: #bbf7d0;
  --color-sf-chip-success-icon-bg-color-pressed: #c4ebd2;
  --color-sf-chip-success-icon-bg-color-hover: #c4ebd2;
  --color-sf-chip-success-border-color-pressed: #bbf7d0;
  --color-sf-chip-success-text-pressed: #166534;
  --color-sf-chip-success-bg-color-disabled: #f0fdf4;
  --color-sf-chip-success-border-color-disabled: #bbf7d0;
  --color-sf-chip-success-text-disabled: #86efac;
  
  //Warning-chip
  --color-sf-chip-warning-bg-color: #fff7ed;
  --color-sf-chip-warning-icon-color: rgba(194, 65, 12, .5);
  --color-sf-chip-warning-border-color: #ffedd5;
  --color-sf-chip-warning-text: #c2410c;
  --color-sf-chip-warning-icon-color-hover: #c2410c;
  --color-sf-chip-warning-icon-color-pressed: #c2410c;
  --color-sf-chip-warning-bg-color-hover: #fff7ed;
  --color-sf-chip-warning-border-color-hover: #fed7aa;
  --color-sf-chip-warning-text-hover: #c2410c;
  --color-sf-chip-warning-bg-color-pressed: #fed7aa;
  --color-sf-chip-warning-icon-bg-color-pressed: #fed7aa;
  --color-sf-chip-warning-icon-bg-color-hover: #fed7aa;
  --color-sf-chip-warning-border-color-pressed: #fed7aa;
  --color-sf-chip-warning-text-pressed: #9a3412;
  --color-sf-chip-warning-bg-color-disabled: #fff7ed;
  --color-sf-chip-warning-border-color-disabled: #ffedd5;
  --color-sf-chip-warning-text-disabled: #fdba74;
  
  //danger-chip
  --color-sf-chip-danger-bg-color: #fef2f2;
  --color-sf-chip-danger-icon-color: rgba(185, 28, 28, .5);
  --color-sf-chip-danger-border-color: #fee2e2;
  --color-sf-chip-danger-text: #b91c1c;
  --color-sf-chip-danger-icon-color-hover: #b91c1c;
  --color-sf-chip-danger-icon-color-pressed: #b91c1c;
  --color-sf-chip-danger-bg-color-hover: #fef2f2;
  --color-sf-chip-danger-border-color-hover: #fecaca;
  --color-sf-chip-danger-text-hover: #b91c1c;
  --color-sf-chip-danger-bg-color-pressed: #fecaca;
  --color-sf-chip-danger-icon-bg-color-pressed: #fecaca;
  --color-sf-chip-danger-icon-bg-color-hover: #fecaca;
  --color-sf-chip-danger-border-color-pressed: #fecaca;
  --color-sf-chip-danger-text-pressed: #991b1b;
  --color-sf-chip-danger-bg-color-disabled: #fef2f2;
  --color-sf-chip-danger-border-color-disabled: #fee2e2;
  --color-sf-chip-danger-text-disabled: #fca5a5;
  
  //Info-chip
  --color-sf-chip-info-bg-color: #ecfeff;
  --color-sf-chip-info-icon-color: rgba(14, 116, 144, .5);
  --color-sf-chip-info-border-color: #cffafe;
  --color-sf-chip-info-text: #0e7490;
  --color-sf-chip-info-icon-color-hover: #0e7490;
  --color-sf-chip-info-icon-color-pressed: #0e7490;
  --color-sf-chip-info-bg-color-hover: #ecfeff;
  --color-sf-chip-info-border-color-hover: #a5f3fc;
  --color-sf-chip-info-text-hover: #0e7490;
  --color-sf-chip-info-bg-color-pressed: #a5f3fc;
  --color-sf-chip-info-icon-bg-color-pressed: #a5f3fc;
  --color-sf-chip-info-icon-bg-color-hover: #a5f3fc;
  --color-sf-chip-info-border-color-pressed: #a5f3fc;
  --color-sf-chip-info-text-pressed: #155e75;
  --color-sf-chip-info-bg-color-disabled: #ecfeff;
  --color-sf-chip-info-border-color-disabled: #cffafe;
  --color-sf-chip-info-text-disabled: #67e8f9;
}

:root,
.e-dark-mode {
  --e-font-name: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', arial, 'Noto Sans', 'Liberation Sans', sans-serif, 'apple color emoji', 'Segoe UI emoji', 'Segoe UI Symbol', 'Noto color emoji';
  --e-serif-font-name: 'Roboto';
  --e-mono-font-name: 'Roboto Mono';
  --e-radius: 1rem;
  --e-border: 1rem;
  --e-font-sans: sans-serif;
  --e-font-serif: serif;
  --e-font-mono: monospace;
}

:root,
.e-dark-mode {
  --e-font-family: var(--e-font-name), var(--e-font-sans);
}

// backgroundcolor
$content-bg-color: mapcolorvariable('content-bg-color') !default;
$content-bg-color-alt1: mapcolorvariable('content-bg-color-alt1') !default;
$content-bg-color-alt2: mapcolorvariable('content-bg-color-alt2') !default;
$content-bg-color-alt3: mapcolorvariable('content-bg-color-alt3') !default;
$content-bg-color-alt4: mapcolorvariable('content-bg-color-alt4') !default;
$content-bg-color-alt5: mapcolorvariable('content-bg-color-alt5') !default;
$content-bg-color-hover: mapcolorvariable('content-bg-color-hover') !default;
$content-bg-color-pressed: mapcolorvariable('content-bg-color-pressed') !default;
$content-bg-color-focus: mapcolorvariable('content-bg-color-focus') !default;
$content-bg-color-selected: mapcolorvariable('content-bg-color-selected') !default;
$content-bg-color-dragged: mapcolorvariable('content-bg-color-dragged') !default;
$content-bg-color-disabled: mapcolorvariable('content-bg-color-disabled') !default;
$flyout-bg-color: mapcolorvariable('flyout-bg-color') !default;
$flyout-bg-color-hover: mapcolorvariable('flyout-bg-color-hover') !default;
$flyout-bg-color-pressed: mapcolorvariable('flyout-bg-color-pressed') !default;
$flyout-bg-color-selected: mapcolorvariable('flyout-bg-color-selected') !default;
$flyout-bg-color-focus: mapcolorvariable('flyout-bg-color-focus') !default;
$flyout-bg-color-disabled: mapcolorvariable('flyout-bg-color-disabled') !default;
$overlay-bg: mapcolorvariable('overlay-bg-color');
$table-bg-color-hover: mapcolorvariable('table-bg-color-hover') !default;
$table-bg-color-pressed: mapcolorvariable('table-bg-color-pressed') !default;
$table-bg-color-selected: mapcolorvariable('table-bg-color-selected') !default;
$text-input-bg-color: mapcolorvariable('text-input-bg-color') !default;
$treeview-item-active-hover-bg: mapcolorvariable('treeview-item-active-hover-bg') !default;

// text-color
$content-text-color: mapcolorvariable('content-text-color') !default;
$content-text-color-alt1: mapcolorvariable('content-text-color-alt1') !default;
$content-text-color-alt2: mapcolorvariable('content-text-color-alt2') !default;
$content-text-color-alt3: mapcolorvariable('content-text-color-alt3') !default;
$content-text-color-alt4: mapcolorvariable('content-text-color-alt4') !default;
$content-text-color-hover: mapcolorvariable('content-text-color-hover') !default;
$content-text-color-pressed: mapcolorvariable('content-text-color-pressed') !default;
$content-text-color-focus: mapcolorvariable('content-text-color-focus') !default;
$content-text-color-selected: mapcolorvariable('content-text-color-selected') !default;
$content-text-color-dragged: mapcolorvariable('content-text-color-dragged') !default;
$content-text-color-disabled: mapcolorvariable('content-text-color-disabled') !default;
$placeholder-text-color: mapcolorvariable('placeholder-text-color') !default;
$flyout-text-color: mapcolorvariable('flyout-text-color') !default;
$flyout-text-color-hover: mapcolorvariable('flyout-text-color-hover') !default;
$flyout-text-color-pressed: mapcolorvariable('flyout-text-color-pressed') !default;
$flyout-text-color-selected: mapcolorvariable('flyout-text-color-selected') !default;
$flyout-text-color-focus: mapcolorvariable('flyout-text-color-focus') !default;
$flyout-text-color-disabled:  mapcolorvariable('flyout-text-color-disabled') !default;
$table-text-color-hover: mapcolorvariable('table-text-color-hover') !default;
$table-text-color-pressed: mapcolorvariable('table-text-color-pressed') !default;
$table-text-color-selected: mapcolorvariable('table-text-color-selected') !default;

// icon-color
$icon-color: mapcolorvariable('icon-color') !default;
$icon-color-hover: mapcolorvariable('icon-color-hover') !default;
$icon-color-pressed: mapcolorvariable('icon-color-pressed') !default;
$icon-color-disabled: mapcolorvariable('icon-color-disabled') !default;

// border-color
$border-light: mapcolorvariable('border-light') !default;
$border: mapcolorvariable('border') !default;
$border-dark: mapcolorvariable('border-dark') !default;
$border-hover: mapcolorvariable('border-hover') !default;
$border-pressed: mapcolorvariable('border-pressed') !default;
$border-focus: mapcolorvariable('border-focus') !default;
$border-selected: mapcolorvariable('border-selected') !default;
$border-dragged:mapcolorvariable('border-dragged') !default;
$border-disabled: mapcolorvariable('border-disabled') !default;
$border-warning: mapcolorvariable('border-warning') !default;
$border-error: mapcolorvariable('border-error') !default;
$border-success: mapcolorvariable('border-success') !default;
$spreadsheet-gridline: mapcolorvariable('spreadsheet-gridline') !default;
$flyout-border: mapcolorvariable('flyout-border') !default;
$dialog-border:mapcolorvariable('dialog-border') !default;

//sf Variables
$primary:   mapcolorvariable('primary') !default;
$secondary:   mapcolorvariable('secondary') !default;
$primary-text-color: mapcolorvariable('primary-text-color') !default;
$primary-light: mapcolorvariable('primary-light') !default;
$primary-lighter: mapcolorvariable('primary-lighter') !default;
$primary-dark: mapcolorvariable('primary-dark') !default;
$primary-darker: mapcolorvariable('primary-darker') !default;
$success:    mapcolorvariable('success') !default;
$info:       mapcolorvariable('info') !default;
$warning:    mapcolorvariable('warning') !default;
$danger:     mapcolorvariable('danger') !default;
$success-light:   mapcolorvariable('success-light') !default;
$info-light:      mapcolorvariable('info-light') !default;
$warning-light:   mapcolorvariable('warning-light') !default;
$danger-light:    mapcolorvariable('danger-light') !default;
$success-dark:    mapcolorvariable('success-dark') !default;
$info-dark:       mapcolorvariable('info-dark') !default;
$warning-dark:    mapcolorvariable('warning-dark') !default;
$danger-dark:     mapcolorvariable('danger-dark') !default;
$success-light-alt: mapcolorvariable('success-light-alt') !default;
$info-light-alt: mapcolorvariable('success-light-alt') !default;
$warning-light-alt: mapcolorvariable('warning-light-alt') !default;
$danger-light-alt: mapcolorvariable('danger-light-alt') !default;
$success-lighter: mapcolorvariable('success-lighter') !default;
$info-lighter: mapcolorvariable('info-lighter') !default;
$warning-lighter: mapcolorvariable('warning-lighter') !default;
$danger-lighter: mapcolorvariable('danger-lighter') !default;

// Primary-button
$primary-bg-color: mapcolorvariable('primary-bg-color') !default;
$primary-border-color: mapcolorvariable('primary-border-color') !default;
$primary-text: mapcolorvariable('primary-text') !default;
$primary-bg-color-hover: mapcolorvariable('primary-bg-color-hover') !default;
$primary-border-color-hover: mapcolorvariable('primary-border-color-hover') !default;
$primary-text-hover: mapcolorvariable('primary-text-hover') !default;
$primary-bg-color-pressed: mapcolorvariable('primary-bg-color-pressed') !default;
$primary-border-color-pressed: mapcolorvariable('primary-border-color-pressed') !default;
$primary-text-pressed: mapcolorvariable('primary-text-pressed') !default;
$primary-bg-color-focus: mapcolorvariable('primary-bg-color-focus') !default;
$primary-border-color-focus: mapcolorvariable('primary-border-color-focus') !default;
$primary-text-focus: mapcolorvariable('primary-text-focus') !default;
$primary-bg-color-disabled: mapcolorvariable('primary-bg-color-disabled') !default;
$primary-border-color-disabled: mapcolorvariable('primary-border-color-disabled') !default;
$primary-text-disabled: mapcolorvariable('primary-text-disabled') !default;

// Secondary-button
$secondary-bg-color: mapcolorvariable('secondary-bg-color') !default;
$secondary-border-color: mapcolorvariable('secondary-border-color') !default;
$secondary-text-color: mapcolorvariable('secondary-text-color') !default;
$secondary-bg-color-hover: mapcolorvariable('secondary-bg-color-hover') !default;
$secondary-border-color-hover: mapcolorvariable('secondary-border-color-hover') !default;
$secondary-text-color-hover: mapcolorvariable('secondary-text-color-hover') !default;
$secondary-bg-color-pressed: mapcolorvariable('secondary-bg-color-pressed') !default;
$secondary-border-color-pressed: mapcolorvariable('secondary-border-color-pressed') !default;
$secondary-text-color-pressed: mapcolorvariable('secondary-text-color-pressed') !default;
$secondary-bg-color-focus: mapcolorvariable('secondary-bg-color-focus') !default;
$secondary-border-color-focus: mapcolorvariable('secondary-border-color-focus') !default;
$secondary-text-color-focus: mapcolorvariable('secondary-text-color-focus') !default;
$secondary-bg-color-disabled: mapcolorvariable('secondary-bg-color-disabled') !default;
$secondary-border-color-disabled: mapcolorvariable('secondary-border-color-disabled') !default;
$secondary-text-color-disabled: mapcolorvariable('secondary-text-color-disabled') !default;

// Success-button
$success-bg-color: mapcolorvariable('success-bg-color') !default;
$success-border-color: mapcolorvariable('success-border-color') !default;
$success-text: mapcolorvariable('success-text') !default;
$success-bg-color-hover: mapcolorvariable('success-bg-color-hover') !default;
$success-border-color-hover: mapcolorvariable('success-border-color-hover') !default;
$success-text-hover: mapcolorvariable('success-text-hover') !default;
$success-bg-color-pressed: mapcolorvariable('success-bg-color-pressed') !default;
$success-border-color-pressed: mapcolorvariable('success-border-color-pressed') !default;
$success-text-pressed: mapcolorvariable('success-text-pressed') !default;
$success-bg-color-focus: mapcolorvariable('success-bg-color-focus') !default;
$success-border-color-focus: mapcolorvariable('success-border-color-focus') !default;
$success-text-focus: mapcolorvariable('success-text-focus') !default;
$success-bg-color-disabled: mapcolorvariable('success-bg-color-disabled') !default;
$success-border-color-disabled: mapcolorvariable('success-border-color-disabled') !default;
$success-text-disabled: mapcolorvariable('success-text-disabled') !default;

// Warning-button
$warning-bg-color: mapcolorvariable('warning-bg-color') !default;
$warning-border-color: mapcolorvariable('warning-border-color') !default;
$warning-text: mapcolorvariable('warning-text') !default;
$warning-bg-color-hover: mapcolorvariable('warning-bg-color-hover') !default;
$warning-border-color-hover: mapcolorvariable('warning-border-color-hover') !default;
$warning-text-hover: mapcolorvariable('warning-text-hover') !default;
$warning-bg-color-pressed: mapcolorvariable('warning-bg-color-pressed') !default;
$warning-border-color-pressed: mapcolorvariable('warning-border-color-pressed') !default;
$warning-text-pressed: mapcolorvariable('warning-text-pressed') !default;
$warning-bg-color-focus: mapcolorvariable('warning-bg-color-focus') !default;
$warning-border-color-focus: mapcolorvariable('warning-border-color-focus') !default;
$warning-text-focus: mapcolorvariable('warning-text-focus') !default;
$warning-bg-color-disabled: mapcolorvariable('warning-bg-color-disabled') !default;
$warning-border-color-disabled: mapcolorvariable('warning-border-color-disabled') !default;
$warning-text-disabled: mapcolorvariable('warning-text-disabled') !default;

// Info-button
$info-bg-color: mapcolorvariable('info-bg-color') !default;
$info-border-color: mapcolorvariable('info-border-color') !default;
$info-text: mapcolorvariable('info-text') !default;
$info-bg-color-hover: mapcolorvariable('info-bg-color-hover') !default;
$info-border-color-hover: mapcolorvariable('info-border-color-hover') !default;
$info-text-hover: mapcolorvariable('info-text-hover') !default;
$info-bg-color-pressed: mapcolorvariable('info-bg-color-pressed') !default;
$info-border-color-pressed: mapcolorvariable('info-border-color-pressed') !default;
$info-text-pressed: mapcolorvariable('info-text-pressed') !default;
$info-bg-color-focus: mapcolorvariable('info-bg-color-focus') !default;
$info-border-color-focus: mapcolorvariable('info-border-color-focus') !default;
$info-text-focus: mapcolorvariable('info-text-focus') !default;
$info-bg-color-disabled: mapcolorvariable('info-bg-color-disabled') !default;
$info-border-color-disabled: mapcolorvariable('info-border-color-disabled') !default;
$info-text-disabled: mapcolorvariable('info-text-disabled') !default;

// danger-button
$danger-bg-color: mapcolorvariable('danger-bg-color') !default;
$danger-border-color: mapcolorvariable('danger-border-color') !default;
$danger-text: mapcolorvariable('danger-text') !default;
$danger-bg-color-hover: mapcolorvariable('danger-bg-color-hover') !default;
$danger-border-color-hover: mapcolorvariable('danger-border-color-hover') !default;
$danger-text-hover: mapcolorvariable('danger-text-hover') !default;
$danger-bg-color-pressed: mapcolorvariable('danger-bg-color-pressed') !default;
$danger-border-color-pressed: mapcolorvariable('danger-border-color-pressed') !default;
$danger-text-pressed: mapcolorvariable('danger-text-pressed') !default;
$danger-bg-color-focus: mapcolorvariable('danger-bg-color-focus') !default;
$danger-border-color-focus: mapcolorvariable('danger-border-color-focus') !default;
$danger-text-focus: mapcolorvariable('danger-text-focus') !default;
$danger-bg-color-disabled: mapcolorvariable('danger-bg-color-disabled') !default;
$danger-border-color-disabled: mapcolorvariable('danger-border-color-disabled') !default;
$danger-text-disabled: mapcolorvariable('danger-text-disabled') !default;

//Outline button
$primary-outline: mapcolorvariable('primary-outline') !default;
$secondary-outline: mapcolorvariable('secondary-outline') !default;
$warning-outline: mapcolorvariable('warning-outline') !default;
$danger-outline: mapcolorvariable('danger-outline') !default;
$success-outline: mapcolorvariable('success-outline') !default;
$info-outline: mapcolorvariable('info-outline') !default;

// Tooltip
$tooltip-bg-color: mapcolorvariable('tooltip-bg-color') !default;
$tooltip-border: mapcolorvariable('tooltip-border') !default;
$tooltip-text-color: mapcolorvariable('tooltip-text-color') !default;

//appbar
//Light
$appbar-bg-color-alt1: mapcolorvariable('appbar-bg-color-alt1') !default;
$appbar-color-alt1:mapcolorvariable('appbar-color-alt1') !default;
$appbar-border-color-alt1: mapcolorvariable('appbar-border-color-alt1') !default;
$appbar-hover-bg-color-alt1: mapcolorvariable('appbar-hover-bg-color-alt1') !default;

//dark
$appbar-bg-color-alt2: mapcolorvariable('appbar-bg-color-alt2') !default;
$appbar-color-alt2: mapcolorvariable('appbar-color-alt2') !default;
$appbar-border-color-alt2: mapcolorvariable('appbar-border-color-alt2') !default;
$appbar-hover-bg-color-alt2: mapcolorvariable('appbar-hover-bg-color-alt2') !default;

//diagram Palette color
$diagram-palette-background: mapcolorvariable('diagram-palette-background') !default;
$diagram-palette-hover-background: mapcolorvariable('diagram-palette-hover-background') !default;
$diagram-palette-selected-background: mapcolorvariable('diagram-palette-selected-background') !default;

//rating
$rating-selected-color:mapcolorvariable('rating-selected-color') !default;
$rating-unrated-color: mapcolorvariable('rating-unrated-color') !default;
$rating-selected-disabled-color: mapcolorvariable('rating-selected-disabled-color') !default;
$rating-unrated-disabled-color: mapcolorvariable('rating-unrated-disabled-color') !default;
$rating-selected-hover-color: mapcolorvariable('rating-selected-hover-color') !default;
$rating-unrated-hover-color: mapcolorvariable('rating-unrated-hover-color') !default;
$rating-pressed-color: mapcolorvariable('rating-pressed-color') !default;

//Message component

//Message default
$msg-color: mapcolorvariable('msg-color') !default;
$msg-bg-color: mapcolorvariable('msg-bg-color') !default;
$msg-border-color:mapcolorvariable('msg-border-color') !default;
$msg-color-alt1: mapcolorvariable('msg-color-alt1') !default;
$msg-bg-color-alt1: mapcolorvariable('msg-bg-color-alt1') !default;
$msg-border-color-alt1: mapcolorvariable('msg-border-color-alt1') !default;
$msg-color-alt2: mapcolorvariable('msg-color-alt2') !default;
$msg-bg-color-alt2: mapcolorvariable('msg-bg-color-alt2') !default;
$msg-border-color-alt2: mapcolorvariable('msg-border-color-alt2') !default;
$msg-icon-color: mapcolorvariable('msg-icon-color') !default;
$msg-icon-color-alt1: mapcolorvariable('msg-icon-color-alt1') !default;
$msg-icon-color-alt2: mapcolorvariable('msg-icon-color-alt2') !default;
$msg-close-icon-color: mapcolorvariable('msg-close-icon-color') !default;
$msg-close-icon-color-alt1: mapcolorvariable('msg-close-icon-color-alt21') !default;
$msg-close-icon-color-alt2: mapcolorvariable('msg-close-icon-color-alt2') !default;

//Message success
$msg-success-color: mapcolorvariable('msg-success-color') !default;
$msg-success-bg-color: mapcolorvariable('msg-success-bg-color') !default;
$msg-success-border-color: mapcolorvariable('msg-success-border-color') !default;
$msg-success-color-alt1: mapcolorvariable('msg-success-color-alt1') !default;
$msg-success-bg-color-alt1: mapcolorvariable('msg-success-bg-color-alt1') !default;
$msg-success-border-color-alt1: mapcolorvariable('msg-success-border-color-alt1') !default;
$msg-success-color-alt2: mapcolorvariable('msg-success-color-alt2') !default;
$msg-success-bg-color-alt2: mapcolorvariable('msg-success-bg-color-alt2') !default;
$msg-success-border-color-alt2: mapcolorvariable('msg-success-border-color-alt2') !default;
$msg-success-icon-color: mapcolorvariable('msg-success-icon-color') !default;
$msg-success-icon-color-alt1:mapcolorvariable('msg-success-icon-color-alt1') !default;
$msg-success-icon-color-alt2: mapcolorvariable('msg-success-icon-color-alt2') !default;
$msg-success-close-icon-color: mapcolorvariable('msg-success-close-icon-color') !default;
$msg-success-close-icon-color-alt1: mapcolorvariable('msg-success-close-icon-color-alt1') !default;
$msg-success-close-icon-color-alt2: mapcolorvariable('msg-success-close-icon-color-alt2') !default;

//Message danger
$msg-danger-color: mapcolorvariable('msg-danger-color') !default;
$msg-danger-bg-color: mapcolorvariable('msg-danger-bg-color') !default;
$msg-danger-border-color: mapcolorvariable('msg-danger-border-color') !default;
$msg-danger-color-alt1: mapcolorvariable('msg-danger-color-alt1') !default;
$msg-danger-bg-color-alt1: mapcolorvariable('msg-danger-bg-color-alt1') !default;
$msg-danger-border-color-alt1: mapcolorvariable('msg-danger-border-color-alt1') !default;
$msg-danger-color-alt2: mapcolorvariable('msg-danger-color-alt2') !default;
$msg-danger-bg-color-alt2: mapcolorvariable('msg-danger-bg-color-alt2') !default;
$msg-danger-border-color-alt2: mapcolorvariable('msg-danger-border-color-alt2') !default;
$msg-danger-icon-color: mapcolorvariable('msg-danger-icon-color') !default;
$msg-danger-icon-color-alt1: mapcolorvariable('msg-danger-icon-color-alt1') !default;
$msg-danger-icon-color-alt2: mapcolorvariable('msg-danger-icon-color-alt2') !default;
$msg-danger-close-icon-color: mapcolorvariable('msg-danger-close-icon-color') !default;
$msg-danger-close-icon-color-alt1: mapcolorvariable('msg-danger-close-icon-color-alt1') !default;
$msg-danger-close-icon-color-alt2: mapcolorvariable('msg-danger-close-icon-color-alt2') !default;

//Message Info
$msg-info-color: mapcolorvariable('msg-info-color') !default;
$msg-info-bg-color: mapcolorvariable('msg-info-bg-color') !default;
$msg-info-border-color: mapcolorvariable('msg-info-border-color') !default;
$msg-info-color-alt1: mapcolorvariable('msg-info-color-alt1') !default;
$msg-info-bg-color-alt1: mapcolorvariable('msg-info-bg-color-alt1') !default;
$msg-info-border-color-alt1: mapcolorvariable('msg-info-border-color-alt1') !default;
$msg-info-color-alt2: mapcolorvariable('msg-info-color-alt2') !default;
$msg-info-bg-color-alt2: mapcolorvariable('msg-info-bg-color-alt2') !default;
$msg-info-border-color-alt2: mapcolorvariable('msg-info-border-color-alt2') !default;
$msg-info-icon-color: mapcolorvariable('msg-info-icon-color') !default;
$msg-info-icon-color-alt1: mapcolorvariable('msg-info-icon-color-alt1') !default;
$msg-info-icon-color-alt2:mapcolorvariable('msg-info-icon-color-alt2') !default;
$msg-info-close-icon-color: mapcolorvariable('msg-info-close-icon-color') !default;
$msg-info-close-icon-color-alt1: mapcolorvariable('msg-info-close-icon-color-alt1') !default;
$msg-info-close-icon-color-alt2: mapcolorvariable('msg-info-close-icon-color-alt2') !default;

//Message Warning
$msg-warning-color: mapcolorvariable('msg-warning-color') !default;
$msg-warning-bg-color: mapcolorvariable('msg-warning-bg-color') !default;
$msg-warning-border-color: mapcolorvariable('msg-warning-border-color') !default;
$msg-warning-color-alt1: mapcolorvariable('msg-warning-color-alt1') !default;
$msg-warning-bg-color-alt1: mapcolorvariable('msg-warning-bg-color-alt1') !default;
$msg-warning-border-color-alt1: mapcolorvariable('msg-warning-border-color-alt1') !default;
$msg-warning-color-alt2: mapcolorvariable('msg-warning-color-alt2') !default;
$msg-warning-bg-color-alt2: mapcolorvariable('msg-warning-bg-color-alt2') !default;
$msg-warning-border-color-alt2: mapcolorvariable('msg-warning-border-color-alt2') !default;
$msg-warning-icon-color: mapcolorvariable('msg-warning-icon-color') !default;
$msg-warning-icon-color-alt1: mapcolorvariable('msg-warning-icon-color-alt1') !default;
$msg-warning-icon-color-alt2: mapcolorvariable('msg-warning-icon-color-alt2') !default;
$msg-warning-close-icon-color: mapcolorvariable('msg-warning-close-icon-color') !default;
$msg-warning-close-icon-color-alt1: mapcolorvariable('msg-warning-close-icon-color-alt1') !default;
$msg-warning-close-icon-color-alt2: mapcolorvariable('msg-warning-close-icon-color-alt2') !default;

 
//Primary-chip
$chip-primary-bg-color: mapcolorvariable('chip-primary-bg-color') !default;
$chip-primary-icon-color: mapcolorvariable('chip-primary-icon-color') !default;
$chip-primary-border-color: mapcolorvariable('chip-primary-border-color') !default;
$chip-primary-text: mapcolorvariable('chip-primary-text') !default;
$chip-primary-icon-color-hover: mapcolorvariable('chip-primary-icon-color-hover') !default;
$chip-primary-icon-color-pressed: mapcolorvariable('chip-primary-icon-color-pressed') !default;
$chip-primary-bg-color-hover: mapcolorvariable('chip-primary-bg-color-hover') !default;
$chip-primary-border-color-hover: mapcolorvariable('chip-primary-border-color-hover') !default;
$chip-primary-text-hover: mapcolorvariable('chip-primary-text-hover') !default;
$chip-primary-bg-color-pressed: mapcolorvariable('chip-primary-bg-color-pressed') !default;
$chip-primary-icon-bg-color-pressed: mapcolorvariable('chip-primary-icon-bg-color-pressed') !default;
$chip-primary-icon-bg-color-hover: mapcolorvariable('chip-primary-icon-bg-color-hover') !default;
$chip-primary-border-color-pressed: mapcolorvariable('chip-primary-border-color-pressed') !default;
$chip-primary-text-pressed: mapcolorvariable('chip-primary-text-pressed') !default;
$chip-primary-bg-color-disabled: mapcolorvariable('chip-primary-bg-color-disabled') !default;
$chip-primary-border-color-disabled: mapcolorvariable('chip-primary-border-color-disabled') !default;
$chip-primary-text-disabled: mapcolorvariable('chip-primary-text-disabled') !default;
  
  
//Secondary-chip
$chip-secondary-bg-color: mapcolorvariable('chip-secondary-bg-color') !default;
$chip-secondary-icon-color: mapcolorvariable('chip-secondary-icon-color') !default;
$chip-secondary-border-color: mapcolorvariable('chip-secondary-border-color') !default;
$chip-secondary-text: mapcolorvariable('chip-secondary-text') !default;
$chip-secondary-icon-color-hover: mapcolorvariable('chip-secondary-icon-color-hover') !default;
$chip-secondary-icon-color-pressed: mapcolorvariable('chip-secondary-icon-color-pressed') !default;
$chip-secondary-bg-color-hover: mapcolorvariable('chip-secondary-bg-color-hover') !default;
$chip-secondary-border-color-hover: mapcolorvariable('chip-secondary-border-color-hover') !default;
$chip-secondary-text-hover: mapcolorvariable('chip-secondary-text-hover') !default;
$chip-secondary-bg-color-pressed: mapcolorvariable('chip-secondary-bg-color-pressed') !default;
$chip-secondary-icon-bg-color-pressed: mapcolorvariable('chip-secondary-icon-bg-color-pressed') !default;
$chip-secondary-icon-bg-color-hover: mapcolorvariable('chip-secondary-icon-bg-color-hover') !default;
$chip-secondary-border-color-pressed: mapcolorvariable('chip-secondary-border-color-pressed') !default;
$chip-secondary-text-pressed: mapcolorvariable('chip-secondary-text-pressed') !default;
$chip-secondary-bg-color-disabled: mapcolorvariable('chip-secondary-bg-color-disabled') !default;
$chip-secondary-border-color-disabled: mapcolorvariable('chip-secondary-border-color-disabled') !default;
$chip-secondary-text-disabled: mapcolorvariable('chip-secondary-text-disabled') !default;
  
//Success-chip
$chip-success-bg-color: mapcolorvariable('chip-success-bg-color') !default;
$chip-success-icon-color: mapcolorvariable('chip-success-icon-color') !default;
$chip-success-border-color: mapcolorvariable('chip-success-border-color') !default;
$chip-success-text: mapcolorvariable('chip-success-text') !default;
$chip-success-icon-color-hover: mapcolorvariable('chip-success-icon-color-hover') !default;
$chip-success-icon-color-pressed: mapcolorvariable('chip-success-icon-color-pressed') !default;
$chip-success-bg-color-hover: mapcolorvariable('chip-success-bg-color-hover') !default;
$chip-success-border-color-hover: mapcolorvariable('chip-success-border-color-hover') !default;
$chip-success-text-hover: mapcolorvariable('chip-success-text-hover') !default;
$chip-success-bg-color-pressed: mapcolorvariable('chip-success-bg-color-pressed') !default;
$chip-success-icon-bg-color-pressed: mapcolorvariable('chip-success-icon-bg-color-pressed') !default;
$chip-success-icon-bg-color-hover: mapcolorvariable('chip-success-icon-bg-color-hover') !default;
$chip-success-border-color-pressed: mapcolorvariable('chip-success-border-color-pressed') !default;
$chip-success-text-pressed: mapcolorvariable('chip-success-text-pressed') !default;
$chip-success-bg-color-disabled: mapcolorvariable('chip-success-bg-color-disabled') !default;
$chip-success-border-color-disabled: mapcolorvariable('chip-success-border-color-disabled') !default;
$chip-success-text-disabled: mapcolorvariable('chip-success-text-disabled') !default;
  
//Warning-chip
$chip-warning-bg-color: mapcolorvariable('chip-warning-bg-color') !default;
$chip-warning-icon-color: mapcolorvariable('chip-warning-icon-color') !default;
$chip-warning-border-color: mapcolorvariable('chip-warning-border-color') !default;
$chip-warning-text: mapcolorvariable('chip-warning-text') !default;
$chip-warning-icon-color-hover: mapcolorvariable('chip-warning-icon-color-hover') !default;
$chip-warning-icon-color-pressed: mapcolorvariable('chip-warning-icon-color-pressed') !default;
$chip-warning-bg-color-hover: mapcolorvariable('chip-warning-bg-color-hover') !default;
$chip-warning-border-color-hover: mapcolorvariable('chip-warning-border-color-hover') !default;
$chip-warning-text-hover: mapcolorvariable('chip-warning-text-hover') !default;
$chip-warning-bg-color-pressed: mapcolorvariable('chip-warning-bg-color-pressed') !default;
$chip-warning-icon-bg-color-pressed: mapcolorvariable('chip-warning-icon-bg-color-pressed') !default;
$chip-warning-icon-bg-color-hover: mapcolorvariable('chip-warning-icon-bg-color-hover') !default;
$chip-warning-border-color-pressed: mapcolorvariable('chip-warning-border-color-pressed') !default;
$chip-warning-text-pressed: mapcolorvariable('chip-warning-text-pressed') !default;
$chip-warning-bg-color-disabled: mapcolorvariable('chip-warning-bg-color-disabled') !default;
$chip-warning-border-color-disabled: mapcolorvariable('chip-warning-border-color-disabled') !default;
$chip-warning-text-disabled: mapcolorvariable('chip-warning-text-disabled') !default;
  
  
//danger-chip
$chip-danger-bg-color: mapcolorvariable('chip-danger-bg-color') !default;
$chip-danger-icon-color: mapcolorvariable('chip-danger-icon-color') !default;
$chip-danger-border-color: mapcolorvariable('chip-danger-border-color') !default;
$chip-danger-text: mapcolorvariable('chip-danger-text') !default;
$chip-danger-icon-color-hover: mapcolorvariable('chip-danger-icon-color-hover') !default;
$chip-danger-icon-color-pressed: mapcolorvariable('chip-danger-icon-color-pressed') !default;
$chip-danger-bg-color-hover: mapcolorvariable('chip-danger-bg-color-hover') !default;
$chip-danger-border-color-hover: mapcolorvariable('chip-danger-border-color-hover') !default;
$chip-danger-text-hover: mapcolorvariable('chip-danger-text-hover') !default;
$chip-danger-bg-color-pressed: mapcolorvariable('chip-danger-bg-color-pressed') !default;
$chip-danger-icon-bg-color-pressed: mapcolorvariable('chip-danger-icon-bg-color-pressed') !default;
$chip-danger-icon-bg-color-hover: mapcolorvariable('chip-danger-icon-bg-color-hover') !default;
$chip-danger-border-color-pressed: mapcolorvariable('chip-danger-border-color-pressed') !default;
$chip-danger-text-pressed: mapcolorvariable('chip-danger-text-pressed') !default;
$chip-danger-bg-color-disabled: mapcolorvariable('chip-danger-bg-color-disabled') !default;
$chip-danger-border-color-disabled: mapcolorvariable('chip-danger-border-color-disabled') !default;
$chip-danger-text-disabled: mapcolorvariable('chip-danger-text-disabled') !default;
  
//Info-chip
$chip-info-bg-color: mapcolorvariable('chip-info-bg-color') !default;
$chip-info-icon-color: mapcolorvariable('chip-info-icon-color') !default;
$chip-info-border-color: mapcolorvariable('chip-info-border-color') !default;
$chip-info-text: mapcolorvariable('chip-info-text') !default;
$chip-info-icon-color-hover: mapcolorvariable('chip-info-icon-color-hover') !default;
$chip-info-icon-color-pressed: mapcolorvariable('chip-info-icon-color-pressed') !default;
$chip-info-bg-color-hover: mapcolorvariable('chip-info-bg-color-hover') !default;
$chip-info-border-color-hover: mapcolorvariable('chip-info-border-color-hover') !default;
$chip-info-text-hover: mapcolorvariable('chip-info-text-hover') !default;
$chip-info-bg-color-pressed: mapcolorvariable('chip-info-bg-color-pressed') !default;
$chip-info-icon-bg-color-pressed: mapcolorvariable('chip-info-icon-bg-color-pressed') !default;
$chip-info-icon-bg-color-hover: mapcolorvariable('chip-info-icon-bg-color-hover') !default;
$chip-info-border-color-pressed: mapcolorvariable('chip-info-border-color-pressed') !default;
$chip-info-text-pressed: mapcolorvariable('chip-info-text-pressed') !default;
$chip-info-bg-color-disabled: mapcolorvariable('chip-info-bg-color-disabled') !default;
$chip-info-border-color-disabled: mapcolorvariable('chip-info-border-color-disabled') !default;
$chip-info-text-disabled: mapcolorvariable('chip-info-text-disabled') !default;
  
//badge
$badge-primary-bg-color-darken: mapcolorvariable('badge-primary-bg-color-darken') !default;
$badge-secondary-bg-color-darken: mapcolorvariable('badge-secondary-bg-color-darken') !default;
$badge-success-bg-color-darken: mapcolorvariable('badge-success-bg-color-darken') !default;
$badge-danger-bg-color-darken: mapcolorvariable('badge-danger-bg-color-darken') !default;
$badge-warning-bg-color-darken: mapcolorvariable('badge-warning-bg-color-darken') !default;
$badge-info-bg-color-darken: mapcolorvariable('badge-info-bg-color-darken') !default;
$badge-light-bg-color-darken: mapcolorvariable('badge-light-bg-color-darken') !default;
$badge-dark-bg-color-darken: mapcolorvariable('badge-dark-bg-color-darken') !default;

//tab
$tab-border: mapcolorvariable('tab-border') !default;

// close-icon-color
$close-icon-color: mapcolorvariable('close-icon-color') !default;
$close-icon-color-hover: mapcolorvariable('close-icon-color-hover') !default;
$close-icon-color-pressed:  mapcolorvariable('close-icon-color-pressed') !default;
$close-icon-color-disabled:  mapcolorvariable('close-icon-color-disabled') !default;

//badge
$badge-light-bg-color: mapcolorvariable('badge-light-bg-color') !default;
$badge-light-border-color: mapcolorvariable('badge-light-border-color') !default;
$badge-light-text-color: mapcolorvariable('badge-light-text-color') !default;
$badge-dark-bg-color: mapcolorvariable('badge-dark-bg-color') !default;
$badge-dark-border-color: mapcolorvariable('badge-dark-border-color') !default;
$badge-dark-text-color: mapcolorvariable('badge-dark-text-color') !default;

//breadcrumb
$breadcrumb-item-hover-color: mapcolorvariable('breadcrumb-item-hover-color') !default;
$breadcrumb-item-active-color: mapcolorvariable('breadcrumb-item-active-color') !default;
$breadcrumb-item-focus-border-color: mapcolorvariable('breadcrumb-item-focus-border-color') !default;

//stepper
$stepper: mapcolorvariable('stepper') !default;
$shadow-color: mapcolorvariable('shadow-color') !default;
$shadow-color1: mapcolorvariable('shadow-color1') !default;

$primary-shadow: mapcolorvariable('primary-shadow') !default;
$secondary-shadow: mapcolorvariable('secondary-shadow') !default;
$success-shadow: mapcolorvariable('success-shadow') !default;
$danger-shadow: mapcolorvariable('danger-shadow') !default;
$info-shadow: mapcolorvariable('info-shadow') !default;
$warning-shadow: mapcolorvariable('warning-shadow') !default;

/* Font Family */
$font-family: maplayoutvariable('font-family') !default;

// default font Size
$text-xxs: 10px !default;
$text-xs: 12px !default;
$text-sm: 14px !default;
$text-base: 16px !default;
$text-lg: 18px !default;
$text-xl: 20px !default;
$text-2xl: 24px !default;
$text-3xl: 30px !default;
$text-4xl: 36px !default;
$text-5xl: 48px !default;
$text-6xl: 60px !default;
$text-7xl: 72px !default;
$text-8xl: 96px !default;
$text-9xl: 128px !default;

// font Weight
$font-weight: 400 !default;
$font-weight-lighter: lighter !default;
$font-weight-light: 300 !default;
$font-weight-normal: 400 !default;
$font-weight-medium: 500 !default;
$font-weight-semibold: 600 !default;
$font-weight-bold: 700 !default;
$font-weight-bolder: bolder !default;

//font-icons
$font-icon-5: 5px !default;
$font-icon-8: 8px !default;
$font-icon-9: 9px !default;
$font-icon-10: 10px !default;
$font-icon-12: 12px !default;
$font-icon-13: 13px !default;
$font-icon-14: 14px !default;
$font-icon-15: 15px !default;
$font-icon-16: 16px !default;
$font-icon-17: 17px !default;
$font-icon-18: 18px !default;
$font-icon-20: 20px !default;
$font-icon-22: 22px !default;
$font-icon-24: 24px !default;
$font-icon-26: 26px !default;
$font-icon-28: 28px !default;
$font-icon-32: 32px !default;

/* border */
$border-0: calc(maplayoutvariable('border') * 0) !default; /* 0px */
$border-1: calc(maplayoutvariable('border') * .0625) !default; /* 1px */
$border-1-5:   calc(maplayoutvariable('border') * .09375) !default;   /* 1.5px */
$border-2: calc(maplayoutvariable('border') * .125) !default; /* 2px */
$border-3: calc(maplayoutvariable('border') * .1875) !default; /* 3px */
$border-4: calc(maplayoutvariable('border') * .25) !default; /* 4px */
$border-5: calc(maplayoutvariable('border') * .3125) !default; /* 5px */
$border-6: calc(maplayoutvariable('border') * .375) !default; /* 6px */
$border-7: calc(maplayoutvariable('border') * .4375) !default; /* 7px */
$border-8: calc(maplayoutvariable('border') * .5) !default; /* 8px */

/* Radius */
$radius-0: calc(maplayoutvariable('radius') * 0) !default;
$radius-1: calc(maplayoutvariable('radius') * .0625) !default; /* 1px */
$radius-2: calc(maplayoutvariable('radius') * .125) !default; /* 2px */
$radius-3: calc(maplayoutvariable('radius') * .1875) !default; /* 3px */
$radius-4: calc(maplayoutvariable('radius') * .25) !default; /* 4px */
$radius-5: calc(maplayoutvariable('radius') * .3125) !default; /* 5px */
$radius-6: calc(maplayoutvariable('radius') * .375) !default; /* 6px */
$radius-7: calc(maplayoutvariable('radius') * .4375) !default; /* 7px */
$radius-8: calc(maplayoutvariable('radius') * .5) !default; /* 8px */
$radius-9: calc(maplayoutvariable('radius') * .5625) !default; /* 9px */
$radius-10: calc(maplayoutvariable('radius') * .625) !default; /* 10px */
$radius-11: calc(maplayoutvariable('radius') * .6875) !default; /* 11px */
$radius-12: calc(maplayoutvariable('radius') * .75) !default; /* 12px */
$radius-13: calc(maplayoutvariable('radius') * .8125) !default; /* 13px */
$radius-14: calc(maplayoutvariable('radius') * .875) !default; /* 14px */
$radius-15: calc(maplayoutvariable('radius') * .9375) !default; /* 15px */
$radius-16: calc(maplayoutvariable('radius') * 1) !default; /* 16px */
$radius-17: calc(maplayoutvariable('radius') * 1.0625) !default; /* 17px */
$radius-18: calc(maplayoutvariable('radius') * 1.125) !default; /* 18px */
$radius-19: calc(maplayoutvariable('radius') * 1.1875) !default; /* 19px */
$radius-20: calc(maplayoutvariable('radius') * 1.25) !default; /* 20px */
$radius-21: calc(maplayoutvariable('radius') * 1.3125) !default; /* 21px */
$radius-22: calc(maplayoutvariable('radius') * 1.375) !default; /* 22px */
$radius-23: calc(maplayoutvariable('radius') * 1.4375) !default; /* 23px */
$radius-24: calc(maplayoutvariable('radius') * 1.5) !default; /* 24px */
$radius-25: calc(maplayoutvariable('radius') * 1.5625) !default; /* 25px */
$radius-26: calc(maplayoutvariable('radius') * 1.625) !default; /* 26px */
$radius-27: calc(maplayoutvariable('radius') * 1.6875) !default; /* 27px */
$radius-28: calc(maplayoutvariable('radius') * 1.75) !default; /* 28px */
$radius-29: calc(maplayoutvariable('radius') * 1.8125) !default; /* 29px */
$radius-30: calc(maplayoutvariable('radius') * 1.875) !default; /* 30px */
$radius-31: calc(maplayoutvariable('radius') * 1.9375) !default; /* 31px */
$radius-32: calc(maplayoutvariable('radius') * 2) !default; /* 32px */
$radius-33: calc(maplayoutvariable('radius') * 2.0625) !default; /* 33px */
$radius-34: calc(maplayoutvariable('radius') * 2.125) !default; /* 34px */
$radius-35: calc(maplayoutvariable('radius') * 2.1875) !default; /* 35px */
$radius-36: calc(maplayoutvariable('radius') * 2.25) !default; /* 36px */
$radius-37: calc(maplayoutvariable('radius') * 2.3125) !default; /* 37px */
$radius-38: calc(maplayoutvariable('radius') * 2.375) !default; /* 38px */
$radius-39: calc(maplayoutvariable('radius') * 2.4375) !default; /* 39px */
$radius-40: calc(maplayoutvariable('radius') * 2.5) !default; /* 40px */
$radius-41: calc(maplayoutvariable('radius') * 2.5625) !default; /* 41px */
$radius-42: calc(maplayoutvariable('radius') * 2.625) !default; /* 42px */
$radius-43: calc(maplayoutvariable('radius') * 2.6875) !default; /* 43px */
$radius-44: calc(maplayoutvariable('radius') * 2.75) !default; /* 44px */
$radius-45: calc(maplayoutvariable('radius') * 2.8125) !default; /* 45px */
$radius-46: calc(maplayoutvariable('radius') * 2.875) !default; /* 46px */
$radius-47: calc(maplayoutvariable('radius') * 2.9375) !default; /* 47px */
$radius-48: calc(maplayoutvariable('radius') * 3) !default; /* 48px */
$radius-49: calc(maplayoutvariable('radius') * 3.0625) !default; /* 49px */
$radius-50: calc(maplayoutvariable('radius') * 3.125) !default; /* 50px */
$radius-5em:    calc(maplayoutvariable('radius') * 5) !default;        /* 5em */
$radius-full: 999px !default;
$radius-unset: unset;
$border-65p: 65%;
$border-unset: unset;
$border-none: none;
$border-radius-50p: 50%;

$btn-small-radius:maplayoutvariable('radius-4') !default;
$btn-default-radius:maplayoutvariable('radius-6') !default;
$btn-bigger-small-radius:maplayoutvariable('radius-6') !default;
$btn-bigger-radius:maplayoutvariable('radius-8') !default;

$checkbox-small-radius:maplayoutvariable('radius-4') !default;
$checkbox-default-radius:maplayoutvariable('radius-4') !default;
$checkbox-bigger-small-radius:maplayoutvariable('radius-4') !default;
$checkbox-bigger-radius:maplayoutvariable('radius-4') !default;

$chip-small-radius:maplayoutvariable('radius-4') !default;
$chip-default-radius:maplayoutvariable('radius-6') !default;
$chip-bigger-small-radius:maplayoutvariable('radius-6') !default;
$chip-bigger-radius:maplayoutvariable('radius-6') !default;

$input-small-radius:maplayoutvariable('radius-4') !default;
$input-default-radius:maplayoutvariable('radius-6') !default;
$input-bigger-small-radius:maplayoutvariable('radius-6') !default;
$input-bigger-radius:maplayoutvariable('radius-8') !default;

$flyout-small-radius:maplayoutvariable('radius-4') !default;
$flyout-default-radius:maplayoutvariable('radius-6') !default;
$flyout-bigger-small-radius:maplayoutvariable('radius-6') !default;
$flyout-bigger-radius:maplayoutvariable('radius-8') !default;

$modal-default-radius:maplayoutvariable('radius-8') !default;
$modal-bigger-radius:maplayoutvariable('radius-12') !default;

$card-default-radius:maplayoutvariable('radius-8') !default;
$card-bigger-radius:maplayoutvariable('radius-12') !default;

$tooltip-default-radius:maplayoutvariable('radius-4') !default;
$tooltip-bigger-radius:maplayoutvariable('radius-6') !default;

$toast-default-radius:maplayoutvariable('radius-8') !default;
$toast-bigger-radius:maplayoutvariable('radius-12') !default;

$msg-default-radius:maplayoutvariable('radius-6') !default;
$msg-bigger-radius:maplayoutvariable('radius-8') !default;

$list-hover-radius:maplayoutvariable('radius-6') !default;
$list-bigger-hover-radius:maplayoutvariable('radius-8') !default;

$flyout-hover-radius:maplayoutvariable('radius-6') !default;
$flyout-bigger-hover-radius:maplayoutvariable('radius-8') !default;

// black
$black: mapcolorvariable('black') !default;

// White
$white: mapcolorvariable('white') !default;

// Transparent
$transparent: mapcolorvariable('transparent') !default;

// scss-docs-start gray-color-variables
$gray-50: #f9fafb !default;
$gray-100: #f3f4f6 !default;
$gray-200: #e5e7eb !default;
$gray-300: #d1d5db !default;
$gray-400: #9ca3af !default;
$gray-500: #6b7280 !default;
$gray-600: #4b5563 !default;
$gray-700: #374151 !default;
$gray-800: #1f2937 !default;
$gray-900: #111827 !default;
$gray-950: #030712 !default;

// scss-docs-start color-variables
$blue:    #0d6efd !default;
$indigo:  #6610f2 !default;
$purple:  #6f42c1 !default;
$pink:    #d63384 !default;
$red:     #dc3545 !default;
$orange:  #fd7e14 !default;
$yellow:  #ffc107 !default;
$green:   #198754 !default;
$teal:    #20c997 !default;
$cyan:    #0dcaf0 !default;

$primary: $primary !default;
$primary-dark: $primary-dark !default;
$primary-darker: $primary-darker !default;
$secondary: $secondary !default;
$success: $success !default;
$info: $info !default;
$warning: $warning !default;
$danger: $danger !default;
$success-light: $success-light !default;
$info-light: $info-light !default;
$warning-light: $warning-light !default;
$danger-light: $danger-light !default;
$primary-text-color: $primary-text-color !default;
$primary-light: $primary-light !default;
$primary-lighter: $primary-lighter !default;
$success-dark: $success-dark !default;
$info-dark: $info-dark !default;
$warning-dark: $warning-dark !default;
$danger-dark: $danger-dark !default;
$success-light-alt: $success-light-alt !default;
$info-light-alt: $info-light-alt !default;
$warning-light-alt: $warning-light-alt !default;
$danger-light-alt: $danger-light-alt !default;

// backgroundcolor
$content-bg-color: $content-bg-color !default;
$content-bg-color-alt1: $content-bg-color-alt1 !default;
$content-bg-color-alt2: $content-bg-color-alt2 !default;
$content-bg-color-alt3: $content-bg-color-alt3 !default;
$content-bg-color-alt4: $content-bg-color-alt4 !default;
$content-bg-color-alt5: $content-bg-color-alt5 !default;
$content-bg-color-hover: $content-bg-color-hover !default;
$content-bg-color-pressed: $content-bg-color-pressed !default;
$content-bg-color-focus: $content-bg-color-focus !default;
$content-bg-color-selected: $content-bg-color-selected !default;
$content-bg-color-dragged: $content-bg-color-dragged !default;
$content-bg-color-disabled: $content-bg-color-disabled !default;
$flyout-bg-color: $flyout-bg-color !default;
$flyout-bg-color-hover: $flyout-bg-color-hover !default;
$flyout-bg-color-pressed: $flyout-bg-color-pressed !default;
$flyout-bg-color-selected: $flyout-bg-color-selected !default;
$flyout-bg-color-focus: $flyout-bg-color-focus !default;
$flyout-bg-color-disabled: $flyout-bg-color-disabled !default;
$overlay-bg-color: $overlay-bg !default;
$table-bg-color-hover: $table-bg-color-hover !default;
$table-bg-color-pressed: $table-bg-color-pressed !default;
$table-bg-color-selected: $table-bg-color-selected !default;
$table-bg-color-selected-hover: $gray-300 !default;

// all theme common color
$colorpicker-gradient-1: #f00 !default;
$colorpicker-gradient-2: #ff0 !default;
$ccolorpicker-gradient-3: #0f0 !default;
$colorpicker-gradient-4: #0ff !default;
$colorpicker-gradient-5: #00f !default;
$colorpicker-gradient-6: #f0f !default;
$colorpicker-gradient-7: #ff0004 !default;
$spreadsheet-selection-1: #673ab8 !default;
$spreadsheet-selection-2: #9c27b0 !default;
$spreadsheet-selection-3: #029688 !default;
$spreadsheet-selection-4: #4caf51 !default;
$spreadsheet-selection-5: #fe9800 !default;
$spreadsheet-selection-6: #3f52b5 !default;

// text-color
$content-text-color: $content-text-color !default;
$content-text-color-alt1: $content-text-color-alt1 !default;
$content-text-color-alt2: $content-text-color-alt2 !default;
$content-text-color-alt3: $content-text-color-alt3 !default;
$content-text-color-alt4: $content-text-color-alt4 !default;
$content-text-color-hover: $content-text-color-hover !default;
$content-text-color-pressed: $content-text-color-pressed !default;
$content-text-color-focus: $content-text-color-focus !default;
$content-text-color-selected: $content-text-color-selected !default;
$content-text-color-dragged: $content-text-color-dragged !default;
$content-text-color-disabled: $content-text-color-disabled !default;
$placeholder-text-color: $placeholder-text-color !default;
$flyout-text-color: $flyout-text-color !default;
$flyout-text-color-hover: $flyout-text-color-hover !default;
$flyout-text-color-pressed: $flyout-text-color-pressed !default;
$flyout-text-color-selected: $flyout-text-color-selected !default;
$flyout-text-color-disabled: $flyout-text-color-disabled !default;
$flyout-text-color-focus: $flyout-text-color-focus !default;
$table-text-color-hover: $table-text-color-hover !default;
$table-text-color-pressed: $table-text-color-pressed !default;
$table-text-color-selected: $table-text-color-selected !default;

// icon-color
$icon-color: $icon-color !default;
$icon-color-hover: $icon-color-hover !default;
$icon-color-pressed: $icon-color-pressed !default;
$icon-color-disabled: $icon-color-disabled !default;

// close-icon-color
$close-icon-color: $close-icon-color !default;
$close-icon-color-hover: $close-icon-color-hover !default;
$close-icon-color-pressed: $close-icon-color-pressed !default;
$close-icon-color-disabled: $close-icon-color-disabled !default;

// border-color
$border-light: $border-light !default;
$border: $border !default;
$border-dark: $border-dark !default;
$border-hover: $border-hover !default;
$border-pressed: $border-pressed !default;
$border-focus: $border-focus !default;
$border-selected: $border-selected !default;
$border-dragged: $border-dragged !default;
$border-disabled: $border-disabled !default;
$border-warning: $border-warning !default;
$border-error: $border-error !default;
$border-success: $border-success !default;
$spreadsheet-gridline: $spreadsheet-gridline !default;
$flyout-border: $flyout-border !default;

// Tooltip
$tooltip-bg-color: $tooltip-bg-color !default;
$tooltip-border: $tooltip-border !default;
$tooltip-text-color: $tooltip-text-color !default;

// shadow
$shadow: 0 1px 2px -1px rgba($black, .1), 0 1px 3px 0 rgba($black, .1) !default;
$shadow-sm: 0 1px 2px 0 rgba($black, .05) !default;
$shadow-md: 0 2px 4px -2px rgba($black, .1), 0 4px 6px -1px rgba($black, .1) !default;
$shadow-lg:  0 0 4px 0 rgba($black, .1), 0 4px 6px -4px rgba($black, .1),0 10px 15px -3px rgba($black, .1) !default;
$shadow-xl: 0 8px 10px -6px rgba($black, .1), 0 20px 25px -5px rgba($black, .1) !default;
$shadow-2xl: 0 25px 50px -12px rgba($black, .25) !default;
$shadow-inner: inset 0 2px 4px 0 rgba($black, .05) !default;
$shadow-none: 0 0 rgba($black, 0) !default;
$shadow-focus-ring1: 0 0 0 2px $content-bg-color, 0 0 0 4px $primary !default;
$shadow-focus-ring2: inset 0 0 0 2px $primary !default;
$primary-shadow-focus: 0 0 0 4px rgba($primary, .5) !default;
$fab-shadow: 0 4px 6px -4px rgba($black, .1), 0 10px 15px -3px rgba($black, .1) !default;
$appbar-bottom-shadow: 0 4px 6px -1px rgba($black, .1), 0 2px 4px -2px rgba($black, .1) !default;
$appbar-top-shadow: 0 -4px 6px -1px rgba($black, .06), 0 -2px 4px -2px rgba($black, .1) !default;
$shadow-stepper-large: 0 0 0 4px rgba($content-bg-color) !default;
$shadow-stepper-small: 0 0 0 4px rgba($content-bg-color) !default;

// shadow
$shadow: 0 .8px 16px rgba($black, .15) !default;
$shadow-sm: 0 2px 4px rgba($black, .075) !default;
$shadow-md: 0 8px 12px rgba($black, .15) !default;
$shadow-lg:  0 16px 48px rgba($black, .175) !default;
$shadow-xl: 0 20px 25px -5px rgba($black, .1), 0 10px 10px -5px rgba($black, .04) !default;
$shadow-2xl: 0 25px 50px -12px rgba($black, .25) !default;
$shadow-inner: inset 0 1px 2px rgba($black, .075) !default;
$shadow-none: 0 0 rgba($black, 0) !default;
$shadow-focus-ring1: 0 0 0 4px rgba($primary-shadow, .25) !default;
$shadow-focus-ring2: 0 0 0 4px rgba($primary-shadow, .25) !default;
$primary-shadow-focus: 0 0 0 4px rgba($primary-shadow, .5) !default;
$secondary-shadow-focus: 0 0 0 4px rgba($secondary-shadow, .5) !default;
$success-shadow-focus: 0 0 0 4px rgba($success-shadow, .5) !default;
$danger-shadow-focus: 0 0 0 4px rgba($danger-shadow, .5) !default;
$info-shadow-focus: 0 0 0 4px rgba($info-shadow, .5) !default;
$warning-shadow-focus: 0 0 0 4px rgba($warning-shadow, .5) !default;
$keyboard-focus-shadow: inset 0 0 0 1px $shadow-color, inset 0 0 0 2px $shadow-color1 !default;

// heading
$h1-font-size: 40px !default;
$h2-font-size: 32px !default;
$h3-font-size: 28px !default;
$h4-font-size: $text-2xl !default;
$h5-font-size: $text-xl !default;
$h6-font-size: $text-base !default;

// Line height
$leading-none: 1 !default;
$leading-tight: 1.25 !default;
$leading-snug: 1.375 !default;
$leading-normal: 1.5 !default;
$leading-relaxed: 1.625 !default;
$leading-loose: 2 !default;

// Secondary-button
$secondary-bg-color: $secondary-bg-color !default;
$secondary-border-color: $secondary-border-color !default;
$secondary-text-color: $secondary-text-color !default;
$secondary-bg-color-hover: $secondary-bg-color-hover !default;
$secondary-border-color-hover: $secondary-border-color-hover !default;
$secondary-text-color-hover: $secondary-text-color-hover !default;
$secondary-bg-color-pressed: $secondary-bg-color-pressed !default;
$secondary-border-color-pressed: $secondary-border-color-pressed !default;
$secondary-text-color-pressed: $secondary-text-color-pressed !default;
$secondary-bg-color-focus: $secondary-bg-color-focus !default;
$secondary-border-color-focus: $secondary-border-color-focus !default;
$secondary-text-color-focus: $secondary-text-color-focus !default;
$secondary-bg-color-disabled: $secondary-bg-color-disabled !default;
$secondary-border-color-disabled: $secondary-bg-color-disabled !default;
$secondary-text-color-disabled: rgba($secondary-text-color, .65) !default;

// Primary-button

$primary-bg-color: rgba($primary-bg-color, 1) !default;
$primary-border-color: $primary-border-color !default;
$primary-text:   $primary-text !default;
$primary-bg-color-hover: $primary-bg-color-hover !default;
$primary-border-color-hover: $primary-border-color-hover !default;
$primary-text-hover: $primary-text-hover !default;
$primary-bg-color-pressed: $primary-bg-color-pressed !default;
$primary-border-color-pressed: $primary-border-color-pressed !default;
$primary-text-pressed: $primary-text-pressed !default;
$primary-bg-color-focus: $primary-bg-color-focus !default;
$primary-border-color-focus: $primary-border-color-focus !default;
$primary-text-focus: $primary-text-focus !default;
$primary-bg-color-disabled: $primary-bg-color-disabled !default;
$primary-border-color-disabled: $primary-border-color-disabled !default;
$primary-text-disabled: $primary-text-disabled !default;

// Success-button
$success-bg-color: rgba($success-bg-color, 1) !default;
$success-border-color: $success-border-color !default;
$success-text:   $success-text !default;
$success-bg-color-hover: $success-bg-color-hover !default;
$success-border-color-hover: $success-border-color-hover !default;
$success-text-hover: $success-text-hover !default;
$success-bg-color-pressed: $success-bg-color-pressed !default;
$success-border-color-pressed: $success-border-color-pressed !default;
$success-text-pressed: $success-text-pressed !default;
$success-bg-color-focus: $success-bg-color-focus !default;
$success-border-color-focus: $success-border-color-focus !default;
$success-text-focus: $success-text-focus !default;
$success-bg-color-disabled: $success-bg-color-disabled !default;
$success-border-color-disabled: $success-border-color-disabled !default;
$success-text-disabled: $success-text-disabled !default;

// Warning-button
$warning-bg-color: rgba($warning-bg-color, 1) !default;
$warning-border-color: $warning-border-color !default;
$warning-text: $warning-text !default;
$warning-bg-color-hover: $warning-bg-color-hover !default;
$warning-border-color-hover: $warning-border-color-hover !default;
$warning-text-hover: $warning-text-hover !default;
$warning-bg-color-pressed: $warning-bg-color-pressed !default;
$warning-border-color-pressed: $warning-border-color-pressed !default;
$warning-text-pressed: $warning-text-pressed !default;
$warning-bg-color-focus: $warning-bg-color-focus !default;
$warning-border-color-focus: $warning-border-color-focus !default;
$warning-text-focus: $warning-text-focus !default;
$warning-bg-color-disabled: $warning-bg-color-disabled !default;
$warning-border-color-disabled: $warning-border-color-disabled !default;
$warning-text-disabled: $warning-text-disabled !default;

// Info-button
$info-bg-color: rgba($info-bg-color, 1) !default;
$info-border-color: $info-border-color !default;
$info-text: $info-text !default;
$info-bg-color-hover: $info-bg-color-hover !default;
$info-border-color-hover: $info-border-color-hover !default;
$info-text-hover: $info-text-hover !default;
$info-bg-color-pressed: $info-bg-color-pressed !default;
$info-border-color-pressed: $info-border-color-pressed !default;
$info-text-pressed: $info-text-pressed !default;
$info-bg-color-focus: $info-bg-color-focus !default;
$info-border-color-focus: $info-border-color-focus !default;
$info-text-focus: $info-text-focus !default;
$info-bg-color-disabled: $info-bg-color-disabled !default;
$info-border-color-disabled: $info-border-color-disabled !default;
$info-text-disabled: $info-text-disabled !default;

// danger-button
$danger-bg-color: rgba($danger-bg-color, 1) !default;
$danger-border-color: $danger-border-color !default;
$danger-text: $danger-text !default;
$danger-bg-color-hover: $danger-bg-color-hover !default;
$danger-border-color-hover: $danger-border-color-hover !default;
$danger-text-hover: $danger-text-hover !default;
$danger-bg-color-pressed: $danger-bg-color-pressed !default;
$danger-border-color-pressed: $danger-border-color-pressed !default;
$danger-text-pressed: $danger-text-pressed !default;
$danger-bg-color-focus: $danger-bg-color-focus !default;
$danger-border-color-focus: $danger-border-color-focus !default;
$danger-text-focus: $danger-text-focus !default;
$danger-bg-color-disabled: $danger-bg-color-disabled !default;
$danger-border-color-disabled: $danger-border-color-disabled !default;
$danger-text-disabled: $danger-text-disabled !default;

//Outline button
$primary-outline: $primary-outline !default;
$secondary-outline: $secondary-outline !default;
$warning-outline: $warning-outline !default;
$danger-outline: $danger-outline !default;
$success-outline: $success-outline !default;
$info-outline: $info-outline !default;

// chart series
$series-1: #e5e7eb;
$series-2: #d1d5db;
$series-3: #9ca3af;
$series-4: #1f2937;
$series-5: #5a61f6;
$series-6: #91bd34;
$series-7: #267dda;
$series-8: #01a8b5;
$series-9: #de4383;
$series-10: #107c10;
$series-11: #d83b01;
$series-12: #ffb900;
$skin-name: 'tailwind3' !default;
$theme-name: 'tailwind3' !default;

//diagram Palette color
$diagram-palette-background: $diagram-palette-background !default;
$diagram-palette-hover-background: $diagram-palette-hover-background !default;
$diagram-palette-selected-background: $diagram-palette-selected-background !default;

//Message component
//Message default
$msg-color: $msg-color !default;
$msg-bg-color: $msg-bg-color !default;
$msg-border-color: $msg-border-color !default;
$msg-color-alt1: $msg-color-alt1 !default;
$msg-bg-color-alt1: $msg-bg-color-alt1 !default;
$msg-border-color-alt1: $msg-border-color-alt1 !default;
$msg-color-alt2: $msg-color-alt2 !default;
$msg-bg-color-alt2: $msg-bg-color-alt2 !default;
$msg-border-color-alt2: $msg-border-color-alt2 !default;
$msg-icon-color: $msg-icon-color !default;
$msg-icon-color-alt1: $msg-icon-color-alt1 !default;
$msg-icon-color-alt2: $msg-icon-color-alt2 !default;

$msg-close-icon-color: $msg-close-icon-color !default;
$msg-close-icon-color-alt1: $msg-close-icon-color-alt21 !default;
$msg-close-icon-color-alt2: $msg-close-icon-color-alt2 !default;

//Message success
$msg-success-color: $msg-success-color !default;
$msg-success-bg-color: $msg-success-bg-color !default;
$msg-success-border-color: $msg-success-border-color !default;
$msg-success-color-alt1: $msg-success-color-alt1 !default;
$msg-success-bg-color-alt1: $msg-success-bg-color-alt1 !default;
$msg-success-border-color-alt1: $msg-success-border-color-alt1 !default;
$msg-success-color-alt2: $msg-success-color-alt2 !default;
$msg-success-bg-color-alt2: $msg-success-bg-color-alt2 !default;
$msg-success-border-color-alt2: $msg-success-border-color-alt2 !default;
$msg-success-icon-color: $msg-success-icon-color !default;
$msg-success-icon-color-alt1: $msg-success-icon-color-alt1 !default;
$msg-success-icon-color-alt2: $msg-success-icon-color-alt2 !default;
$msg-success-close-icon-color: $msg-success-close-icon-color !default;
$msg-success-close-icon-color-alt1: $msg-success-close-icon-color-alt1 !default;
$msg-success-close-icon-color-alt2: $msg-success-close-icon-color-alt2 !default;

//Message danger
$msg-danger-color: $msg-danger-color !default;
$msg-danger-bg-color: $msg-danger-bg-color !default;
$msg-danger-border-color: $msg-danger-border-color !default;
$msg-danger-color-alt1: $msg-danger-color-alt1 !default;
$msg-danger-bg-color-alt1: $msg-danger-bg-color-alt1 !default;
$msg-danger-border-color-alt1: $msg-danger-border-color-alt1 !default;
$msg-danger-color-alt2: $msg-danger-color-alt2 !default;
$msg-danger-bg-color-alt2: $msg-danger-bg-color-alt2 !default;
$msg-danger-border-color-alt2: $msg-danger-border-color-alt2 !default;
$msg-danger-icon-color: $msg-danger-icon-color !default;
$msg-danger-icon-color-alt1: $msg-danger-icon-color-alt1 !default;
$msg-danger-icon-color-alt2: $msg-danger-icon-color-alt2 !default;
$msg-danger-close-icon-color: $msg-danger-close-icon-color !default;
$msg-danger-close-icon-color-alt1: $msg-danger-close-icon-color-alt1 !default;
$msg-danger-close-icon-color-alt2: $msg-danger-close-icon-color-alt2 !default;

//Message Info
$msg-info-color: $msg-info-color !default;
$msg-info-bg-color: $msg-info-bg-color !default;
$msg-info-border-color: $msg-info-border-color !default;
$msg-info-color-alt1: $msg-info-color-alt1 !default;
$msg-info-bg-color-alt1: $msg-info-bg-color-alt1 !default;
$msg-info-border-color-alt1: $msg-info-border-color-alt1 !default;
$msg-info-color-alt2: $msg-info-color-alt2 !default;
$msg-info-bg-color-alt2: $msg-info-bg-color-alt2 !default;
$msg-info-border-color-alt2: $msg-info-border-color-alt2 !default;
$msg-info-icon-color: $msg-info-icon-color !default;
$msg-info-icon-color-alt1: $msg-info-icon-color-alt1 !default;
$msg-info-icon-color-alt2: $msg-info-icon-color-alt2 !default;
$msg-info-close-icon-color: $msg-info-close-icon-color !default;
$msg-info-close-icon-color-alt1: $msg-info-close-icon-color-alt1 !default;
$msg-info-close-icon-color-alt2: $msg-info-close-icon-color-alt2 !default;

//Message Warning
$msg-warning-color: $msg-warning-color !default;
$msg-warning-bg-color: $msg-warning-bg-color !default;
$msg-warning-border-color: $msg-warning-border-color !default;
$msg-warning-color-alt1: $msg-warning-color-alt1 !default;
$msg-warning-bg-color-alt1: $msg-warning-bg-color-alt1 !default;
$msg-warning-border-color-alt1: $msg-warning-border-color-alt1 !default;
$msg-warning-color-alt2: $msg-warning-color-alt2 !default;
$msg-warning-bg-color-alt2: $msg-warning-bg-color-alt2 !default;
$msg-warning-border-color-alt2: $msg-warning-border-color-alt2 !default;
$msg-warning-icon-color: $msg-warning-icon-color !default;
$msg-warning-icon-color-alt1: $msg-warning-icon-color-alt1 !default;
$msg-warning-icon-color-alt2: $msg-warning-icon-color-alt2 !default;
$msg-warning-close-icon-color: $msg-warning-close-icon-color !default;
$msg-warning-close-icon-color-alt1: $msg-warning-close-icon-color-alt1 !default;
$msg-warning-close-icon-color-alt2: $msg-warning-close-icon-color-alt2 !default;

//Primary-chip
$chip-primary-bg-color: $chip-primary-bg-color;
$chip-primary-icon-color: $chip-primary-icon-color;
$chip-primary-border-color: $chip-primary-border-color;
$chip-primary-text: $chip-primary-text;
$chip-primary-icon-color-hover: $chip-primary-icon-color-hover;
$chip-primary-icon-color-pressed: $chip-primary-icon-color-pressed;
$chip-primary-bg-color-hover: $chip-primary-bg-color-hover;
$chip-primary-border-color-hover: $chip-primary-border-color-hover;
$chip-primary-text-hover: $chip-primary-text-hover;
$chip-primary-bg-color-pressed: $chip-primary-bg-color-pressed;
$chip-primary-icon-bg-color-pressed: $chip-primary-icon-bg-color-pressed;
$chip-primary-icon-bg-color-hover: $chip-primary-icon-bg-color-hover;
$chip-primary-border-color-pressed: $chip-primary-border-color-pressed;
$chip-primary-text-pressed: $chip-primary-text-pressed;
$chip-primary-bg-color-disabled: $chip-primary-bg-color-disabled;
$chip-primary-border-color-disabled: $chip-primary-border-color-disabled;
$chip-primary-text-disabled: $chip-primary-text-disabled;
  
//Secondary-chip
$chip-secondary-bg-color: $chip-secondary-bg-color;
$chip-secondary-icon-color: $chip-secondary-icon-color;
$chip-secondary-border-color: $chip-secondary-border-color;
$chip-secondary-text: $chip-secondary-text;
$chip-secondary-icon-color-hover: $chip-secondary-icon-color-hover;
$chip-secondary-icon-color-pressed: $chip-secondary-icon-color-pressed;
$chip-secondary-bg-color-hover: $chip-secondary-bg-color-hover;
$chip-secondary-border-color-hover: $chip-secondary-border-color-hover;
$chip-secondary-text-hover: $chip-secondary-text-hover;
$chip-secondary-bg-color-pressed: $chip-secondary-bg-color-pressed;
$chip-secondary-icon-bg-color-pressed: $chip-secondary-icon-bg-color-pressed;
$chip-secondary-icon-bg-color-hover: $chip-secondary-icon-bg-color-hover;
$chip-secondary-border-color-pressed: $chip-secondary-border-color-pressed;
$chip-secondary-text-pressed: $chip-secondary-text-pressed;
$chip-secondary-bg-color-disabled: $chip-secondary-bg-color-disabled;
$chip-secondary-border-color-disabled: $chip-secondary-border-color-disabled;
$chip-secondary-text-disabled: $chip-secondary-text-disabled;

//Success-chip
$chip-success-bg-color: $chip-success-bg-color;
$chip-success-icon-color: $chip-success-icon-color;
$chip-success-border-color:  $chip-success-border-color;
$chip-success-text: $chip-success-text;
$chip-success-icon-color-hover: $chip-success-icon-color-hover;
$chip-success-icon-color-pressed: $chip-success-icon-color-pressed;
$chip-success-bg-color-hover: $chip-success-bg-color-hover;
$chip-success-border-color-hover: $chip-success-border-color-hover;
$chip-success-text-hover: $chip-success-text-hover;
$chip-success-bg-color-pressed: $chip-success-bg-color-pressed;
$chip-success-icon-bg-color-pressed: $chip-success-icon-bg-color-pressed;
$chip-success-icon-bg-color-hover: $chip-success-icon-bg-color-hover;
$chip-success-border-color-pressed: $chip-success-border-color-pressed;
$chip-success-text-pressed: $chip-success-text-pressed;
$chip-success-bg-color-disabled: $chip-success-bg-color-disabled;
$chip-success-border-color-disabled: $chip-success-border-color-disabled;
$chip-success-text-disabled: $chip-success-text-disabled;

//Warning-chip
$chip-warning-bg-color: $chip-warning-bg-color;
$chip-warning-icon-color: $chip-warning-icon-color;
$chip-warning-border-color: $chip-warning-border-color;
$chip-warning-text: $chip-warning-text;
$chip-warning-icon-color-hover: $chip-warning-icon-color-hover;
$chip-warning-icon-color-pressed: $chip-warning-icon-color-pressed;
$chip-warning-bg-color-hover: $chip-warning-bg-color-hover;
$chip-warning-border-color-hover: $chip-warning-border-color-hover;
$chip-warning-text-hover: $chip-warning-text-hover;
$chip-warning-bg-color-pressed: $chip-warning-bg-color-pressed;
$chip-warning-icon-bg-color-pressed: $chip-warning-icon-bg-color-pressed;
$chip-warning-icon-bg-color-hover: $chip-warning-icon-bg-color-hover;
$chip-warning-border-color-pressed: $chip-warning-border-color-pressed;
$chip-warning-text-pressed: $chip-warning-text-pressed;
$chip-warning-bg-color-disabled: $chip-warning-bg-color-disabled;
$chip-warning-border-color-disabled: $chip-warning-border-color-disabled;
$chip-warning-text-disabled: $chip-warning-text-disabled;
  
//danger-chip
$chip-danger-bg-color: $chip-danger-bg-color;
$chip-danger-icon-color: $chip-danger-icon-color;
$chip-danger-border-color: $chip-danger-border-color;
$chip-danger-text: $chip-danger-text;
$chip-danger-icon-color-hover: $chip-danger-icon-color-hover;
$chip-danger-icon-color-pressed: $chip-danger-icon-color-pressed;
$chip-danger-bg-color-hover: $chip-danger-bg-color-hover;
$chip-danger-border-color-hover: $chip-danger-border-color-hover;
$chip-danger-text-hover: $chip-danger-text-hover;
$chip-danger-bg-color-pressed: $chip-danger-bg-color-pressed;
$chip-danger-icon-bg-color-pressed: $chip-danger-icon-bg-color-pressed;
$chip-danger-icon-bg-color-hover: $chip-danger-icon-bg-color-hover;
$chip-danger-border-color-pressed: $chip-danger-border-color-pressed;
$chip-danger-text-pressed: $chip-danger-text-pressed;
$chip-danger-bg-color-disabled: $chip-danger-bg-color-disabled;
$chip-danger-border-color-disabled: $chip-danger-border-color-disabled;
$chip-danger-text-disabled: $chip-danger-text-disabled;

//Info-chip
$chip-info-bg-color: $chip-info-bg-color;
$chip-info-icon-color: $chip-info-icon-color;
$chip-info-border-color: $chip-info-border-color;
$chip-info-text: $chip-info-text;
$chip-info-icon-color-hover: $chip-info-icon-color-hover;
$chip-info-icon-color-pressed: $chip-info-icon-color-pressed;
$chip-info-bg-color-hover: $chip-info-bg-color-hover;
$chip-info-border-color-hover: $chip-info-border-color-hover;
$chip-info-text-hover: $chip-info-text-hover;
$chip-info-bg-color-pressed: $chip-info-bg-color-pressed;
$chip-info-icon-bg-color-pressed: $chip-info-icon-bg-color-pressed;
$chip-info-icon-bg-color-hover: $chip-info-icon-bg-color-hover;
$chip-info-border-color-pressed: $chip-info-border-color-pressed;
$chip-info-text-pressed: $chip-info-text-pressed;
$chip-info-bg-color-disabled: $chip-info-bg-color-disabled;
$chip-info-border-color-disabled: $chip-info-border-color-disabled;
$chip-info-text-disabled: $chip-info-text-disabled;

//app bar Light
$appbar-bg-color-alt1: $appbar-bg-color-alt1 !default;
$appbar-color-alt1: $appbar-color-alt1 !default;
$appbar-border-color-alt1: $appbar-border-color-alt1 !default;
$appbar-hover-bg-color-alt1: $appbar-hover-bg-color-alt1 !default;

//dark
$appbar-bg-color-alt2: $appbar-bg-color-alt2 !default;
$appbar-color-alt2: $appbar-color-alt2 !default;
$appbar-border-color-alt2: $appbar-border-color-alt2 !default;
$appbar-hover-bg-color-alt2: $appbar-hover-bg-color-alt2 !default;

//shadow
$appbar-bottom-shadow: none !default;
$appbar-top-shadow: none !default;

//rating
$rating-selected-color: $rating-selected-color !default;
$rating-unrated-color: $rating-unrated-color !default;
$rating-selected-disabled-color: $rating-selected-disabled-color !default;
$rating-unrated-disabled-color: $rating-unrated-disabled-color !default;
$rating-selected-hover-color: $rating-selected-hover-color !default;
$rating-unrated-hover-color: $rating-unrated-hover-color !default;
$rating-pressed-color: $rating-pressed-color !default;

//badge
$badge-light-bg-color: $badge-light-bg-color;
$badge-light-border-color: $badge-light-border-color;
$badge-light-text-color: $badge-light-text-color;
$badge-dark-bg-color: $badge-dark-bg-color;
$badge-dark-border-color: $badge-dark-border-color;
$badge-dark-text-color: $badge-dark-text-color;

//tab
$tab-border: $tab-border;

//stepper
$stepper:$stepper;
$shadow-color: $shadow-color;
$shadow-color1: $shadow-color1;

// black
$black: $black;

// White
$white: $white;

// Transparent
$transparent: $transparent;

//missed variables
$accordion-text-active-color: $primary !default;

//frozen
$frozen-shadow: rgba(0, 0, 0, .12) !default;
$frozen-shadow-2: rgba(0, 0, 0, .12) !default;

.e-dark-mode{

  --color-sf-content-bg-color: rgba(17, 24, 39);
  --color-sf-content-bg-color-alt1: #1d2432;
  --color-sf-content-bg-color-alt2: #232937;
  --color-sf-content-bg-color-alt3: #282f3c;
  --color-sf-content-bg-color-alt4: #2f3542;
  --color-sf-content-bg-color-alt5: #343a47;
  --color-sf-content-bg-color-hover: #1a212f;
  --color-sf-content-bg-color-pressed: #242a38;
  --color-sf-content-bg-color-focus: #1a212f;
  --color-sf-content-bg-color-selected: #2e3441;
  --color-sf-content-bg-color-dragged: #242a38;
  --color-sf-content-bg-color-disabled: #111827;
  --color-sf-flyout-bg-color: #1a212f;
  --color-sf-flyout-bg-color-hover: #1f2634;
  --color-sf-flyout-bg-color-pressed: #242a38;
  --color-sf-flyout-bg-color-focus: #1f2634;
  --color-sf-flyout-bg-color-selected: #2e3441;
  --color-sf-flyout-bg-color-disabled: #1a212f;
  --color-sf-overlay-bg-color: rgba(107, 114, 128, .75);
  --color-sf-table-bg-color-hover: #1a212f;
  --color-sf-table-bg-color-pressed: #242a38;
  --color-sf-table-bg-color-selected: #2e3441;
  --color-sf-text-input-bg-color: rgba(255, 255, 255, .05);
  --color-sf-treeview-item-active-hover-bg: ##2e3441;

  // text-color
  --color-sf-content-text-color: #fff;
  --color-sf-content-text-color-alt1: #e5e7eb;
  --color-sf-content-text-color-alt2: #d1d5db;
  --color-sf-content-text-color-alt3: #9ca3af;
  --color-sf-content-text-color-alt4: #6b7280;
  --color-sf-content-text-color-hover: #fff;
  --color-sf-content-text-color-pressed: #fff;
  --color-sf-content-text-color-focus: #fff;
  --color-sf-content-text-color-selected: #fff;
  --color-sf-content-text-color-dragged: #fff;
  --color-sf-content-text-color-disabled: #6b7280;
  --color-sf-placeholder-text-color: #6b7280;
  --color-sf-flyout-text-color: #fff;
  --color-sf-flyout-text-color-hover: #fff;
  --color-sf-flyout-text-color-pressed: #fff;
  --color-sf-flyout-text-color-focus: #fff;
  --color-sf-flyout-text-color-selected: #fff;
  --color-sf-flyout-text-color-disabled: #6b7280;
  --color-sf-table-text-color-hover: #fff;
  --color-sf-table-text-color-pressed: #fff;
  --color-sf-table-text-color-selected: #fff;

  // icon-color
  --color-sf-icon-color: #d1d5db;
  --color-sf-icon-color-hover: #9ca3af;
  --color-sf-icon-color-pressed: #e5e7eb;
  --color-sf-icon-color-disabled: #4b5563;
  
  // close-icon-color
  --color-sf-close-icon-color: #9ca3af;
  --color-sf-close-icon-color-hover: #9ca3af;
  --color-sf-close-icon-color-pressed: #9ca3af;
  --color-sf-close-icon-color-disabled: #6b7280;

  // border-color
  --color-sf-border-light: #282f3c;
  --color-sf-border: #374151;
  --color-sf-border-dark: #9ca3af;
  --color-sf-border-hover: #4b5563;
  --color-sf-border-pressed: #6b7280;
  --color-sf-border-focus: #374151;
  --color-sf-border-selected: #4b5563;
  --color-sf-border-dragged: #374151;
  --color-sf-border-disabled: #374151;
  --color-sf-border-warning: #c2410c;
  --color-sf-border-error: #dc2626;
  --color-sf-border-success: #15803d;
  --color-sf-spreadsheet-gridline: #e5e7eb;
  --color-sf-flyout-border: #282f3c;
  --color-sf-dialog-border: rgba(255, 255, 255, .1);

  //sf Variables
  --color-sf-primary: rgba(99, 102, 241);
  --color-sf-primary-text-color: #000;
  --color-sf-primary-light: #3730a3;
  --color-sf-primary-lighter: #1e1b4b;
  --color-sf-primary-dark: #818cf8;
  --color-sf-primary-darker: #4f46e5;
  --color-sf-secondary: rgba(255, 255, 255, .01);
  --color-sf-success: #22c55e;
  --color-sf-info: #38bdf8;
  --color-sf-warning: #f97316;
  --color-sf-danger: #f87171;
  --color-sf-success-light: #164c37;
  --color-sf-info-light: #0e485b;
  --color-sf-warning-light: #573422;
  --color-sf-danger-light: #54252f;
  --color-sf-success-dark: #4ade80;
  --color-sf-info-dark: #38bdf8;
  --color-sf-warning-dark: #fb923c;
  --color-sf-danger-dark: #ef4444;
  --color-sf-success-lighter: #122a2c;
  --color-sf-info-lighter: #102838;
  --color-sf-warning-lighter: #282125;
  --color-sf-danger-lighter: #271d2a;
  --color-sf-black: 0, 0, 0;
  --color-sf-white: 255, 255, 255;

  // Primary-button
  --color-sf-primary-bg-color: #6366f1;
  --color-sf-primary-border-color: #6366f1;
  --color-sf-primary-text: #fff;
  --color-sf-primary-bg-color-hover: #818cf8;
  --color-sf-primary-border-color-hover: #818cf8;
  --color-sf-primary-text-hover: #ffffff;
  --color-sf-primary-bg-color-pressed: #4f46e5;
  --color-sf-primary-border-color-pressed: #4f46e5;
  --color-sf-primary-text-pressed: #fff;
  --color-sf-primary-bg-color-focus: #818cf8;
  --color-sf-primary-border-color-focus: #818cf8;
  --color-sf-primary-text-focus: #fff;
  --color-sf-primary-bg-color-disabled: #312e81;
  --color-sf-primary-border-color-disabled: #312e81;
  --color-sf-primary-text-disabled: rgba(255, 255, 255, .3);
  
  // Secondary-button
  --color-sf-secondary-bg-color: rgba(255, 255, 255, .1);
  --color-sf-secondary-border-color: rgba(255, 255, 255, .1);
  --color-sf-secondary-text-color: #fff;
  --color-sf-secondary-bg-color-hover: rgba(255, 255, 255, .2);
  --color-sf-secondary-border-color-hover: rgba(255, 255, 255, .2);
  --color-sf-secondary-text-color-hover: #fff;
  --color-sf-secondary-bg-color-pressed: rgba(255, 255, 255, .3);
  --color-sf-secondary-border-color-pressed: rgba(255, 255, 255, .3);
  --color-sf-secondary-text-color-pressed: #fff;
  --color-sf-secondary-bg-color-focus: rgba(255, 255, 255, .2);
  --color-sf-secondary-border-color-focus: rgba(255, 255, 255, .2);
  --color-sf-secondary-text-color-focus: #fff;
  --color-sf-secondary-bg-color-disabled: rgba(255, 255, 255, .2);
  --color-sf-secondary-border-color-disabled: rgba(255, 255, 255, .2);
  --color-sf-secondary-text-color-disabled: rgba(255, 255, 255, .3);
  
  // Success-button
  --color-sf-success-bg-color: #22c55e;
  --color-sf-success-border-color: #22c55e;
  --color-sf-success-text: #000;
  --color-sf-success-bg-color-hover: #4ade80;
  --color-sf-success-border-color-hover: #4ade80;
  --color-sf-success-text-hover: #000;
  --color-sf-success-bg-color-pressed: #16a34a;
  --color-sf-success-border-color-pressed: #16a34a;
  --color-sf-success-text-pressed: #000;
  --color-sf-success-bg-color-focus: #4ade80;
  --color-sf-success-border-color-focus: #4ade80;
  --color-sf-success-text-focus: #000;
  --color-sf-success-bg-color-disabled: #14532d;
  --color-sf-success-border-color-disabled: #14532d;
  --color-sf-success-text-disabled: rgba(0, 0, 0, .3);
  
  // Warning-button
  --color-sf-warning-bg-color: #f97316;
  --color-sf-warning-border-color: #f97316;
  --color-sf-warning-text: #000;
  --color-sf-warning-bg-color-hover: #fb923c;
  --color-sf-warning-border-color-hover: #fb923c;
  --color-sf-warning-text-hover: #000;
  --color-sf-warning-bg-color-pressed: #ea580c;
  --color-sf-warning-border-color-pressed: #ea580c;
  --color-sf-warning-text-pressed: #000;
  --color-sf-warning-bg-color-focus: #fb923c;
  --color-sf-warning-border-color-focus: #fb923c;
  --color-sf-warning-text-focus: #000;
  --color-sf-warning-bg-color-disabled: #7c2d12;
  --color-sf-warning-border-color-disabled: #7c2d12;
  --color-sf-warning-text-disabled: rgba(255, 255, 255, .3);

  // Info-button
  --color-sf-info-bg-color: #0ea5e9;
  --color-sf-info-border-color: #0ea5e9;
  --color-sf-info-text: #000;
  --color-sf-info-bg-color-hover: #38bdf8;
  --color-sf-info-border-color-hover: #38bdf8;
  --color-sf-info-text-hover: #000;
  --color-sf-info-bg-color-pressed: #0284c7;
  --color-sf-info-border-color-pressed: #0284c7;
  --color-sf-info-text-pressed: #000;
  --color-sf-info-bg-color-focus: #38bdf8;
  --color-sf-info-border-color-focus: #38bdf8;
  --color-sf-info-text-focus: #000;
  --color-sf-info-bg-color-disabled: #0c4a6e;
  --color-sf-info-border-color-disabled: #0c4a6e;
  --color-sf-info-text-disabled: rgba(255, 255, 255, .3);
  
  // danger-button
  --color-sf-danger-bg-color: #f87171;
  --color-sf-danger-border-color: #f87171;
  --color-sf-danger-text: #000;
  --color-sf-danger-bg-color-hover: #ef4444;
  --color-sf-danger-border-color-hover: #ef4444;
  --color-sf-danger-text-hover: #fff;
  --color-sf-danger-bg-color-pressed: #dc2626;
  --color-sf-danger-border-color-pressed: #dc2626;
  --color-sf-danger-text-pressed: #fff;
  --color-sf-danger-bg-color-focus: #ef4444;
  --color-sf-danger-border-color-focus: #ef4444;
  --color-sf-danger-text-focus: #fff;
  --color-sf-danger-bg-color-disabled: #7f1d1d;
  --color-sf-danger-border-color-disabled: #7f1d1d;
  --color-sf-danger-text-disabled: rgba(255, 255, 255, .3);

  //Outline button
  --color-sf-primary-outline: #6366f1;
  --color-sf-secondary-outline: rgba(255, 255, 255, .1);
  --color-sf-warning-outline: #f97316;
  --color-sf-danger-outline: #f87171;
  --color-sf-success-outline: #22c55e;
  --color-sf-info-outline: #38bdf8;

  // Tooltip
  --color-sf-tooltip-bg-color: #f9fafb;
  --color-sf-tooltip-border: #f9fafb;
  --color-sf-tooltip-text-color: #1f2937;

  //Light
  --color-sf-appbar-bg-color-alt1: #374151;
  --color-sf-appbar-color-alt1: #fff;
  --color-sf-appbar-border-color-alt1: #374151;
  --color-sf-appbar-hover-bg-color-alt1: #fff;

  //dark
  --color-sf-appbar-bg-color-alt2: #e5e7eb;
  --color-sf-appbar-color-alt2: #111827;
  --color-sf-appbar-border-color-alt2: #e5e7eb;
  --color-sf-appbar-hover-bg-color-alt2: #fff;

  //diagram Palette color
  --color-sf-diagram-palette-background: #e5e7eb;
  --color-sf-diagram-palette-hover-background: #d1d5db;
  --color-sf-diagram-palette-selected-color: #9ca3af;

  //rating
  --color-sf-rating-selected-color: #d1d5db;
  --color-sf-rating-unrated-color: #374151;
  --color-sf-rating-selected-disabled-color: #6b7280;
  --color-sf-rating-unrated-disabled-color: #374151;
  --color-sf-rating-selected-hover-color: #4f46e5;
  --color-sf-rating-unrated-hover-color: #9ca3af;
  --color-sf-rating-pressed-color: #69e1f3;

  //Message default
  --color-sf-msg-color: #9ca3af;
  --color-sf-msg-bg-color: #1f2937;
  --color-sf-msg-border-color: #374151;
  --color-sf-msg-color-alt1: #9ca3af;
  --color-sf-msg-bg-color-alt1: rgba(255, 255, 255, .01);
  --color-sf-msg-border-color-alt1: #374151;
  --color-sf-msg-color-alt2: #9ca3af;
  --color-sf-msg-bg-color-alt2: #1f2937;
  --color-sf-msg-border-color-alt2: #2c394c;
  --color-sf-msg-icon-color: #9ca3af;
  --color-sf-msg-icon-color-alt1: #9ca3af;
  --color-sf-msg-icon-color-alt2: #9ca3af;
  --color-sf-msg-close-icon-color: #9ca3af;
  --color-sf-msg-close-icon-color-alt1: #adb5bd;
  --color-sf-msg-close-icon-color-alt2: #9ca3af;

  //Message danger
  --color-sf-msg-danger-color: #f87171;
  --color-sf-msg-danger-bg-color: #271d2a;
  --color-sf-msg-danger-border-color: #4f2530;
  --color-sf-msg-danger-color-alt1: #f87171;
  --color-sf-msg-danger-bg-color-alt1: rgba(255, 255, 255, .01);
  --color-sf-msg-danger-border-color-alt1: #4f2530;
  --color-sf-msg-danger-color-alt2: #f87171;
  --color-sf-msg-danger-bg-color-alt2: #271d2a;
  --color-sf-msg-danger-border-color-alt2: #271d2a;
  --color-sf-msg-danger-icon-color: #f87171;
  --color-sf-msg-danger-icon-color-alt1: #f87171;
  --color-sf-msg-danger-icon-color-alt2: #f87171;
  --color-sf-msg-danger-close-icon-color: #f87171;
  --color-sf-msg-danger-close-icon-color-alt1: #adb5bd;
  --color-sf-msg-danger-close-icon-color-alt2: #adb5bd;

  //Message success
  --color-sf-msg-success-color: #22c55e;
  --color-sf-msg-success-bg-color: #122a2c;
  --color-sf-msg-success-border-color: #154936;
  --color-sf-msg-success-color-alt1: #22c55e;
  --color-sf-msg-success-bg-color-alt1: rgba(255, 255, 255, .01);
  --color-sf-msg-success-border-color-alt1: #154936;
  --color-sf-msg-success-color-alt2: #22c55e;
  --color-sf-msg-success-bg-color-alt2: #122a2c;
  --color-sf-msg-success-border-color-alt2: #122a2c;
  --color-sf-msg-success-icon-color: #22c55e;
  --color-sf-msg-success-icon-color-alt1: #22c55e;
  --color-sf-msg-success-icon-color-alt2: #22c55e;
  --color-sf-msg-success-close-icon-color: #22c55e;
  --color-sf-msg-success-close-icon-color-alt1: #adb5bd;
  --color-sf-msg-success-close-icon-color-alt2: #adb5bd;

  //Message warning
  --color-sf-msg-warning-color: #fb923c;
  --color-sf-msg-warning-bg-color: #282125;
  --color-sf-msg-warning-border-color: #523122;
  --color-sf-msg-warning-color-alt1: #fb923c;
  --color-sf-msg-warning-bg-color-alt1: rgba(255, 255, 255, .01);
  --color-sf-msg-warning-border-color-alt1: #523122;
  --color-sf-msg-warning-color-alt2: #fb923c;
  --color-sf-msg-warning-bg-color-alt2: #282125;
  --color-sf-msg-warning-border-color-alt2: #282125;
  --color-sf-msg-warning-icon-color: #fb923c;
  --color-sf-msg-warning-icon-color-alt1: #fb923c;
  --color-sf-msg-warning-icon-color-alt2: #fb923c;
  --color-sf-msg-warning-close-icon-color: #fb923c;
  --color-sf-msg-warning-close-icon-color-alt1: #adb5bd;
  --color-sf-msg-warning-close-icon-color-alt2: #adb5bd;

  //Message info
  --color-sf-msg-info-color: #22d3ee;
  --color-sf-msg-info-bg-color: #102838;
  --color-sf-msg-info-border-color: #0e4457;
  --color-sf-msg-info-color-alt1: #22d3ee;
  --color-sf-msg-info-bg-color-alt1: rgba(255, 255, 255, .01);
  --color-sf-msg-info-border-color-alt1: #0e4457;
  --color-sf-msg-info-color-alt2: #22d3ee;
  --color-sf-msg-info-bg-color-alt2: #102838;
  --color-sf-msg-info-border-color-alt2: #102838;
  --color-sf-msg-info-icon-color: #06b6d4;
  --color-sf-msg-info-icon-color-alt1: #22d3ee;
  --color-sf-msg-info-icon-color-alt2: #22d3ee;
  --color-sf-msg-info-close-icon-color: #22d3ee;
  --color-sf-msg-info-close-icon-color-alt1: #adb5bd;
  --color-sf-msg-info-close-icon-color-alt2: #adb5bd;

  //badge
  --color-sf-badge-light-bg-color: #faf9fa;
  --color-sf-badge-light-border-color: #faf9fa;
  --color-sf-badge-light-text-color: #000;
  --color-sf-badge-dark-bg-color: #212529;
  --color-sf-badge-dark-border-color: #212529;
  --color-sf-badge-dark-text-color: #fff;

  //tab
  --color-sf-tab-border: #343a40;

  //stepper
  --color-sf-stepper: rgba(17, 24, 39);
  --color-sf-shadow-color: #{#fff};
  --color-sf-shadow-color1: #{#000};

  //breadcrumb
  --color-sf-breadcrumb-item-hover-color: #e5e7eb;
  --color-sf-breadcrumb-item-active-color: #d1d5db;
  --color-sf-breadcrumb-item-focus-border-color: $transparent;

  // Transparent
  --color-sf-transparent: rgba(255, 255, 255, .01);
  
  //Primary-chip
  --color-sf-chip-primary-bg-color: rgba(99, 102, 241, .1);
  --color-sf-chip-primary-icon-color: rgba(99, 102, 241, .5);
  --color-sf-chip-primary-border-color: rgba(79, 70, 229, .5);
  --color-sf-chip-primary-text: #818cf8;
  --color-sf-chip-primary-icon-color-hover: #818cf8;
  --color-sf-chip-primary-icon-color-pressed: #818cf8;
  --color-sf-chip-primary-bg-color-hover: rgba(99, 102, 241, .1);
  --color-sf-chip-primary-border-color-hover: rgba(79, 70, 229, .7);
  --color-sf-chip-primary-text-hover: #818cf8;
  --color-sf-chip-primary-bg-color-pressed: rgba(99, 102, 241, .7);
  --color-sf-chip-primary-icon-bg-color-pressed: rgba(99, 102, 241, .7);
  --color-sf-chip-primary-icon-bg-color-hover: rgba(99, 102, 241, .7);
  --color-sf-chip-primary-border-color-pressed: rgba(99, 102, 241, .7);
  --color-sf-chip-primary-text-pressed: #c7d2fe;
  --color-sf-chip-primary-bg-color-disabled: rgba(99, 102, 241, .1);
  --color-sf-chip-primary-border-color-disabled: rgba(79, 70, 229, .5);
  --color-sf-chip-primary-text-disabled: #3730a3;

  //Secondary-chip
  --color-sf-chip-secondary-bg-color: #1f2937;
  --color-sf-chip-secondary-icon-color: #6b7280;
  --color-sf-chip-secondary-border-color: #374151;
  --color-sf-chip-secondary-text-color: #9ca3af;
  --color-sf-chip-secondary-icon-color-hover: #9ca3af;
  --color-sf-chip-secondary-icon-color-pressed: #9ca3af;
  --color-sf-chip-secondary-bg-color-hover: #1f2937;
  --color-sf-chip-secondary-border-color-hover: #4b5563;
  --color-sf-chip-secondary-text-color-hover: #9ca3af;
  --color-sf-chip-secondary-bg-color-pressed: #4b5563;
  --color-sf-chip-secondary-icon-bg-color-pressed: #4b5563;
  --color-sf-chip-secondary-icon-bg-color-hover: #4b5563;
  --color-sf-chip-secondary-border-color-pressed: #4b5563;
  --color-sf-chip-secondary-text-color-pressed: #d1d5db;
  --color-sf-chip-secondary-bg-color-disabled: #1f2937;
  --color-sf-chip-secondary-border-color-disabled: #374151;
  --color-sf-chip-secondary-text-color-disabled: #4b5563;
  
  //Success-chip
  --color-sf-chip-success-bg-color: rgba(34, 197, 94, .1);
  --color-sf-chip-success-icon-color: rgba(34, 197, 94, .5);
  --color-sf-chip-success-border-color: rgba(34, 197, 94, .2);
  --color-sf-chip-success-text: #22c55e;
  --color-sf-chip-success-icon-color-hover: #22c55e;
  --color-sf-chip-success-icon-color-pressed: #4ade80;
  --color-sf-chip-success-bg-color-hover: rgba(34, 197, 94, .1);
  --color-sf-chip-success-border-color-hover: rgba(34, 197, 94, .3);
  --color-sf-chip-success-text-hover: #22c55e;
  --color-sf-chip-success-bg-color-pressed: rgba(34, 197, 94, .3);
  --color-sf-chip-success-icon-bg-color-pressed: rgba(34, 197, 94, .3);
  --color-sf-chip-success-icon-bg-color-hover: rgba(34, 197, 94, .3);
  --color-sf-chip-success-border-color-pressed: rgba(34, 197, 94, .3);
  --color-sf-chip-success-text-pressed: #22c55e;
  --color-sf-chip-success-bg-color-disabled: rgba(34, 197, 94, .1);
  --color-sf-chip-success-border-color-disabled: rgba(34, 197, 94, .1);
  --color-sf-chip-success-text-disabled: #14532d;
  
  //Warning-chip
  --color-sf-chip-warning-bg-color: rgba(249, 115, 22, .1);
  --color-sf-chip-warning-icon-color: rgba(249, 115, 22, .5);
  --color-sf-chip-warning-border-color: rgba(249, 115, 22, .2);
  --color-sf-chip-warning-text: #fb923c;
  --color-sf-chip-warning-icon-color-hover: #fb923c;
  --color-sf-chip-warning-icon-color-pressed: #fb923c;
  --color-sf-chip-warning-bg-color-hover: rgba(249, 115, 22, .1);
  --color-sf-chip-warning-border-color-hover: rgba(249, 115, 22, .3);
  --color-sf-chip-warning-text-hover: #fb923c;
  --color-sf-chip-warning-bg-color-pressed: rgba(249, 115, 22, .3);
  --color-sf-chip-warning-icon-bg-color-pressed: rgba(249, 115, 22, .3);
  --color-sf-chip-warning-icon-bg-color-hover: rgba(249, 115, 22, .3);
  --color-sf-chip-warning-border-color-pressed: rgba(249, 115, 22, .3);
  --color-sf-chip-warning-text-pressed: #fed7aa;
  --color-sf-chip-warning-bg-color-disabled: rgba(249, 115, 22, .1);
  --color-sf-chip-warning-border-color-disabled: rgba(249, 115, 22, .1);
  --color-sf-chip-warning-text-disabled: #9a3412;
  
  //danger-chip
  --color-sf-chip-danger-bg-color: rgba(239, 68, 68, .1);
  --color-sf-chip-danger-icon-color: rgba(239, 68, 68, .5);
  --color-sf-chip-danger-border-color: rgba(239, 68, 68, .2);
  --color-sf-chip-danger-text: #f87171;
  --color-sf-chip-danger-icon-color-hover: #f87171;
  --color-sf-chip-danger-icon-color-pressed: #f87171;
  --color-sf-chip-danger-bg-color-hover: rgba(239, 68, 68, .1);
  --color-sf-chip-danger-border-color-hover: rgba(239, 68, 68, .3);
  --color-sf-chip-danger-text-hover: #f87171;
  --color-sf-chip-danger-bg-color-pressed: rgba(239, 68, 68, .3);
  --color-sf-chip-danger-icon-bg-color-pressed: rgba(239, 68, 68, .3);
  --color-sf-chip-danger-icon-bg-color-hover: rgba(239, 68, 68, .3);
  --color-sf-chip-danger-border-color-pressed: rgba(239, 68, 68, .3);
  --color-sf-chip-danger-text-pressed: #fca5a5;
  --color-sf-chip-danger-bg-color-disabled: rgba(239, 68, 68, .1);
  --color-sf-chip-danger-border-color-disabled: rgba(239, 68, 68, .2);
  --color-sf-chip-danger-text-disabled: #7f1d1d;
  
  //Info-chip
  --color-sf-chip-info-bg-color: rgba(6, 182, 212, .1);
  --color-sf-chip-info-icon-color: rgba(6, 182, 212, .5);
  --color-sf-chip-info-border-color: rgba(6, 182, 212, .2);
  --color-sf-chip-info-text: #22d3ee;
  --color-sf-chip-info-icon-color-hover: #22d3ee;
  --color-sf-chip-info-icon-color-pressed: #22d3ee;
  --color-sf-chip-info-bg-color-hover: rgba(6, 182, 212, .1);
  --color-sf-chip-info-border-color-hover: rgba(6, 182, 212, .3);
  --color-sf-chip-info-text-hover: #22d3ee;
  --color-sf-chip-info-bg-color-pressed: rgba(6, 182, 212, .3);
  --color-sf-chip-info-icon-bg-color-pressed: rgba(6, 182, 212, .3);
  --color-sf-chip-info-icon-bg-color-hover: rgba(6, 182, 212, .3);
  --color-sf-chip-info-border-color-pressed: rgba(6, 182, 212, .3);
  --color-sf-chip-info-text-pressed: #22d3ee;
  --color-sf-chip-info-bg-color-disabled: rgba(6, 182, 212, .1);
  --color-sf-chip-info-border-color-disabled: rgba(6, 182, 212, .2);
  --color-sf-chip-info-text-disabled: #155e75;
}