@forward "./variables";
@use "./variables" as *;
@use "sass:color";
$color: null !default;
$mode: null !default;

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

/**
  * $name 10. Accent color
  * $type color
  */
$base-accent: null !default;
$material-color-theme-modificator: null !default;

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

/**
* $name 20. Text color
* $type color
*/
$base-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;

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

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

/**
* $name 40. Border color
* $type color
*/
$base-border-color: null !default;
$base-inverted-bg: null !default;
$base-element-bg: null !default;
$base-shadow-color: null !default;

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

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

/**
* $name 70. Danger color
* $type color
*/
$base-danger: #f44336 !default;

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

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

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

/**
* $name 110. Focused state background color
* $type color
*/
$base-focus-bg: null !default;
$base-inverted-icon-color: null !default;
$base-disabled-opacity: 0.38 !default;
$base-disabled-color: null !default;
$base-dropdown-shadow-color: null !default;
$base-invalid-color: $base-danger !default;
$base-invalid-faded-border-color: color.change($base-invalid-color, $alpha: 0.4) !default;
$scrollview-pulldown-path: null !default;


@if $color == "blue" {
  $material-color-accent-modificator: "blue" !default;
  $base-accent: #03a9f4 !default;
}

@if $color == "lime" {
  $material-color-accent-modificator: "lime" !default;
  $base-accent: #cddc39 !default;
}

@if $color == "orange" {
  $material-color-accent-modificator: "orange" !default;
  $base-accent: #ff5722 !default;
  $base-danger: #e91e63 !default;
}

@if $color == "purple" {
  $material-color-accent-modificator: "purple" !default;
  $base-accent: #9c27b0 !default;
}

@if $color == "teal" {
  $material-color-accent-modificator: "teal" !default;
  $base-accent: #009688 !default;
}

/**
* $name 30. Link color
* $type color
*/
$base-link-color: $base-accent !default;

@if $mode == "light" {
  $material-color-theme-modificator: "light" !default;
  $base-text-color: rgba(0, 0, 0, 0.87) !default;
  $base-label-color: rgba(0, 0, 0, 0.6) !default;
  $base-disabled-color: rgba(0, 0, 0, $base-disabled-opacity) !default;
  $base-icon-color: color.change($base-text-color, $alpha: 0.54) !default;
  $base-spin-icon-color: color.change($base-text-color, $alpha: 0.54) !default;
  $base-bg: #fff !default;
  $base-border-color: #e0e0e0 !default;
  $base-inverted-bg: darken($base-bg, 100%) !default;
  $base-element-bg: $base-bg !default;
  $base-shadow-color: $base-inverted-bg !default;
  $base-hover-color: $base-text-color !default;
  $base-hover-bg: color.change(#000, $alpha: 0.04) !default;
  $base-inverted-text-color: #fff !default;
  $base-focus-color: $base-inverted-text-color !default;
  $base-focus-bg: color.change(#000, $alpha: 0.04) !default;
  $base-inverted-icon-color: $base-inverted-text-color !default;
  $base-dropdown-shadow-color: color.change($base-shadow-color, $alpha: 0.2) !default;

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

@if $mode == "dark" {
  $material-color-theme-modificator: "dark" !default;
  $base-text-color: #fff !default;
  $base-label-color: rgba(255, 255, 255, 0.6) !default;
  $base-disabled-color: rgba(255, 255, 255, $base-disabled-opacity) !default;
  $base-icon-color: color.change($base-text-color, $alpha: 0.54) !default;
  $base-spin-icon-color: color.change($base-text-color, $alpha: 0.54) !default;
  $base-bg: #363640 !default;
  $base-border-color: #515159 !default;
  $base-inverted-bg: lighten($base-bg, 100%) !default;
  $base-element-bg: $base-bg !default;
  $base-shadow-color: #000 !default;
  $base-hover-color: $base-text-color !default;
  $base-hover-bg: color.change(#fff, $alpha: 0.05) !default;
  $base-inverted-text-color: rgba(0, 0, 0, 0.87) !default;
  $base-focus-color: $base-inverted-text-color !default;
  $base-focus-bg: color.change(#fff, $alpha: 0.05) !default;
  $base-inverted-icon-color: $base-inverted-text-color !default;
  $base-dropdown-shadow-color: color.change($base-shadow-color, $alpha: 0.4) !default;

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

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

:root {
  --dx-component-color-bg: #{$base-bg};
  --dx-color-main-bg: #{$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-border-color};
}