@use 'sass:map';

$utilities-prefix: #{'.u-'} !default;
$typography-prefix: #{'.t-'} !default;
$component-prefix: #{'.c-'} !default;
$object-prefix: #{'.o-'} !default;
$js-prefix: #{'.js-'} !default;

// Bootstrap values
$grid-breakpoints: (
  /** Extra small screen / phone */ xs: 0,
  /** Small screen / phone */ sm: 576px,
  /** Medium screen / tablet */ md: 768px,
  /** Large screen / desktop */ lg: 992px,
  /** Extra large screen / wide desktop */ xl: 1200px,
  /** Extra extra large (custom option) */ xxl: 1400px
);

$container-max-widths: (
  sm: 540px,
  md: 720px,
  lg: 960px,
  xl: 1440px,
);

// Custom map of gutter widths across breakpoints.
$grid-gutter-widths: (
  xs: 24px,
  md: 32px,
  lg: 40px,
);

/* Container paddings */
$container-paddings: (
  xs: 32px,
  md: 64px,
);

// Default Bootstrap gutter width variable.
$grid-gutter-width: map.get($grid-gutter-widths, lg);

// Default bootstrap container padding
$container-padding-x: 128px;

// Define the breakpoint from the $mq-breakpoints list that should
// be used as the target width when outputting a static stylesheet
// (i.e. when $mq-responsive is set to 'false').
$mq-static-breakpoint: large;

/**
 * @sass-export-section="Fonts"
 */

// Typography
$font-family-body: 'Source Sans Pro', Arial, sans-serif;
$font-family-heading: 'Manrope', Arial, sans-serif;

// Font sizes
$font-size-base: 16px;
$font-size-tiny: 12px;

// Map for icon Unicode values
$icons: (
  account-circle: '\0041',
  arrow-back: '\0043',
  arrow-forward: '\0044',
  call: '\0045',
  cancel: '\0046',
  chevron-right: '\0048',
  chevron-left: '\0049',
  close: '\004a',
  delete: '\004b',
  description: '\004c',
  download: '\004d',
  error: '\004e',
  exit-to-app: '\004f',
  first-page: '\0050',
  last-page: '\0051',
  home: '\0052',
  keyboard-arrow-down: '\0053',
  keyboard-arrow-up: '\0054',
  lock: '\0056',
  lock-open: '\0057',
  add-circle: '\0058',
  remove-circle: '\0059',
  mail: '\0063',
  menu: '\0061',
  picture-as-pdf: '\0062',
  priority-high: '\0064',
  search: '\0065',
  warning: '\0066',
  play-circle: '\0069',
  language: '\006a',
  park: '\0067',
);

//@end-sass-export-section

/**
 * @sass-export-section="Colors"
 */
$light-grey: #edf1f2; // remove, use $sodra-black-10

$bluish-grey: #e3e7e8;
$bluish-grey-50: #edf1f2;
$bluish-grey-25: #f8fafa;

$spaceholder-black: #1a0d0d;

$sodra-black: #0d171a; // remove, use $sodra-black-100

$sodra-black-95: #192326;
$sodra-black-90: #262f32;
$sodra-black-85: #323b3e;
$sodra-black-80: #3f474a;
$sodra-black-75: #4b5456;
$sodra-black-70: #586062;
$sodra-black-65: #646c6e;
$sodra-black-60: #71787a;
$sodra-black-55: #7d8486;
$sodra-black-50: #899092;
$sodra-black-45: #969c9e;
$sodra-black-40: #a2a8aa;
$sodra-black-35: #afb4b6;
$sodra-black-30: #bbc1c2;
$sodra-black-25: #c8cdce;
$sodra-black-20: #d4d9da;
$sodra-black-15: #e1e5e6;
$sodra-black-10: #edf1f2; // light-grey
$sodra-black-5: #f6f8f8;

$sodra-green: #008739;
$sodra-green-50: #7fc2a4;
$sodra-green-25: #cce7db;

$dark-blue: #005060;
$dark-blue-50: #007a93;

$blue: #a3d8e5;
$blue-75: #bae2ec;
$blue-50: #d1ebf2;
$blue-25: #e8f5f8;
$blue-15: #f1f9fb;

$green: #9fd0b1;
$green-75: #b7dcc5;
$green-50: #cfe7d8;
$green-25: #e7f3eb;
$green-15: #f1f8f3;

$yellow: #f8df52;
$yellow-75: #fae77d;
$yellow-50: #fcf1a2;
$yellow-25: #fdf7d4;
$yellow-15: #fefae5;

$red: #e4624a;
$red-75: #eb8977;
$red-50: #f1b0a4;
$red-25: #f8d8d2;
$red-15: #fbe8e4;

$white: #ffffff;

$black: #000;
//@end-sass-export-section

/**
 * @sass-export-section="Layout / Spacing"
 */

// Measures
$sidebar-width: 375px;
$sidebar-width-desktop: 360px;
$sidebar-width-large: 960px;

// 16px default
$spacer: 1rem;

$spacers: (
  0: 0,
  1: $spacer * 0.25,
  2: $spacer * 0.5,
  3: $spacer,
  4: $spacer * 1.5,
  5: $spacer * 2,
  6: $spacer * 2.5,
  7: $spacer * 3,
  8: $spacer * 4,
  9: $spacer * 5,
);

// Spacer padding variants
$spacer-0: 0;
$spacer-1: map.get($spacers, 1);
$spacer-2: map.get($spacers, 2);
$spacer-3: map.get($spacers, 3);
$spacer-4: map.get($spacers, 4);
$spacer-5: map.get($spacers, 5);
$spacer-6: map.get($spacers, 6);
$spacer-7: map.get($spacers, 7);
$spacer-8: map.get($spacers, 8);
$spacer-9: map.get($spacers, 9);

//@end-sass-export-section

/**
 * @sass-export-section="Header"
 */

// Header
$site-header-height: 84px;
$site-header-small-height: 64px;
//@end-sass-export-section

/**
 * @sass-export-section="Transitions"
 */

// Transitions
$transition-duration: 0.15s;
$transition-effect: ease-in-out;
$transition-duration-long: 0.4s;
//@end-sass-export-section

/**
 * @sass-export-section="Other"
 */

// Override Bootstrap border variables
$border-radius: 0.4375rem;
$border-color: $sodra-black;

//new border radius
$border-radius-percent: 100%;
//@end-sass-export-section