$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;

/**
* $name 11. Button height
* $type text
*/
$material-button-height: null !default;

/**
* $name 12. Icon size
* $type text
*/
$material-button-icon-size: null !default;

/**
* $name 13. Icon margin
* $type text
*/
$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;


/**
* $name 120. Border radius
* $type text
*/
$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};
}