$material-button-height: getCustomVar(("$material-button-height")) !default;
$material-button-icon-size: getCustomVar(("$material-button-icon-size")) !default;
$material-button-icon-margin: getCustomVar(("$material-button-icon-margin")) !default;
$base-border-radius: getCustomVar(("$base-border-radius")) !default;

$size: null !default;

@use "colors" as *;

$material-size-postfix: null !default;
$material-base-font-size: null !default;
$material-base-inline-widget-height: null !default;
$material-base-inline-block-height: null !default;
$material-base-icon-size: null !default;
$material-base-icon-margin: 8px !default;
$material-base-inline-horizontal-padding: null !default;
$material-base-border-radius: null !default;
$material-base-dropdown-widgets-shadow: null !default;
$material-html-editor-add-image-dialog-base-padding: 5px !default;
$material-button-height: null !default;
$material-button-icon-size: null !default;
$material-button-icon-margin: null !default;

@if $size == "default" {
  $material-size-postfix: "" !default;

  // Font sizes
  $material-base-font-size: 14px !default;

  // Base sizes
  $material-base-inline-widget-height: 48px !default;
  $material-base-inline-block-height: 19px !default;
  $material-base-icon-size: 24px !default;
  $material-base-inline-horizontal-padding: 10px !default;
  $material-base-border-radius: 4px !default;
  $material-base-dropdown-widgets-shadow: 0 2px 7px $base-dropdown-shadow-color !default;
  $material-button-height: 36px !default;
  $material-button-icon-size: 18px !default;
  $material-button-icon-margin: 8px !default;
}

@if $size == "compact" {
  $material-size-postfix: ".compact" !default;

  // Font sizes
  $material-base-font-size: 13px !default;

  // Base sizes
  $material-base-inline-widget-height: 32px !default;
  $material-base-inline-block-height: 15px !default;
  $material-base-icon-size: 18px !default;
  $material-base-inline-horizontal-padding: 8px !default;
  $material-base-border-radius: 2px !default;
  $material-base-dropdown-widgets-shadow: 0 2px 4px $base-dropdown-shadow-color !default;
  $material-button-height: 28px !default;
  $material-button-icon-size: 16px !default;
  $material-button-icon-margin: 4px !default;
}

// Base bordered inline widgets sizes
$material-base-border-width: 1px !default;
$base-border-radius: $material-base-border-radius !default;

$material-base-standard-texteditor-input-horizontal-padding: 0 !default;

:root {
  --dx-component-height: #{$material-base-inline-widget-height};
  --dx-font-size: #{$material-base-font-size};
  --dx-border-width: #{$material-base-border-width};
  --dx-border-radius: #{$material-base-border-radius};
  --dx-font-size-icon: #{$material-base-icon-size};
}
$never-used: collector((
"$material-button-height": $material-button-height,
"$material-button-icon-size": $material-button-icon-size,
"$material-button-icon-margin": $material-button-icon-margin,
"$base-border-radius": $base-border-radius,
));
