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

$black: #000 !default;
$white: #fff !default;

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

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

$transparent: transparent;

$gray220: #11100f !default;
$gray210: #161514 !default;
$gray200: #1b1a19 !default;
$gray190: #201f1e !default;
$gray180: #252423 !default;
$gray170: #292827 !default;
$gray160: #323130 !default;
$gray150: #3b3a39 !default;
$gray140: #484644 !default;
$gray130: #605e5c !default;
$gray120: #797775 !default;
$gray110: #8a8886 !default;
$gray100: #979593 !default;
$gray90: #a19f9d !default;
$gray80: #b3b0ad !default;
$gray70: #bebbb8 !default;
$gray60: #c8c6c4 !default;
$gray50: #d2d0ce !default;
$gray40: #e1dfdd !default;
$gray30: #edebe9 !default;
$gray20: #f3f2f1 !default;
$gray10: #faf9f8 !default;

$cyanblue10: #0078d4 !default;
$red10: #d13438 !default;
$orange20: #ca5010 !default;
$green20: #0b6a0b !default;
$cyan20: #038387 !default;
$yellow10: #fce100 !default;
$orangeyellow10: #c19c00 !default;

$theme-primary: $cyanblue10 !default;
$theme-lighter-alt: #eff6fc !default;
$theme-lighter: #deecf9 !default;
$theme-light: #c7e0f4 !default;
$theme-tertiary: #2b88d8 !default;
$theme-dark-alt: #106ebe !default;
$theme-dark: #005a9e !default;
$theme-darker: #004578 !default;

$primary: $theme-primary !default;
$primary-text-color: $white !default;
$primary-light: $theme-light !default;
$primary-lighter: $theme-lighter !default;
$primary-dark: $theme-dark !default;
$primary-darker: $theme-darker !default;
$success: $green20 !default;
$info: $cyan20 !default;
$warning: $orange20 !default;
$danger: $red10 !default;
$success-light: #dff6dd !default;
$info-light: #e5f4fd !default;
$warning-light: #fff4ce !default;
$danger-light: #fed9cc !default;
$success-dark: color.adjust($success, $lightness: -10%) !default;
$info-dark: color.adjust($info, $lightness: -25%) !default;
$warning-dark: color.adjust($warning, $lightness: -25%) !default;
$danger-dark: color.adjust($danger, $lightness: -10%) !default;
$success-light-alt: $success-light !default;
$info-light-alt: $info-light !default;
$warning-light-alt: $warning-light !default;
$danger-light-alt: $danger-light !default;

$content-bg-color: $white !default;
$content-bg-color-alt1: $gray10 !default;
$content-bg-color-alt2: $gray20 !default;
$content-bg-color-alt3: $gray30 !default;
$content-bg-color-alt4: $gray40 !default;
$content-bg-color-alt5: $gray50 !default;
$content-bg-color-alt6: $gray60 !default;
$content-bg-color-hover: $gray20 !default;
$content-bg-color-pressed: $gray40 !default;
$content-bg-color-focus: $gray30 !default;
$content-bg-color-selected: $gray30 !default;
$content-bg-color-dragged: rgba($gray20, .9) !default;
$content-bg-color-disabled: $white !default;
$flyout-bg-color: $white !default;
$flyout-bg-color-hover: $gray20 !default;
$flyout-bg-color-pressed: $gray30 !default;
$flyout-bg-color-selected: $gray30 !default;
$flyout-bg-color-focus: $gray30 !default;
$overlay-bg-color: rgba($black, .4) !default;
$table-bg-color-hover: $gray20 !default;
$table-bg-color-pressed: $gray40 !default;
$table-bg-color-selected: $gray30 !default;
$table-bg-color-selected-hover: $gray40 !default;

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

$content-text-color: $gray190 !default;
$content-text-color-alt1: $gray160 !default;
$content-text-color-alt2: $gray150 !default;
$content-text-color-alt3: $gray130 !default;
$content-text-color-hover: $gray190 !default;
$content-text-color-pressed: $gray190 !default;
$content-text-color-focus: $gray190 !default;
$content-text-color-selected: $gray190 !default;
$content-text-color-dragged: $gray190 !default;
$content-text-color-disabled: $gray90 !default;
$placeholder-text-color: $gray130 !default;
$flyout-text-color: $gray190 !default;
$flyout-text-color-hover: $gray190 !default;
$flyout-text-color-pressed: $gray190 !default;
$flyout-text-color-selected: $gray190 !default;
$flyout-text-color-focus: $gray190 !default;
$flyout-text-color-disabled: $gray90 !default;
$table-text-color-hover: $gray190 !default;
$table-text-color-pressed: $gray190 !default;
$table-text-color-selected: $gray190 !default;

$icon-color: $gray130 !default;
$icon-color-hover: $gray160 !default;
$icon-color-pressed: $gray190 !default;
$icon-color-disabled: $gray90 !default;

$border-light: $gray30 !default;
$border: $gray130 !default;
$border-alt: $gray160 !default;
$border-dark: $gray60 !default;
$border-hover: $gray40 !default;
$border-pressed: $gray50 !default;
$border-focus: $gray40 !default;
$border-selected: $gray50 !default;
$border-dragged: $gray30 !default;
$border-disabled: $gray30 !default;
$border-warning: $warning !default;
$border-error: #a4262c !default;
$border-success: #107c10 !default;
$spreadsheet-gridline: $gray30 !default;
$flyout-border: $gray30 !default;

$tooltip-bg-color: $white !default;
$tooltip-border: $tooltip-bg-color;
$toooltip-text-color: $gray160 !default;

$shadow: 0 .8px 16px rgba($black, .15) !default;
$shadow-sm: 0 1.6px 3.6px 0 rgba($black, .132), 0 .3px .9px 0 rgba($black, .108) !default;
$shadow-md: 0 3.2px 7.2px 0 rgba($black, .132), 0 .6px 1.8px 0 rgba($black, .108) !default;
$shadow-lg: 0 6.4px 14.4px 0 rgba($black, .132), 0 1.2px 3.6px 0 rgba($black, .108) !default;
$shadow-xl: 0 25.6px 57.6px 0 rgba($black, .22), 0 4.8px 14.4px 0 rgba($black, .18) !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: inset 1px 0 $primary, inset 0 1px $primary, inset -1px 0 $primary, inset 0 -1px $primary !default;
$shadow-focus-ring2: 0 0 0 1px rgba($gray130, .95) !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($gray160, 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;

$font-family: 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif !default;

$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: 28px !default;
$text-4xl: 32px !default;
$text-5xl: 42px !default;
$text-6xl: 68px !default;
$text-7xl: 78px !default;
$text-8xl: 96px !default;
$text-9xl: 128px !default;

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

$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-lighter: lighter !default;
$font-weight-light: 300 !default;
$font-weight-normal: 400 !default;
$font-weight-medium: 600 !default;
$font-weight-bold: 700 !default;
$font-weight-bolder: bolder !default;

$secondary-bg-color: $white !default;
$secondary-border-color: $gray110 !default;
$secondary-text-color: $gray160 !default;
$secondary-bg-color-hover: $gray20 !default;
$secondary-border-color-hover: $secondary-border-color !default;
$secondary-text-color-hover: $secondary-text-color !default;
$secondary-bg-color-pressed: $gray30 !default;
$secondary-border-color-pressed: $secondary-border-color !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: $gray20 !default;
$secondary-border-color-disabled: $gray20 !default;
$secondary-text-color-disabled: $gray90 !default;

$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, 10%) !default;
$primary-border-color-hover: $primary-bg-color-hover !default;
$primary-text-hover: $primary-text !default;
$primary-bg-color-pressed: shade-color($primary-bg-color, 20%) !default;
$primary-border-color-pressed: $primary-bg-color-pressed !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: $gray20 !default;
$primary-border-color-disabled: $gray20 !default;
$primary-text-disabled: $gray90 !default;

$success-bg-color: $success !default;
$success-border-color: $success !default;
$success-text: $white !default;
$success-bg-color-hover: shade-color($success-bg-color, 10%) !default;
$success-border-color-hover: $success-bg-color-hover !default;
$success-text-hover: $success-text !default;
$success-bg-color-pressed: shade-color($success-bg-color, 20%) !default;
$success-border-color-pressed: $success-bg-color-pressed !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: $gray20 !default;
$success-border-color-disabled: $gray20 !default;
$success-text-disabled: $gray90 !default;

$warning-bg-color: $warning !default;
$warning-border-color: $warning !default;
$warning-text: $white !default;
$warning-bg-color-hover: tint-color($warning-bg-color, 10%) !default;
$warning-border-color-hover: $warning-bg-color-hover !default;
$warning-text-hover: $warning-text !default;
$warning-bg-color-pressed: tint-color($warning-bg-color, 20%) !default;
$warning-border-color-pressed: $warning-bg-color-pressed !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: $gray20 !default;
$warning-border-color-disabled: $gray20 !default;
$warning-text-disabled: $gray90 !default;

$danger-bg-color: $danger !default;
$danger-border-color: $danger !default;
$danger-text: $white !default;
$danger-bg-color-hover: shade-color($danger-bg-color, 10%) !default;
$danger-border-color-hover: $danger-bg-color-hover !default;
$danger-text-hover: $danger-text !default;
$danger-bg-color-pressed: shade-color($danger-bg-color, 20%) !default;
$danger-border-color-pressed: $danger-bg-color-pressed !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: $gray20 !default;
$danger-border-color-disabled: $gray20 !default;
$danger-text-disabled: $gray90 !default;

$info-bg-color: $info !default;
$info-border-color: $info-bg-color !default;
$info-text: $white !default;
$info-bg-color-hover: shade-color($info-bg-color, 10%) !default;
$info-border-color-hover: $info-bg-color-hover !default;
$info-text-hover: $info-text !default;
$info-bg-color-pressed: tint-color($info-bg-color, 20%) !default;
$info-border-color-pressed: $info-bg-color-pressed !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: $gray20 !default;
$info-border-color-disabled: $gray20 !default;
$info-text-disabled: $gray90 !default;

$primary-outline: $primary-bg-color !default;
$secondary-outline: $secondary-text-color !default;
$warning-outline: $warning-bg-color !default;
$danger-outline: $danger-bg-color !default;
$success-outline: $success-bg-color !default;
$info-outline: $info-bg-color !default;

$toast-text-color: $gray190;
$toast-alt-text-color: $gray190;

$series-1: $gray30;
$series-2: $gray50;
$series-3: $gray60;
$series-4: $gray90;
$series-5: #614570;
$series-6: #4c6fb1;
$series-7: #cc6952;
$series-8: #3f579a;
$series-9: #4ea09b;
$series-10: #6e7a89;
$series-11: #3d75a6;
$series-12: #f3a93c;
$skin-name: 'FluentUI' !default;
$theme-name: 'FluentUI' !default;

$diagram-palette-background: $white !default;
$diagram-palette-hover-background: $content-bg-color-hover !default;

$gray-900: #212529 !default;

$inputs-radius: 2px !default;
$flyout-radius: $inputs-radius !default;
$model-radius: $inputs-radius !default;
$inputs-radius-bigger: $inputs-radius !default;
$flyout-radius-bigger: $inputs-radius !default;
$model-radius-bigger: $inputs-radius !default;
$inputs-radius-small: $inputs-radius !default;
$flyout-radius-small: $inputs-radius !default;
$model-radius-small: $inputs-radius !default;

$msg-color: $gray160 !default;
$msg-bg-color: $gray20 !default;
$msg-border-color: $gray20 !default;
$msg-color-alt1: $gray190 !default;
$msg-bg-color-alt1: $transparent !default;
$msg-border-color-alt1: $gray60 !default;
$msg-color-alt2: $white !default;
$msg-bg-color-alt2: $gray130 !default;
$msg-border-color-alt2: $gray130 !default;

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

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

$msg-success-color: $gray160 !default;
$msg-success-bg-color: $success-light !default;
$msg-success-border-color: $success-light !default;
$msg-success-color-alt1: color.adjust($green20, $lightness: -5%) !default;
$msg-success-bg-color-alt1: $transparent !default;
$msg-success-border-color-alt1: $border-success !default;
$msg-success-color-alt2: $white !default;
$msg-success-bg-color-alt2: $green20 !default;
$msg-success-border-color-alt2: $green20 !default;

$msg-success-icon-color: #107c10 !default;
$msg-success-icon-color-alt1: color.adjust($green20, $lightness: -5%) !default;
$msg-success-icon-color-alt2: $white !default;

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

$msg-danger-color: $gray160 !default;
$msg-danger-bg-color: color.adjust($red10, $lightness: 42%) !default;
$msg-danger-border-color: color.adjust($red10, $lightness: 42%) !default;
$msg-danger-color-alt1: color.adjust($red10, $lightness: -5%) !default;
$msg-danger-bg-color-alt1: $transparent !default;
$msg-danger-border-color-alt1: #a4262c !default;
$msg-danger-color-alt2: $white !default;
$msg-danger-bg-color-alt2: $red10 !default;
$msg-danger-border-color-alt2: $red10 !default;

$msg-danger-icon-color: #a80000 !default;
$msg-danger-icon-color-alt1: color.adjust($red10, $lightness: -5%) !default;
$msg-danger-icon-color-alt2: $white !default;

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

$msg-warning-color: $gray160 !default;
$msg-warning-bg-color: color.adjust($orangeyellow10, $lightness: 51%) !default;
$msg-warning-border-color: color.adjust($orangeyellow10, $lightness: 51%) !default;
$msg-warning-color-alt1: color.adjust($orangeyellow10, $lightness: -10%) !default;
$msg-warning-bg-color-alt1: $transparent !default;
$msg-warning-border-color-alt1: $orangeyellow10 !default;
$msg-warning-color-alt2: $white !default;
$msg-warning-bg-color-alt2: color.adjust($orangeyellow10, $lightness: -13%) !default;
$msg-warning-border-color-alt2: color.adjust($orangeyellow10, $lightness: -13%) !default;

$msg-warning-icon-color: $gray120 !default;
$msg-warning-icon-color-alt1: color.adjust($orangeyellow10, $lightness: -13%) !default;
$msg-warning-icon-color-alt2: $white !default;

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

$msg-info-color: $gray160 !default;
$msg-info-bg-color: $info-light !default;
$msg-info-border-color: $info-light !default;
$msg-info-color-alt1: color.adjust($cyan20, $lightness: -5%) !default;
$msg-info-bg-color-alt1: $transparent !default;
$msg-info-border-color-alt1: $cyan20 !default;
$msg-info-color-alt2: $white !default;
$msg-info-bg-color-alt2: $cyan20 !default;
$msg-info-border-color-alt2: $cyan20 !default;

$msg-info-icon-color: $content-text-color-alt3 !default;
$msg-info-icon-color-alt1: color.adjust($cyan20, $lightness: -5%) !default;
$msg-info-icon-color-alt2: $white !default;

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

$appbar-bg-color-alt1:$gray10 !default;
$appbar-color-alt1: $gray190 !default;
$appbar-border-color-alt1: $gray10 !default;
$appbar-hover-bg-color-alt1: rgba(transparent, .056) !default;

$appbar-bg-color-alt2: $gray150 !default;
$appbar-color-alt2: $white !default;
$appbar-border-color-alt2: $gray150 !default;
$appbar-hover-bg-color-alt2: rgba(255, 255, 255, .08) !default;

$appbar-bottom-shadow: 0 1.6px 3.6px rgba(0, 0, 0, .13), 0 .3px .9px rgba(0, 0, 0, .1) !default;
$appbar-top-shadow: 0 -1.6px 3.6px rgba(0, 0, 0, .13), 0 -.3px .9px rgba(0, 0, 0, .1) !default;

$rating-selected-color: $gray160 !default;
$rating-unrated-color: $gray130 !default;
$rating-selected-disabled-color: $gray60 !default;
$rating-unrated-disabled-color: $gray60 !default;
$rating-selected-hover-color: shade-color($primary, 10%) !default;
$rating-unrated-hover-color: shade-color($primary, 20%) !default;
$rating-pressed-color: shade-color($primary, 20%) !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;

$font-size: 12px !default;
$font-weight: 400 !default;
$error-font-color: $danger !default;
$warning-font-color: $orange20 !default;
$success-font-color: $green20 !default;
$information-font-color: $white !default;
$link-color: $primary;

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