$base-accent: getCustomVar(("$base-accent")) !default;
$base-font-family: getCustomVar(("$base-font-family")) !default;
$base-typography-bg: getCustomVar(("$base-typography-bg")) !default;
$base-bg: getCustomVar(("$base-bg")) !default;
$base-hover-bg: getCustomVar(("$base-hover-bg")) !default;
$base-active-bg: getCustomVar(("$base-active-bg")) !default;
$base-selected-bg: getCustomVar(("$base-selected-bg")) !default;
$base-border-color: getCustomVar(("$base-border-color")) !default;
$base-border-color-accessible: getCustomVar(("$base-border-color-accessible")) !default;
$base-success: getCustomVar(("$base-success")) !default;
$base-warning: getCustomVar(("$base-warning")) !default;
$base-danger: getCustomVar(("$base-danger")) !default;
$base-text-color: getCustomVar(("$base-text-color")) !default;
$base-label-color: getCustomVar(("$base-label-color")) !default;
$base-icon-color: getCustomVar(("$base-icon-color")) !default;
$base-hover-color: getCustomVar(("$base-hover-color")) !default;
$base-focus-color: getCustomVar(("$base-focus-color")) !default;
$base-focus-bg: getCustomVar(("$base-focus-bg")) !default;
$base-spin-icon-color: getCustomVar(("$base-spin-icon-color")) !default;
$base-link-color: getCustomVar(("$base-link-color")) !default;

@forward "./variables";
@use "./variables" as *;
@use "sass:color";

$color: null !default;
$mode: null !default;

$fluent-color-accent-modificator: null !default;
$base-accent: null !default;
$base-accent-hover: null !default;
$base-accent-active: null !default;
$base-accent-selected: null !default;

$fluent-color-theme-modificator: null !default;
$base-font-family: 'segoe ui', -apple-system, BlinkMacSystemFont, 'avenir next', avenir, 'helvetica neue', 'adwaita sans', cantarell, ubuntu, roboto, noto, helvetica, arial, sans-serif !default;
$base-typography-bg: null !default;
$base-bg: null !default;
$base-hover-bg: null !default;
$base-active-bg: null !default;
$base-selected-bg: null !default;
$base-border-color: null !default;
$base-border-color-hover: null !default;
$base-border-color-focused: null !default;
$base-border-color-accessible: null !default;
$base-border-color-accessible-hover: null !default;
$base-border-color-accessible-focused: null !default;

$base-separator-color: null !default;

$base-inverted-bg: null !default;
$base-shadow-color: null !default;

$base-foreground-disabled: null !default;
$base-background-disabled: null !default;
$base-success: null !default;
$base-warning: #fde300 !default;
$base-danger: null !default;
$base-danger-hover: null !default;
$base-danger-active: null !default;
$base-danger-selected: null !default;
$base-text-color: null !default;
$base-inverted-text-color: null !default;
$base-label-color: null !default;
$base-icon-color: null !default;

$base-disabled-opacity: 0.38 !default;
$base-border-color-disabled: null !default;

$scrollview-pulldown-path: null !default;


@if $color == "blue" {
  $fluent-color-accent-modificator: "blue" !default;
}

@if $color == "saas" {
  $fluent-color-accent-modificator: "saas" !default;
}

@if $mode == "light" {
  $fluent-color-theme-modificator: "light" !default;

  $base-bg: rgba(255, 255, 255, 1) !default;

  @if $color == "blue" {
    $base-hover-bg: darken($base-bg, 3.9) !default;
    $base-typography-bg: rgba(250, 250, 250, 1) !default;

    $base-accent: rgba(15, 108, 189, 1) !default;
    $base-success: rgba(16, 124, 16, 1) !default;
    $base-danger: rgba(209, 52, 56, 1) !default;
    $base-text-color: rgba(36, 36, 36, 1) !default;
    $base-label-color: lighten($base-text-color, 29.80) !default;
    $base-icon-color: lighten($base-text-color, 23.92) !default;
    $base-border-color: rgba(224, 224, 224, 1) !default;
    $base-border-color-accessible: darken($base-border-color, 49.8) !default;
    $base-shadow-color: #000 !default;
  }

  @if $color == "saas" {
    $base-accent: #5486ff !default;
    $base-typography-bg: #FAFBFF !default;

    $base-hover-bg: mix(#FFF, $base-accent, 85%) !default;

    $base-success: #19914B !default;
    $base-danger: #DC2828 !default;
    $base-text-color: #21293b !default;
    $base-label-color: lighten($base-text-color, 19) !default;
    $base-icon-color: lighten($base-text-color, 10) !default;
    $base-border-color: #e5e8f0 !default;
    $base-border-color-accessible: darken($base-border-color, 20) !default;
    $base-shadow-color: #3D4A6C !default;
  }

  $base-accent-hover: darken(desaturate($base-accent, 4.18), 4.71) !default;
  $base-accent-active: darken(desaturate(adjust-hue($base-accent, -1), 4.65), 9.61) !default;
  $base-accent-selected: darken(desaturate($base-accent-active, 2.02), 4.71) !default;

  $base-foreground-disabled: lighten($base-text-color, 60) !default;

  $base-selected-bg: darken($base-hover-bg, 3.92) !default;
  $base-active-bg: darken($base-hover-bg, 8.24) !default;
  $base-background-disabled: darken($base-hover-bg, 1.96) !default;

  $base-border-color-hover: darken($base-border-color, 9.8) !default;
  $base-border-color-focused: darken($base-border-color, 17.65) !default;

  $base-border-color-accessible-hover: darken($base-border-color-accessible, 3.92) !default;
  $base-border-color-accessible-focused: darken($base-border-color-accessible-hover, 3.92) !default;
  $base-border-color-disabled: $base-border-color !default;

  $base-separator-color: $base-border-color !default;

  $base-inverted-bg: darken($base-bg, 100%) !default;

  $base-inverted-text-color: #fff !default;

  $base-danger-hover: darken(desaturate($base-danger, 3.05), 5.10) !default;
  $base-danger-active: darken(desaturate($base-danger, 3.56), 35.69) !default;
  $base-danger-selected: darken(desaturate($base-danger, 2.78), 22.55) !default;

  $scrollview-pulldown-path: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAABkCAQAAABebbrxAAABD0lEQVRo3u2XvQ3CMBCFLbmjYYGsAA2wA1X2gAbEAEwB2eIKflagh6zACJAuUihASUic+M5GNH56dT7J8efTPUXKkDkzrS8LpQAEMBygcwAss2UGQADDBmLa+AMvzAAIYNhATBt/YMEMgACGDcS0wbQBEEAAAQQQwD8CEzaiL7sKqOnojTuQrh95SKkX7kqD5j+M6O6Mu1NkupQJZU64B426bjmmXIzLKe7TZiUGLmweyhTa28XWdJKpYn8pXIVub1U4T4+jUKkKbyWeWhR6Vqpwd+w+hb5U4S/ta54qkhZgVihxrxWaznZVZD2lqVDaVkVafOoKGVWRN6nZR6GMxr+qZjHl3aq4db0NLXld7wVjuu7NS9f7yAAAAABJRU5ErkJggg==") !default;
}

@if $mode == "dark" {
  $fluent-color-theme-modificator: "dark" !default;

  @if $color == "blue" {
    $base-bg: rgba(41, 41, 41, 1) !default;
    $base-accent: rgba(71, 158, 245, 1) !default;
    $base-success: #54B054 !default;
    $base-danger: rgba(227, 125, 128, 1) !default;
    $base-border-color: rgba(97, 97, 97, 1) !default;

    $base-typography-bg: #1F1F1F !default;
  }

  @if $color == "saas" {
    $base-bg: rgba(30, 40, 50, 1) !default;
    $base-accent: #5492F6 !default;
    $base-success: #10B230 !default;
    $base-danger: #F92F2F !default;
    $base-border-color: #414B5F !default;

    $base-typography-bg: #141E28 !default;
  }

  $base-accent-hover: lighten(desaturate($base-accent, 1.67), 5.29) !default;
  $base-accent-active: darken(desaturate(adjust-hue($base-accent, -1), 16.30), 10.59) !default;
  $base-accent-selected: darken(desaturate(adjust-hue($base-accent, -3), 9.05), 31.57) !default;

  $base-text-color: rgba(255, 255, 255, 1) !default;
  $base-label-color: darken($base-text-color, 40.00) !default;
  $base-icon-color: darken($base-text-color, 32.16) !default;
  $base-foreground-disabled: darken($base-text-color, 63.9) !default;

  $base-bg: rgba(41, 41, 41, 1) !default;
  $base-hover-bg: lighten($base-bg, 7.8) !default;
  $base-selected-bg: lighten($base-bg, 5.9) !default;
  $base-active-bg: darken($base-bg, 3.9) !default;
  $base-background-disabled: darken($base-bg, 8.2) !default;

  $base-border-color-hover: lighten($base-border-color, 7.84) !default;
  $base-border-color-focused: lighten($base-border-color, 3.92) !default;
  $base-border-color-accessible: lighten($base-border-color, 29.8) !default;
  $base-border-color-accessible-hover: lighten($base-border-color-accessible, 6.27) !default;
  $base-border-color-accessible-focused: lighten($base-border-color-accessible-hover, 3.92) !default;
  $base-border-color-disabled: darken($base-border-color, 12.16) !default;
  $base-separator-color: darken($base-border-color, 5.88) !default;

  $base-inverted-bg: lighten($base-bg, 100%) !default;
  $base-shadow-color: #000 !default;
  $base-inverted-text-color: #000 !default;

  $base-danger-hover: lighten(saturate($base-danger, 0.44), 7.45) !default;
  $base-danger-active: lighten(desaturate(adjust-hue($base-danger, 1.8), 0.9), 28.8) !default;
  $base-danger-selected: lighten(saturate(adjust-hue($base-danger, 0.7), 1.3), 14.9);

  $scrollview-pulldown-path: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAABkCAQAAABebbrxAAABD0lEQVRo3u2XvQ3CMBCFLbmjYYGsAA2wA1X2gAbEAEwB2eIKflagh6zACJAuUihASUic+M5GNH56dT7J8efTPUXKkDkzrS8LpQAEMBygcwAss2UGQADDBmLa+AMvzAAIYNhATBt/YMEMgACGDcS0wbQBEEAAAQQQwD8CEzaiL7sKqOnojTuQrh95SKkX7kqD5j+M6O6Mu1NkupQJZU64B426bjmmXIzLKe7TZiUGLmweyhTa28XWdJKpYn8pXIVub1U4T4+jUKkKbyWeWhR6Vqpwd+w+hb5U4S/ta54qkhZgVihxrxWaznZVZD2lqVDaVkVafOoKGVWRN6nZR6GMxr+qZjHl3aq4db0NLXld7wVjuu7NS9f7yAAAAABJRU5ErkJggg==") !default;
}
$base-hover-color: $base-text-color !default;
$base-focus-color: $base-inverted-text-color !default;
$base-focus-bg: $base-hover-bg !default;
$base-spin-icon-color: $base-icon-color !default;
$base-link-color: $base-accent !default;

$typography-color: $base-text-color !default;
$typography-link-color: $base-link-color !default;

$base-element-bg: $base-bg !default;

$base-invalid-color: $base-danger !default;
$base-invalid-color-hover: $base-danger-hover !default;
$base-invalid-color-active: $base-danger-active !default;
$base-invalid-color-selected: $base-danger-selected !default;


:root {
  --dx-component-color-bg: #{$base-bg};
  --dx-color-main-bg: #{$base-typography-bg};
  --dx-color-primary: #{$base-accent};
  --dx-color-danger: #{$base-danger};
  --dx-color-success: #{$base-success};
  --dx-color-warning: #{$base-warning};
  --dx-color-border: #{$base-border-color};
  --dx-color-text: #{$base-text-color};
  --dx-color-icon: #{$base-icon-color};
  --dx-color-spin-icon: #{$base-spin-icon-color};
  --dx-color-link: #{$base-link-color};
  --dx-color-shadow: #{$base-shadow-color};
  --dx-color-separator: #{$base-separator-color};
}
$never-used: collector((
"$base-accent": $base-accent,
"$base-font-family": $base-font-family,
"$base-typography-bg": $base-typography-bg,
"$base-bg": $base-bg,
"$base-hover-bg": $base-hover-bg,
"$base-active-bg": $base-active-bg,
"$base-selected-bg": $base-selected-bg,
"$base-border-color": $base-border-color,
"$base-border-color-accessible": $base-border-color-accessible,
"$base-success": $base-success,
"$base-warning": $base-warning,
"$base-danger": $base-danger,
"$base-text-color": $base-text-color,
"$base-label-color": $base-label-color,
"$base-icon-color": $base-icon-color,
"$base-hover-color": $base-hover-color,
"$base-focus-color": $base-focus-color,
"$base-focus-bg": $base-focus-bg,
"$base-spin-icon-color": $base-spin-icon-color,
"$base-link-color": $base-link-color,
));