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

// BORDER RADIUS

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


// BORDER WIDTH

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


// BREAKPOINT

$breakpoint-map: (
    xs: 0,
    sm: 480px,
    md: 768px,
    lg: 996px,
    xl: 1140px,
    xxl: 1440px,
    fhd: 1920px,
    2k: 2560px,
    4k: 3840px
);

// naming
$xs: base.new-breakpoint(min-width map.get($breakpoint-map, 'xs') max-width map.get($breakpoint-map, 'sm') - 1) !default;
$s: base.new-breakpoint(min-width map.get($breakpoint-map, 'sm') max-width map.get($breakpoint-map, 'md') - 1) !default;
$m: base.new-breakpoint(min-width map.get($breakpoint-map, 'md') max-width map.get($breakpoint-map, 'lg') - 1) !default;
$l: base.new-breakpoint(min-width map.get($breakpoint-map, 'lg') max-width map.get($breakpoint-map, 'xl') - 1) !default;
$xl: base.new-breakpoint(min-width map.get($breakpoint-map, 'xl') max-width map.get($breakpoint-map, 'xxl') - 1) !default;
$xxl: base.new-breakpoint(min-width map.get($breakpoint-map, 'xxl') max-width map.get($breakpoint-map, 'fhd') - 1) !default;
$fhd: base.new-breakpoint(min-width map.get($breakpoint-map, 'fhd') max-width map.get($breakpoint-map, '2k') - 1) !default;

// human naming
$eui-bkp-mobile-xs: $xs !default;
$eui-bkp-mobile-s: $s !default;
$eui-bkp-mobile: base.new-breakpoint(max-width map.get($breakpoint-map, 'md') - 1) !default;
$eui-bkp-mobile-up: base.new-breakpoint(min-width map.get($breakpoint-map, 'md')) !default;
$eui-bkp-tablet: $m !default;
$eui-bkp-tablet-up: base.new-breakpoint(min-width map.get($breakpoint-map, 'lg')) !default;
$eui-bkp-desktop-down: base.new-breakpoint(max-width map.get($breakpoint-map, 'lg') - 1) !default;
$eui-bkp-desktop: base.new-breakpoint(min-width map.get($breakpoint-map, 'xl')) !default;
$eui-bkp-desktop-up: base.new-breakpoint(min-width map.get($breakpoint-map, 'lg')) !default;
$eui-bkp-desktop-wide: $xxl !default;
$eui-bkp-desktop-fhd: $fhd !default;


// ICON SIZE

$icon-size-map: (
    2xs: 0.75rem,
    xs: 1rem,
    s: 1.25rem,
    m: 1.5rem,
    l: 2rem,
    xl: 2.5rem,
    2xl: 3rem,
    3xl: 3.5rem,
    4xl: 4rem,
    fluid: 1em
);


// OPACITY

$opacity-map: (
    none: 0,
    25: 0.25,
    50: 0.5,
    75: 0.75,
    100: 1
);


// SPACING

$spacing-map: (
    none: 0, 
    5xs: 0.0625rem,  // 4xs - 1px
    4xs: 0.125rem,   // 3xs - 2px
    3xs: 0.25rem,    // 2xs - 4px
    2xs: 0.375rem,   //     - 6px   
    xs: 0.5rem,      // ==  - 8px
    s: 0.75rem,      // ==  - 12px
    m: 1rem,         // ==  - 16px
    l: 1.25rem,      // ==  - 20px
    xl: 1.5rem,      // ==  - 24px
    2xl: 1.75rem,    //     - 28px
    3xl: 2rem,       // 2xl - 32px
    4xl: 2.25rem,    //     - 36px
    5xl: 2.5rem,     // 3xl - 40px
    6xl: 3rem,       // 4xl - 48px
    7xl: 3.5rem,     // 5xl - 56px
    8xl: 4rem,       // 6xl - 64px
    9xl: 4.5rem,     //     - 72px
    10xl: 5rem,      // 7xl - 80px
);


// Z-INDEX

$z-index-map: (
    auto: auto,
    zero: 0,
    root: 1,
    input-maxlength: 2,
    clearable-icon: 3,
    breadcrumb: 9,
    header: 10,
    top-message: 12,
    nav: 15,
    loading-indicator: 20,
    cdk-overlay-pane: 999,
    logo: 1000,
    sticky: 1040,
    sidebar: 1044,
    overlay: 1045,
    btn-floating: 1046,
    highlighted: 1047,
    footer-action-bar: 1048,
    modal-backdrop: 1049,
    modal: 1050,
    menu: 1060,
    tooltip: 1070,
    max: 9999,
    cdk-overlay-container: 10000,
    block-document: 10010,
    growl-message: 99999
);

// SHADOWS

$ecl-shadow-color: #1c1c45 !default;
$ecl-shadow: (
  1: (0 0 0.5px 0.5px rgba($ecl-shadow-color, 0.08), 0 6px 12px 0 rgba($ecl-shadow-color, 0.06)), 
  2: (0 0 0.5px 0.5px rgba($ecl-shadow-color, 0.08), 0 10px 18px 0 rgba($ecl-shadow-color, 0.1)), 
  3: (0 0 0.5px 0.5px rgba($ecl-shadow-color, 0.08), 0 14px 24px 0 rgba($ecl-shadow-color, 0.12)), 
  4: (0 0 0.5px 0.5px rgba($ecl-shadow-color, 0.08), 0 18px 32px 0 rgba($ecl-shadow-color, 0.12)), 
  5: (0 0 0.5px 0.5px rgba($ecl-shadow-color, 0.08), 0 20px 40px 0 rgba($ecl-shadow-color, 0.14))
);

$box-shadow-map: (
    0: none,
    1: map.get($ecl-shadow, 1),
    2: map.get($ecl-shadow, 2),
    3: map.get($ecl-shadow, 5),
    4: map.get($ecl-shadow, 4),
    5: map.get($ecl-shadow, 5)
);

// TYPOGRAPHY
$font-size-list: ('2xs', 'xs', 's', 'm', 'l', 'xl', '2xl', '3xl', '4xl', '5xl', '6xl');

$font-size-map: (
  '6xl': 2.5rem,
  '5xl': 2.25rem,
  '4xl': 2rem,
  '3xl': 1.75rem,
  '2xl': 1.5rem,
  'xl': 1.25rem,
  'l': 1.125rem,
  'm': 1rem,
  's': 0.875rem,
  'xs': 0.75rem,
  '2xs': 0.625rem
);

$font-line-height-map: (
  '4xl': 3rem,
  '3xl': 2.75rem,
  '2xl': 2.5rem,
  'xl': 2rem,
  'l': 1.75rem,
  'm': 1.5rem,
  's': 1.25rem,
  'xs': 1.125rem,
  '2xs': 1rem
);

$font-map: (
    6xl: (
        desktop: (
            font-size: 6xl,
            line-height: 4xl
        ),
        tablet: (
            font-size: 5xl,
            line-height: 3xl
        ),
        mobile: (
            font-size: 4xl,
            line-height: xl
        ),
        mobile-xs: (
            font-size: 3xl,
            line-height: xl
        ) 
    ),
    5xl: (
        desktop: (
            font-size: 5xl,
            line-height: 3xl
        ),
        tablet: (
            font-size: 4xl,
            line-height: xl
        ),
        mobile: (
            font-size: 3xl,
            line-height: xl
        ),
        mobile-xs: (
            font-size: 2xl,
            line-height: l
        ) 
    ),
    4xl: (
        desktop: (
            font-size: 4xl,
            line-height: xl
        ),
        tablet: (
            font-size: 3xl,
            line-height: xl
        ),
        mobile: (
            font-size: 2xl,
            line-height: l
        ),
        mobile-xs: (
            font-size: xl,
            line-height: l
        ) 
    ),
    3xl: (
        desktop: (
            font-size: 3xl,
            line-height: xl
        ),
        tablet: (
            font-size: 2xl,
            line-height: xl
        ),
        mobile: (
            font-size: xl,
            line-height: l
        ),
        mobile-xs: (
            font-size: l,
            line-height: l
        ) 
    ),
    2xl: (
        desktop: (
            font-size: 2xl,
            line-height: xl
        ),
        tablet: (
            font-size: xl,
            line-height: l
        ),
        mobile: (
            font-size: l,
            line-height: l
        ),
        mobile-xs: (
            font-size: l,
            line-height: l
        ) 
    ),
    xl: (
        desktop: (
            font-size: xl,
            line-height: xl
        ),
        tablet: (
            font-size: xl,
            line-height: xl
        ),
        mobile: (
            font-size: l,
            line-height: l
        ),
        mobile-xs: (
            font-size: m,
            line-height: m
        ) 
    ),
    l: (
        desktop: (
            font-size: l,
            line-height: l
        ),
        tablet: (
            font-size: l,
            line-height: l
        ),
        mobile: (
            font-size: m,
            line-height: m
        ),
        mobile-xs: (
            font-size: m,
            line-height: m
        ) 
    ),
    m: (
        desktop: (
            font-size: m,
            line-height: m
        ),
        tablet: (
            font-size: m,
            line-height: m
        ),
        mobile: (
            font-size: m,
            line-height: m
        ),
        mobile-xs: (
            font-size: m,
            line-height: m
        ) 
    ),
    s: (
        desktop: (
            font-size: s,
            line-height: s
        ),
        tablet: (
            font-size: s,
            line-height: s
        ),
        mobile: (
            font-size: s,
            line-height: s
        ),
        mobile-xs: (
            font-size: s,
            line-height: s
        ) 
    ),
    xs: (
        desktop: (
            font-size: xs,
            line-height: xs
        ),
        tablet: (
            font-size: xs,
            line-height: xs
        ),
        mobile: (
            font-size: xs,
            line-height: xs
        ),
        mobile-xs: (
            font-size: xs,
            line-height: xs
        ) 
    ),
    2xs: (
        desktop: (
            font-size: 2xs,
            line-height: 2xs
        ),
        tablet: (
            font-size: 2xs,
            line-height: 2xs
        ),
        mobile: (
            font-size: 2xs,
            line-height: 2xs
        ),
        mobile-xs: (
            font-size: 2xs,
            line-height: 2xs
        ) 
    )
);

$font-weight-map: (
    'light': 300,
    'regular': 400,
    'medium': 500,
    'semi-bold': 600,
    'bold': 700
);
