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

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

$fluent-color-accent-modificator: null !default;

/**
  * $name 10. Accent color
  * $type color
  */
$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;

/**
* $name 10. Font family
* $type text
*/
$base-font-family: 'segoe ui', -apple-system, BlinkMacSystemFont, 'avenir next', avenir, 'helvetica neue', 'adwaita sans', cantarell, ubuntu, roboto, noto, helvetica, arial, sans-serif !default;

/**
* $name 30. Page background color
* $type color
*/
$base-typography-bg: null !default;

/**
* $name 31. Component background color
* $type color
*/
$base-bg: null !default;

/**
* $name 90. Hover state background color
* $type color
*/
$base-hover-bg: null !default;

/**
* $name 120. Active state background color
* $type color
*/
$base-active-bg: null !default;

/**
* $name 130. Selected state background color
* $type color
*/
$base-selected-bg: null !default;

/**
* $name 40. Border color
* $type color
*/
$base-border-color: null !default;
$base-border-color-hover: null !default;
$base-border-color-focused: null !default;

/**
* $name 41. Border color accessible
* $type color
*/
$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;

/**
* $name 50. Success color
* $type color
*/
$base-success: null !default;

/**
* $name 60. Warning color
* $type color
*/
$base-warning: #fde300 !default;

/**
* $name 70. Danger color
* $type color
*/
$base-danger: null !default;
$base-danger-hover: null !default;
$base-danger-active: null !default;
$base-danger-selected: null !default;

/**
* $name 20. Text color
* $type color
*/
$base-text-color: null !default;
$base-inverted-text-color: null !default;

/**
* $name 20. Label color
* $type color
*/
$base-label-color: null !default;

/**
* $name 40. Icon color
* $type color
*/
$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;
}

/**
* $name 80. Hover state text color
* $type color
*/
$base-hover-color: $base-text-color !default;

/**
* $name 100. Focused state text color
* $type color
*/
$base-focus-color: $base-inverted-text-color !default;

/**
* $name 110. Focused state background color
* $type color
*/
$base-focus-bg: $base-hover-bg !default;

/**
* $name 50. Arrow icon color
* $type color
*/
$base-spin-icon-color: $base-icon-color !default;

/**
* $name 30. Link color
* $type color
*/
$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};
}