@use 'sass:map';
@use 'sass:math';

/*
  SPACINGS
****************************************************************************/
$sizes: (
  xxxxxl: 72px,
  xxxxl: 64px,
  xxxl: 56px,
  xxl: 48px,
  xl: 40px,
  l: 32px,
  m: 24px,
  s: 16px,
  xs: 12px,
  xxs: 8px,
  xxxs: 4px,
  xxxxs: 2px,
) !default;

/*
  FONT SETTINGS 
****************************************************************************/
$font-sizes: (
  xxxxl: 72px,
  xxxl: 56px,
  xxl: 40px,
  xl: 32px,
  l: 22px,
  m: 18px,
  n: 16px,
  s: 14px,
  xs: 12px,
  xxs: 10px,
) !default;
$line-height: (
  // h1:
  xl: 38px,
  // h2:
  l: 28px,
  // h3:
  m: 24px,
  // p - please note: p and h3 share the same line-height, added the sizes to "match" with font-size:
  n: 24px,
  // text-small:
  s: 20px,
  // text-xsmall:
  xs: 16px,
  // text-xxsmall:
  xxs: 11px
) !default;
$font-weight: (
  light: 300,
  normal: 400,
  medium: 500,
  bold: 700,
  // black will be treated as a named css color if not quoted
  'black': 900,
) !default;

/* Icon
****************************************************************************/
$icon-font-sizes: (
  'xs': map.get($sizes, 's'),
  'sm': map.get($sizes, 'm'),
  'md': map.get($sizes, 'l'),
  'lg': map.get($sizes, 'xxxl'),
) !default;

/*
  Z - Index overview
****************************************************************************/
$z-layers: (
  default: 1,
  segment-badge: 2,
  avatar-badge: 2,
  sticky-content: 10,
  dropdown: 800,
  popover: 850,
  modal-overlay: 900,
  modal: 901,
  loading-overlay: 1001,
) !default;

/* Border Radius
****************************************************************************/
$border-radii: (
  xxs: 2px /* 0.125rem */,
  xs: 4px /* 0.25rem */,
  s: 8px /* 0.5rem */,
  n: 16px /* 1rem */,
  l: 24px /* 1.5rem */,
  xl: 32px /* 2rem */,
  circle: 50%,
  pill: 999px,
) !default;

/// @deprecated Please use utils.border-radius('n') instead;
$border-radius: map.get($border-radii, 'n') !default;

/// @deprecated Please use utils.border-radius('pill') instead;
$border-radius-round: map.get($border-radii, 'pill') !default;

/* Breakpoints
****************************************************************************/
$breakpoints: (
  xsmall: 320px,
  small: 632px,
  medium: 768px,
  large: 992px,
  xlarge: 1440px,
) !default;

/* Elevation
****************************************************************************/
$elevations: (
  2: (
    0 1px 24px 0 rgb(28 28 28 / 4%),
  ),
  4: (
    0 0 5px 0 rgba(28 28 28 / 4%),
    0 10px 15px -10px rgba(28 28 28 / 15%),
  ),
  8: (
    0 20px 30px -15px rgb(28 28 28 / 30%),
    0 0 5px 0 rgb(28 28 28 / 8%),
  ),
) !default;

/* avatar
****************************************************************************/
$avatar-sizes: (
  xs: 32px,
  s: 40px,
  m: 56px,
  l: 96px,
) !default;
$avatar-badge-size: 16px;

/* Page
****************************************************************************/
$page-content-max-widths: (
  default: 792px,
  lg: 1092px,
  xl: 1392px,
  full: 100%,
);
$page-content-max-width-default: map.get($page-content-max-widths, 'default');

/* Modal
****************************************************************************/
$alert-max-width: 359px;
$compact-modal-max-width: 359px;
$modal-max-width: 720px;
$modal-heights: (
  s: math.floor($modal-max-width * 0.4),
  m: math.floor($modal-max-width * 0.64),
  l: math.floor($modal-max-width * 0.8),
) !default;
$modal-default-height: map.get($modal-heights, 'm');
$drawer-default-height: map.get($modal-heights, 's');

/* Item
****************************************************************************/
$item-heights: (
  m: 56px,
  s: 44px,
  xs: 32px,
) !default;

/* Dropdown
****************************************************************************/
$dropdown-item-height: map.get($item-heights, 's');

/* Button, Checkbox, Page, Radio
****************************************************************************/
$fat-finger-size: 44px;

/* Checkbox, Radio
****************************************************************************/
$checkbox-radio-sizes: (
  'xs': map.get($sizes, 'l'),
  'sm': $fat-finger-size,
  'md': map.get($sizes, 'xxxl'),
);
$checkbox-radio-spacing: (
  'to-edge': map.get($sizes, 's'),
  'to-label': map.get($sizes, 'xs'),
);

/* Checkbox - size
****************************************************************************/
$checkbox-sizes: (
  'xs': (
    icon-size: map.get($sizes, 's'),
    line-height: map.get($sizes, 'm'),
    vertical-padding: 4px,
  ),
  'sm': (
    icon-size: map.get($sizes, 'm'),
    line-height: map.get($checkbox-radio-sizes, 'sm'),
    vertical-padding: 10px,
  ),
  'md': (
    icon-size: map.get($sizes, 'm'),
    line-height: map.get($checkbox-radio-sizes, 'md'),
    vertical-padding: 16px,
  ),
);

/* Transitions
****************************************************************************/
$soft-keyboard-transition-enter: 250ms ease-out 1ms; // Adding a 1ms delay seems to improve the smoothness on iPhone
$soft-keyboard-transition-leave: 150ms ease-out;
$transition-durations: (
  quick: 200ms,
  short: 300ms,
  long: 500ms,
  extra-long: 1000ms,
);

// Easing function
$transition-easings: (
  static: linear,
  enter: ease-out,
  exit: ease-in,
  enter-exit: ease,
  motion: cubic-bezier(0.25, 0.1, 0.25, 1),
  modal: (
    enter: cubic-bezier(0.32, 0.72, 0, 1),
    exit: cubic-bezier(0.32, 0.72, 0, 1),
  ),
);
$loading-overlay-backdrop-opacity: 0.8;