@use 'sass:map';
@use '../01-base' as base;
@use './colors-primitive' as colors-primitive;

// BORDER RADIUS

$border-radius-map: (
    none: 0,
    xs: 2px,
    s: 4px,
    m: 8px,
    l: 12px,
    full: 999px
);


// BORDER WIDTH

$border-width-map: (
    none: 0,
    xs: 1px,
    s: 2px,
    m: 4px
);

// OPACITY

$opacity-map: (
    none: 0,
    10: 0.1,
    20: 0.2,
    30: 0.3,
    40: 0.4,
    50: 0.5,
    60: 0.6,
    70: 0.7,
    80: 0.8, 
    90: 0.9,
    100: 1
);

// SHADOWS

$shadow-map: (
    1: (
        offset-x: 0px,
        offset-y: 6px,
        blur: 12px,
        spread: 0px,
        color: map.get(colors-primitive.$color-map, 'alpha-silver-fog-950-8'),
    ),
    2: (
        offset-x: 0px,
        offset-y: 10px,
        blur: 22px,
        spread: 0px,
        color: map.get(colors-primitive.$color-map, 'alpha-silver-fog-950-10'),
    ),
    3: (
        offset-x: 0px,
        offset-y: 12px,
        blur: 32px,
        spread: 0px,
        color: map.get(colors-primitive.$color-map, 'alpha-silver-fog-950-12'),
    ),
    4: (
        offset-x: 0px,
        offset-y: 14px,
        blur: 42px,
        spread: 0px,
        color: map.get(colors-primitive.$color-map, 'alpha-silver-fog-950-14'),
    )
);

// BREAKPOINTS

$breakpoint-size-map: (
    xs: 480px,
    s: 768px,
    m: 996px,
    l: 1140px,
    xl: 1440px,
    2xl: 1600px,
);

$breakpoint-map: (
    mobile-s: base.new-breakpoint(max-width map.get($breakpoint-size-map, 'xs') - 1),
    mobile-m: base.new-breakpoint(min-width map.get($breakpoint-size-map, 'xs') max-width map.get($breakpoint-size-map, 's') - 1),
    mobile: base.new-breakpoint(max-width map.get($breakpoint-size-map, 's') - 1),
    tablet-s: base.new-breakpoint(min-width map.get($breakpoint-size-map, 's') max-width map.get($breakpoint-size-map, 'm') - 1),
    tablet-m: base.new-breakpoint(min-width map.get($breakpoint-size-map, 'm') max-width map.get($breakpoint-size-map, 'l') - 1),
    tablet: base.new-breakpoint(min-width map.get($breakpoint-size-map, 's') max-width map.get($breakpoint-size-map, 'l') - 1),
    desktop-s: base.new-breakpoint(min-width map.get($breakpoint-size-map, 'l') max-width map.get($breakpoint-size-map, 'xl') - 1),
    desktop-m: base.new-breakpoint(min-width map.get($breakpoint-size-map, 'xl') max-width map.get($breakpoint-size-map, '2xl') - 1),
    desktop-l: base.new-breakpoint(min-width map.get($breakpoint-size-map, '2xl')),
    desktop: base.new-breakpoint(min-width map.get($breakpoint-size-map, 'l')),
);

$eds-bkp-mobile-s: map.get($breakpoint-map, 'mobile-s') !default;
$eds-bkp-mobile-m: map.get($breakpoint-map, 'mobile-m') !default;
$eds-bkp-mobile: map.get($breakpoint-map, 'mobile') !default;
$eds-bkp-tablet-s: map.get($breakpoint-map, 'tablet-s') !default;
$eds-bkp-tablet-m: map.get($breakpoint-map, 'tablet-m') !default;
$eds-bkp-tablet: map.get($breakpoint-map, 'tablet') !default;
$eds-bkp-desktop-s: map.get($breakpoint-map, 'desktop-s') !default;
$eds-bkp-desktop-m: map.get($breakpoint-map, 'desktop-m') !default;
$eds-bkp-desktop-l: map.get($breakpoint-map, 'desktop-l') !default;
$eds-bkp-desktop: map.get($breakpoint-map, 'desktop') !default;