/* stylelint-disable unit-disallowed-list */

// Spacing values, based on default 16px base value
$spacing-none: 0; // 0px
$spacing-xxs: calc(0.25rem / var(--fudis-rem-multiplier)); // 4px
$spacing-xs: calc(0.5rem / var(--fudis-rem-multiplier)); // 8px
$spacing-sm: calc(1rem / var(--fudis-rem-multiplier)); // 16px
$spacing-md: calc(1.5rem / var(--fudis-rem-multiplier)); // 24px
$spacing-lg: calc(2rem / var(--fudis-rem-multiplier)); // 32px
$spacing-xl: calc(2.5rem / var(--fudis-rem-multiplier)); // 40px
$spacing-xxl: calc(4rem / var(--fudis-rem-multiplier)); // 64px

$pixel-1: 1px;
$pixel-2: 2px;
$pixel-3: 3px;

// Used with borders, border-radius and letter-spacing mixins. Any value >=4px should be used from spacing values above.
$pixel-tokens: (
  '1px': $pixel-1,
  '2px': $pixel-2,
  '3px': $pixel-3,
);

// Form input width tokens
$input-width-xs: calc(5.75rem / var(--fudis-rem-multiplier));
$input-width-sm: calc(10rem / var(--fudis-rem-multiplier));
$input-width-md: calc(14rem / var(--fudis-rem-multiplier));
$input-width-lg: calc(23rem / var(--fudis-rem-multiplier));

// Fixed size for checkboxes' visual input box. Clickable input area should be 2rem high.
$checkbox-size: calc(1.25rem / var(--fudis-rem-multiplier));

// Fixed height for tab navigation scroll view buttons
$tab-navigation-button-height: calc(3rem / var(--fudis-rem-multiplier));