@use "../sizes" as *;

// adduse

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

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

  $fluent-h1-font-size: 40px !default;
  $fluent-h2-font-size: 36px !default;
  $fluent-h3-font-size: 32px !default;
  $fluent-h4-font-size: 26px !default;
  $fluent-h5-font-size: 22px !default;
  $fluent-h6-font-size: 22px !default;
}

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

  $fluent-h1-font-size: 32px !default;
  $fluent-h2-font-size: 28px !default;
  $fluent-h3-font-size: 24px !default;
  $fluent-h4-font-size: 20px !default;
  $fluent-h5-font-size: 16px !default;
  $fluent-h6-font-size: 16px !default;
}

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