@use "../sizes" as *;

// adduse

$material-xl-font-size: null !default;
$material-l-font-size: null !default;
$material-m-font-size: null !default;
$material-s-font-size: null !default;
$material-xs-font-size: null !default;
$material-h1-font-size: null !default;
$material-h2-font-size: null !default;
$material-h3-font-size: null !default;
$material-h4-font-size: null !default;
$material-h5-font-size: null !default;
$material-h6-font-size: null !default;

@if $size == "default" {
  $material-xl-font-size: 34px !default;
  $material-l-font-size: 28px !default;
  $material-m-font-size: 20px !default;
  $material-s-font-size: 18px !default;
  $material-xs-font-size: 12px !default;

  $material-h1-font-size: 96px !default;
  $material-h2-font-size: 60px !default;
  $material-h3-font-size: 48px !default;
  $material-h4-font-size: 34px !default;
  $material-h5-font-size: 24px !default;
  $material-h6-font-size: 20px !default;
}

@else if $size == "compact" {
  $material-xl-font-size: 24px !default;
  $material-l-font-size: 20px !default;
  $material-m-font-size: 16px !default;
  $material-s-font-size: 14px !default;
  $material-xs-font-size: 12px !default;

  $material-h1-font-size: 64px !default;
  $material-h2-font-size: 42px !default;
  $material-h3-font-size: 20px !default;
  $material-h4-font-size: 18px !default;
  $material-h5-font-size: 16px !default;
  $material-h6-font-size: 14px !default;
}

:root {
  --dx-font-size-heading-1: #{$material-h1-font-size};
  --dx-font-size-heading-2: #{$material-h2-font-size};
  --dx-font-size-heading-3: #{$material-h3-font-size};
  --dx-font-size-heading-4: #{$material-h4-font-size};
  --dx-font-size-heading-5: #{$material-h5-font-size};
  --dx-font-size-heading-6: #{$material-h6-font-size};
  --dx-font-size-xl: #{$material-xl-font-size};
  --dx-font-size-lg: #{$material-l-font-size};
  --dx-font-size-md: #{$material-m-font-size};
  --dx-font-size-sm: #{$material-s-font-size};
  --dx-font-size-xs: #{$material-xs-font-size};
}