@use "../sizes" as *;

// adduse

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

@if $size == "default" {
  $generic-xl-font-size: 34px !default;
  $generic-l-font-size: 28px !default;
  $generic-m-font-size: 20px !default;
  $generic-s-font-size: 18px !default;
  $generic-xs-font-size: 12px !default;
  $generic-h1-font-size: 34px !default;
  $generic-h2-font-size: 28px !default;
  $generic-h3-font-size: 22px !default;
  $generic-h4-font-size: 18px !default;
  $generic-h5-font-size: 16px !default;
  $generic-h6-font-size: 12px !default;
}

@else if $size == "compact" {
  $generic-xl-font-size: 29px !default;
  $generic-l-font-size: 24px !default;
  $generic-m-font-size: 18px !default;
  $generic-s-font-size: 16px !default;
  $generic-xs-font-size: 10px !default;
  $generic-h1-font-size: 29px !default;
  $generic-h2-font-size: 24px !default;
  $generic-h3-font-size: 20px !default;
  $generic-h4-font-size: 16px !default;
  $generic-h5-font-size: 14px !default;
  $generic-h6-font-size: 10px !default;
}

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