$base-accent: getCustomVar(("$base-accent")) !default;
$base-font-family: getCustomVar(("$base-font-family")) !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-spin-icon-color: getCustomVar(("$base-spin-icon-color")) !default;
$base-bg: getCustomVar(("$base-bg")) !default;
$base-border-color: getCustomVar(("$base-border-color")) !default;
$base-success: getCustomVar(("$base-success")) !default;
$base-warning: getCustomVar(("$base-warning")) !default;
$base-danger: getCustomVar(("$base-danger")) !default;
$base-hover-color: getCustomVar(("$base-hover-color")) !default;
$base-hover-bg: getCustomVar(("$base-hover-bg")) !default;
$base-focus-color: getCustomVar(("$base-focus-color")) !default;
$base-focus-bg: getCustomVar(("$base-focus-bg")) !default;
$base-link-color: getCustomVar(("$base-link-color")) !default;

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

$material-color-accent-modificator: null !default;
$base-accent: null !default;
$material-color-theme-modificator: null !default;
$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;
$base-text-color: null !default;
$base-label-color: null !default;
$base-icon-color: null !default;
$base-spin-icon-color: null !default;
$base-bg: null !default;
$base-border-color: null !default;
$base-inverted-bg: null !default;
$base-element-bg: null !default;
$base-shadow-color: null !default;
$base-success: #8bc34a !default;
$base-warning: #ffc107 !default;
$base-danger: #f44336 !default;
$base-hover-color: null !default;
$base-hover-bg: null !default;
$base-inverted-text-color: null !default;
$base-focus-color: null !default;
$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;
}
$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};
}
$never-used: collector((
"$base-accent": $base-accent,
"$base-font-family": $base-font-family,
"$base-text-color": $base-text-color,
"$base-label-color": $base-label-color,
"$base-icon-color": $base-icon-color,
"$base-spin-icon-color": $base-spin-icon-color,
"$base-bg": $base-bg,
"$base-border-color": $base-border-color,
"$base-success": $base-success,
"$base-warning": $base-warning,
"$base-danger": $base-danger,
"$base-hover-color": $base-hover-color,
"$base-hover-bg": $base-hover-bg,
"$base-focus-color": $base-focus-color,
"$base-focus-bg": $base-focus-bg,
"$base-link-color": $base-link-color,
));