// color system

// black
$black:    #000 !default;

// White
$white:    #fff !default;

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

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

// Transparent
$transparent: transparent;

// scss-docs-start gray-color-variables
$gray-100: #f8f9fa !default;
$gray-200: #e9ecef !default;
$gray-300: #dee2e6 !default;
$gray-400: #ced4da !default;
$gray-500: #adb5bd !default;
$gray-600: #6c757d !default;
$gray-700: #495057 !default;
$gray-800: #343a40 !default;
$gray-900: #212529 !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:       $blue !default;
$secondary:     $gray-600 !default;
$success:       lighten($green, 10%) !default;
$info:          $cyan !default;
$warning:       $yellow !default;
$danger:        lighten($red, 10%) !default;
$success-light:       tint-color($success, 80%) !default;
$info-light:          tint-color($info, 80%) !default;
$warning-light:       tint-color($warning, 80%) !default;
$danger-light:        tint-color($danger, 80%) !default;
$primary-text-color: $white !default;
$primary-light:       tint-color($primary, 50%) !default;
$primary-lighter:     shade-color($primary, 80%) !default;
$success-dark:       darken($success, 10%) !default;
$info-dark:          darken($info, 25%) !default;
$warning-dark:       darken($warning, 25%) !default;
$danger-dark:        darken($danger, 10%) !default;
$success-light-alt:       darken($green, 20%) !default;
$info-light-alt:          darken($cyan, 25%) !default;
$warning-light-alt:       darken($yellow, 20%) !default;
$danger-light-alt:        darken($red, 25%) !default;

// backgroundcolor
$content-bg-color: $gray-900 !default;
$content-bg-color-alt1: lighten($gray-900, 3%) !default;
$content-bg-color-alt2: $gray-800 !default;
$content-bg-color-alt3: $gray-700 !default;
$content-bg-color-alt4: $gray-600 !default;
$content-bg-color-alt5: $gray-500 !default;
$content-bg-color-hover: lighten($content-bg-color, 7%) !default;
$content-bg-color-pressed: $gray-700 !default;
$content-bg-color-focus: $content-bg-color-hover !default;
$content-bg-color-selected: $primary !default;
$content-bg-color-dragged: $gray-800 !default;
$content-bg-color-disabled: $content-bg-color !default;
$flyout-bg-color: $gray-800 !default;
$flyout-bg-color-hover: lighten($flyout-bg-color, 7%) !default;
$flyout-bg-color-pressed: $primary !default;
$flyout-bg-color-focus: $flyout-bg-color-hover !default;
$flyout-border: $gray-700 !default;
$overlay-bg-color: rgba($black, .4) !default;
$table-bg-color-hover: lighten($content-bg-color, 7%) !default;
$table-bg-color-pressed: $gray-700 !default;
$table-bg-color-selected: lighten($content-bg-color, 12%) !default;

//All theme commoon 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;
$spreadsheet-selection-2: #9c27b0;
$spreadsheet-selection-3: #029688;
$spreadsheet-selection-4: #4caf51;
$spreadsheet-selection-5: #fe9800;
$spreadsheet-selection-6: #3f52b5;

// text-color
$content-text-color: $white !default;
$content-text-color-alt1: $gray-200 !default;
$content-text-color-alt2: $gray-400 !default;
$content-text-color-alt3: lighten($gray-600, 6%) !default;
$content-text-color-hover: $white !default;
$content-text-color-pressed: $white !default;
$content-text-color-focus: $white !default;
$content-text-color-selected: $primary-text-color !default;
$content-text-color-dragged: $white !default;
$content-text-color-disabled: $gray-600 !default;
$placeholder-text-color: $gray-600 !default;
$flyout-text-color: $white !default;
$flyout-text-color-hover: $white !default;
$flyout-text-color-pressed: $primary-text-color !default;
$flyout-text-color-focus: $white !default;
$table-text-color-hover: $white !default;
$table-text-color-pressed: $white !default;
$table-text-color-selected: $white !default;

// icon-color
$icon-color: $gray-500 !default;
$icon-color-hover: $gray-300 !default;
$icon-color-pressed: $gray-100 !default;
$icon-color-disabled: $gray-500 !default;

// border-color
$border-light: lighten($gray-800, 7%) !default;
$border: $gray-600 !default;
$border-dark: $gray-500 !default;
$border-hover: $gray-700 !default;
$border-pressed: $gray-600 !default;
$border-focus: $gray-700 !default;
$border-selected: $gray-600 !default;
$border-dragged: $gray-600 !default;
$border-disabled: $border-light !default;
$border-warning: lighten($yellow, 10%) !default;
$border-error: lighten($red, 10%) !default;
$border-success: lighten($green, 10%) !default;
$spreadsheet-gridline: $gray-300 !default;

// Tooltip
$tooltip-bg-color: $gray-200 !default;
$tooltip-border: $gray-200;
$toooltip-text-color: $gray-900 !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, .25) !default;
$shadow-focus-ring2: 0 0 0 4px rgba($primary, .25) !default;
$primary-shadow-focus: 0 0 0 4px rgba(tint-color($primary, 15%), .5) !default;
$secondary-shadow-focus: 0 0 0 4px rgba(tint-color($secondary, 15%), .5) !default;
$success-shadow-focus: 0 0 0 4px rgba(tint-color($success, 15%), .5) !default;
$danger-shadow-focus: 0 0 0 4px rgba(tint-color($danger, 15%), .5) !default;
$info-shadow-focus: 0 0 0 4px rgba(tint-color($info, 15%), .5) !default;
$warning-shadow-focus: 0 0 0 4px rgba(tint-color($warning, 15%), .5) !default;

// fontfamily
$font-family: 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' !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;

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

// Display

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

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

// Secondary-button

$secondary-bg-color: $secondary !default;
$secondary-border-color: $secondary-bg-color !default;
$secondary-text-color: $white !default;
$secondary-bg-color-hover: shade-color($secondary-bg-color, 15%) !default;
$secondary-border-color-hover: shade-color($secondary-bg-color, 20%) !default;
$secondary-text-color-hover: $secondary-text-color !default;
$secondary-bg-color-pressed: shade-color($secondary-bg-color, 20%) !default;
$secondary-border-color-pressed: shade-color($secondary-bg-color, 25%) !default;
$secondary-text-color-pressed: $secondary-text-color !default;
$secondary-bg-color-focus: $secondary-bg-color-hover !default;
$secondary-border-color-focus: $secondary-border-color-hover !default;
$secondary-text-color-focus: $secondary-text-color-hover !default;
$secondary-bg-color-disabled: rgba($secondary-bg-color, .65) !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: $primary !default;
$primary-border-color: $primary !default;
$primary-text: $primary-text-color !default;
$primary-bg-color-hover: shade-color($primary-bg-color, 15%) !default;
$primary-border-color-hover: shade-color($primary-bg-color, 20%) !default;
$primary-text-hover: $primary-text !default;
$primary-bg-color-pressed: shade-color($primary-bg-color, 20%) !default;
$primary-border-color-pressed: shade-color($primary-bg-color, 25%) !default;
$primary-text-pressed: $primary-text-color !default;
$primary-bg-color-focus: $primary-bg-color-hover !default;
$primary-border-color-focus: $primary-border-color-hover !default;
$primary-text-focus: $primary-text !default;
$primary-bg-color-disabled: rgba($primary-bg-color, .65) !default;
$primary-border-color-disabled: $primary-bg-color-disabled !default;
$primary-text-disabled: rgba($primary-text, .65) !default;

// Success-button

$success-bg-color: $green !default;
$success-border-color: $green !default;
$success-text: $white !default;
$success-bg-color-hover: shade-color($success-bg-color, 15%) !default;
$success-border-color-hover: shade-color($success-bg-color, 20%) !default;
$success-text-hover: $success-text !default;
$success-bg-color-pressed: shade-color($success-bg-color, 20%) !default;
$success-border-color-pressed: shade-color($success-bg-color, 25%) !default;
$success-text-pressed: $success-text !default;
$success-bg-color-focus: $success-bg-color-hover !default;
$success-border-color-focus: $success-border-color-hover !default;
$success-text-focus: $success-text !default;
$success-bg-color-disabled: rgba($success-bg-color, .65) !default;
$success-border-color-disabled: $success-bg-color-disabled !default;
$success-text-disabled: rgba($success-text, .65) !default;

// Warning-button
$warning-bg-color: $yellow !default;
$warning-border-color: $yellow !default;
$warning-text: $black !default;
$warning-bg-color-hover: tint-color($warning-bg-color, 15%) !default;
$warning-border-color-hover: tint-color($warning-bg-color, 10%) !default;
$warning-text-hover: $warning-text !default;
$warning-bg-color-pressed: tint-color($warning-bg-color, 20%) !default;
$warning-border-color-pressed: tint-color($warning-bg-color, 10%) !default;
$warning-text-pressed: $warning-text !default;
$warning-bg-color-focus: $warning-bg-color-hover !default;
$warning-border-color-focus: $warning-border-color-hover !default;
$warning-text-focus: $warning-text !default;
$warning-bg-color-disabled: rgba($warning-bg-color, .65) !default;
$warning-border-color-disabled: $warning-bg-color-disabled !default;
$warning-text-disabled: rgba($warning-text, .65) !default;

// danger-button
$danger-bg-color: $red !default;
$danger-border-color: $red !default;
$danger-text: $white !default;
$danger-bg-color-hover: shade-color($danger-bg-color, 15%) !default;
$danger-border-color-hover: shade-color($danger-bg-color, 20%) !default;
$danger-text-hover: $danger-text !default;
$danger-bg-color-pressed: shade-color($danger-bg-color, 20%) !default;
$danger-border-color-pressed: shade-color($danger-bg-color, 25%) !default;
$danger-text-pressed: $danger-text !default;
$danger-bg-color-focus: $danger-bg-color-hover !default;
$danger-border-color-focus: $danger-border-color-hover !default;
$danger-text-focus: $danger-text !default;
$danger-bg-color-disabled: rgba($danger-bg-color, .65) !default;
$danger-border-color-disabled: $danger-bg-color-disabled !default;
$danger-text-disabled: rgba($danger-text, .65) !default;

// Info-button
$info-bg-color: $cyan !default;
$info-border-color: $cyan !default;
$info-text: $black !default;
$info-bg-color-hover: tint-color($info-bg-color, 15%) !default;
$info-border-color-hover: tint-color($info-bg-color, 10%) !default;
$info-text-hover: $info-text !default;
$info-bg-color-pressed: tint-color($info-bg-color, 20%) !default;
$info-border-color-pressed: tint-color($info-bg-color, 10%) !default;
$info-text-pressed: $info-text !default;
$info-bg-color-focus: $info-bg-color-hover !default;
$info-border-color-focus: $info-border-color-hover !default;
$info-text-focus: $info-text-hover !default;
$info-bg-color-disabled: rgba($info-bg-color, .65) !default;
$info-border-color-disabled: $info-bg-color-disabled !default;
$info-text-disabled: rgba($info-text, .65) !default;

//Outline button
$primary-outline: lighten($primary, 10%) !default;
$secondary-outline: lighten($secondary, 10%) !default;
$warning-outline: lighten($warning, 10%) !default;
$danger-outline: lighten($danger, 10%) !default;
$success-outline: lighten($success, 10%) !default;
$info-outline: lighten($info, 10%) !default;

// Chart series
$series-1: $gray-800;
$series-2: $gray-700;
$series-3: $gray-600;
$series-4: $gray-500;
$series-5: #5ecb9b;
$series-6: #a860f1;
$series-7: #557ef7;
$series-8: #eba844;
$series-9: #e9599b;
$series-10: #3bc6cf;
$series-11: #74b706;
$series-12: #ea6266;
$skin-name: 'bootstrap5' !default;
$theme-name: 'bootstrap5-dark' !default;

//Diagram Palette color
$diagram-palette-background: $gray-300 !default;
$diagram-palette-hover-background: $gray-400 !default;

//Message component

//Message Default
$msg-color: $white !default;
$msg-bg-color: #3b4248 !default;
$msg-border-color: lighten($gray-800, 7%) !default;
$msg-color-alt1: $white !default;
$msg-bg-color-alt1: $transparent !default;
$msg-border-color-alt1: #9ca3af !default;
$msg-color-alt2: $white !default;
$msg-bg-color-alt2: lighten($gray-800, 7%) !default;
$msg-border-color-alt2: $msg-bg-color-alt2 !default;

$msg-icon-color: $white !default;
$msg-icon-color-alt1: $white !default;
$msg-icon-color-alt2: $white !default;

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

//Message Danger
$msg-danger-color: lighten($red, 40%) !default;
$msg-danger-bg-color: darken($red, 30%) !default;
$msg-danger-border-color: darken($red, 30%) !default;
$msg-danger-color-alt1: lighten($red, 10%) !default;
$msg-danger-bg-color-alt1: $transparent !default;
$msg-danger-border-color-alt1: lighten($red, 10%) !default;
$msg-danger-color-alt2: $gray-900 !default;
$msg-danger-bg-color-alt2: lighten($red, 10%) !default;
$msg-danger-border-color-alt2: lighten($red, 10%) !default;

$msg-danger-icon-color: lighten($red, 40%) !default;
$msg-danger-icon-color-alt1: lighten($red, 10%) !default;
$msg-danger-icon-color-alt2: $gray-900 !default;

$msg-danger-close-icon-color: $icon-color !default;
$msg-danger-close-icon-color-alt1: $icon-color !default;
$msg-danger-close-icon-color-alt2: $gray-900 !default;

//Message success
$msg-success-color: #2ed889 !default;
$msg-success-bg-color: darken($green, 20%) !default;
$msg-success-border-color: darken($green, 18%) !default;
$msg-success-color-alt1: lighten($green, 10%) !default;
$msg-success-bg-color-alt1: $transparent !default;
$msg-success-border-color-alt1: lighten($green, 10%) !default;
$msg-success-color-alt2: $gray-900 !default;
$msg-success-bg-color-alt2: lighten($green, 10%) !default;
$msg-success-border-color-alt2: lighten($green, 10%) !default;

$msg-success-icon-color: #2ed889 !default;
$msg-success-icon-color-alt1: lighten($green, 10%) !default;
$msg-success-icon-color-alt2: $gray-900 !default;

$msg-success-close-icon-color: $icon-color !default;
$msg-success-close-icon-color-alt1: $icon-color !default;
$msg-success-close-icon-color-alt2: $gray-900 !default;

//Message warning
$msg-warning-color: lighten($yellow, 35%) !default;
$msg-warning-bg-color: darken($yellow, 25%) !default;
$msg-warning-border-color: darken($yellow, 22%) !default;
$msg-warning-color-alt1: $yellow !default;
$msg-warning-bg-color-alt1: $transparent !default;
$msg-warning-border-color-alt1: $yellow !default;
$msg-warning-color-alt2: $gray-900 !default;
$msg-warning-bg-color-alt2: $yellow !default;
$msg-warning-border-color-alt2: $yellow !default;

$msg-warning-icon-color: $yellow !default;
$msg-warning-icon-color-alt1: $yellow !default;
$msg-warning-icon-color-alt2: $gray-900 !default;

$msg-warning-close-icon-color: $icon-color !default;
$msg-warning-close-icon-color-alt1: $icon-color !default;
$msg-warning-close-icon-color-alt2: $gray-900 !default;

//Message Info
$msg-info-color: lighten($cyan, 25%) !default;
$msg-info-bg-color: darken($cyan, 30%) !default;
$msg-info-border-color: darken($cyan, 27%) !default;
$msg-info-color-alt1: $cyan !default;
$msg-info-bg-color-alt1: $transparent !default;
$msg-info-border-color-alt1: $cyan !default;
$msg-info-color-alt2: $gray-900 !default;
$msg-info-bg-color-alt2: $cyan !default;
$msg-info-border-color-alt2: $cyan !default;

$msg-info-icon-color: $cyan !default;
$msg-info-icon-color-alt1: $cyan !default;
$msg-info-icon-color-alt2: $gray-900 !default;

$msg-info-close-icon-color: $icon-color !default;
$msg-info-close-icon-color-alt1: $icon-color !default;
$msg-info-close-icon-color-alt2: $gray-900 !default;

//App bar
//Light
$appbar-bg-color-alt1: $gray-800 !default;
$appbar-color-alt1: $white !default;
$appbar-border-color-alt1: $gray-800 !default;
$appbar-hover-bg-color-alt1: rgba(255, 255, 255, .08) !default;

//Dark
$appbar-bg-color-alt2: $gray-300 !default;
$appbar-color-alt2: $gray-900 !default;
$appbar-border-color-alt2: $gray-300 !default;
$appbar-hover-bg-color-alt2: rgba(transparent, .056) !default;

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

//rating
$rating-selected-color: $primary !default;
$rating-unrated-color: $gray-500 !default;
$rating-selected-disabled-color: $gray-600 !default;
$rating-unrated-disabled-color: $gray-700 !default;
$rating-selected-hover-color: $gray-500 !default;
$rating-unrated-hover-color: $primary !default;
$rating-pressed-color: lighten($primary, 15%) !default;
