$asset-url: "https://uikit.icemortgagetechnology.com" !default;
$path-to-fonts: $asset-url+"/dist/assets/fonts" !default;
$path-to-img: $asset-url+"/dist/assets/img" !default;



// ----------------------------------------------------------------------------
// Font
// ----------------------------------------------------------------------------

@import './user-fonts';

$font-family-base: 'Suisse', sans-serif;

$font-weight-bold: 700 !default;

$font-size-xs: 0.75rem !default;  // 12
$font-size-sm: 0.875rem !default; // 14
$font-size-base: 1rem !default;   // 16
$font-size-md: 1.125rem !default; // 18
$font-size-lg: 1.25rem !default;  // 20
$font-size-xl: 1.375rem !default; // 22
$font-size-xx: 1.5rem !default;   // 24



// ----------------------------------------------------------------------------
// Colors
// ----------------------------------------------------------------------------
// essential
$iceblue: #71C5E8 !default;
$icenight: #000000 !default;
$icecloud: #E2E2E2 !default;
$icestone: #4D4D4D !default;
// extended
$chartreuse: #7CEF4A !default;
$phthalo: #839AFF !default;
$turquoise: #02EFDB !default;
$cornflower: #0f364a !default;
$cerulean: #235f73 !default;

// utility
$green: #20d959 !default;
$yellow: #ffd524 !default;
$red: #ff0000 !default;
$white: #ffffff !default;

$iceblue-100: tint-color($iceblue, 80%) !default;
$iceblue-200: tint-color($iceblue, 60%) !default;
$iceblue-300: tint-color($iceblue, 40%) !default;
$iceblue-400: tint-color($iceblue, 20%) !default;
$iceblue-500: $iceblue !default;
$iceblue-600: shade-color($iceblue, 20%) !default;
$iceblue-700: shade-color($iceblue, 40%) !default;
$iceblue-800: shade-color($iceblue, 60%) !default;
$iceblue-900: shade-color($iceblue, 80%) !default;

$icenight-100: tint-color($icenight, 80%) !default;
$icenight-200: tint-color($icenight, 60%) !default;
$icenight-300: tint-color($icenight, 40%) !default;
$icenight-400: tint-color($icenight, 20%) !default;
$icenight-500: $icenight !default;
$icenight-600: shade-color($icenight, 20%) !default;
$icenight-700: shade-color($icenight, 40%) !default;
$icenight-800: shade-color($icenight, 60%) !default;
$icenight-900: shade-color($icenight, 80%) !default;

$icecloud-100: tint-color($icecloud, 80%) !default;
$icecloud-200: tint-color($icecloud, 60%) !default;
$icecloud-300: tint-color($icecloud, 40%) !default;
$icecloud-400: tint-color($icecloud, 20%) !default;
$icecloud-500: $icecloud !default;
$icecloud-600: shade-color($icecloud, 20%) !default;
$icecloud-700: shade-color($icecloud, 40%) !default;
$icecloud-800: shade-color($icecloud, 60%) !default;
$icecloud-900: shade-color($icecloud, 80%) !default;

$icestone-100: tint-color($icestone, 80%) !default;
$icestone-200: tint-color($icestone, 60%) !default;
$icestone-300: tint-color($icestone, 40%) !default;
$icestone-400: tint-color($icestone, 20%) !default;
$icestone-500: $icestone !default;
$icestone-600: shade-color($icestone, 20%) !default;
$icestone-700: shade-color($icestone, 40%) !default;
$icestone-800: shade-color($icestone, 60%) !default;
$icestone-900: shade-color($icestone, 80%) !default;

$chartreuse-100: tint-color($chartreuse, 80%) !default;
$chartreuse-200: tint-color($chartreuse, 60%) !default;
$chartreuse-300: tint-color($chartreuse, 40%) !default;
$chartreuse-400: tint-color($chartreuse, 20%) !default;
$chartreuse-500: $chartreuse !default;
$chartreuse-600: shade-color($chartreuse, 20%) !default;
$chartreuse-700: shade-color($chartreuse, 40%) !default;
$chartreuse-800: shade-color($chartreuse, 60%) !default;
$chartreuse-900: shade-color($chartreuse, 80%) !default;

$phthalo-100: tint-color($phthalo, 80%) !default;
$phthalo-200: tint-color($phthalo, 60%) !default;
$phthalo-300: tint-color($phthalo, 40%) !default;
$phthalo-400: tint-color($phthalo, 20%) !default;
$phthalo-500: $phthalo !default;
$phthalo-600: shade-color($phthalo, 20%) !default;
$phthalo-700: shade-color($phthalo, 40%) !default;
$phthalo-800: shade-color($phthalo, 60%) !default;
$phthalo-900: shade-color($phthalo, 80%) !default;

$turquoise-100: tint-color($turquoise, 80%) !default;
$turquoise-200: tint-color($turquoise, 60%) !default;
$turquoise-300: tint-color($turquoise, 40%) !default;
$turquoise-400: tint-color($turquoise, 20%) !default;
$turquoise-500: $turquoise !default;
$turquoise-600: shade-color($turquoise, 20%) !default;
$turquoise-700: shade-color($turquoise, 40%) !default;
$turquoise-800: shade-color($turquoise, 60%) !default;
$turquoise-900: shade-color($turquoise, 80%) !default;

$cornflower-100: tint-color($cornflower, 80%) !default;
$cornflower-200: tint-color($cornflower, 60%) !default;
$cornflower-300: tint-color($cornflower, 40%) !default;
$cornflower-400: tint-color($cornflower, 20%) !default;
$cornflower-500: $cornflower !default;
$cornflower-600: shade-color($cornflower, 20%) !default;
$cornflower-700: shade-color($cornflower, 40%) !default;
$cornflower-800: shade-color($cornflower, 60%) !default;
$cornflower-900: shade-color($cornflower, 80%) !default;

$cerulean-100: tint-color($cerulean, 80%) !default;
$cerulean-200: tint-color($cerulean, 60%) !default;
$cerulean-300: tint-color($cerulean, 40%) !default;
$cerulean-400: tint-color($cerulean, 20%) !default;
$cerulean-500: $cerulean !default;
$cerulean-600: shade-color($cerulean, 20%) !default;
$cerulean-700: shade-color($cerulean, 40%) !default;
$cerulean-800: shade-color($cerulean, 60%) !default;
$cerulean-900: shade-color($cerulean, 80%) !default;

$primary: $icenight !default;
$secondary: $icecloud !default;
$success: $green !default;
$info: $cornflower !default;
$warning: $yellow !default;
$danger: $red !default;
$light: $white !default;
$dark: $icenight !default;

// *** COLORS *** SEE THEME.SCSS *** //

// ----------------------------------------------------------------------------
// Typography
// ----------------------------------------------------------------------------
$h1-font-size: 3rem !default; // 48px
$h2-font-size: 2.25rem !default; // 36px
$h3-font-size: 2rem !default; // 32px
$h4-font-size: 1.5rem !default; // 24px
$h5-font-size: 1.25rem !default; // 20px
$h6-font-size: 1.125rem !default; // 18px

$display-font-sizes: (
  1: 4.5rem, // 72px
  2: 3.75rem, // 60px
) !default;

$display-font-weight: 500 !default;
$headings-letter-spacing: 0 !default;
$display-letter-spacing: 0 !default;
$line-height-base: 1.6 !default;

$link-color: $icenight !default;
$link-decoration: none !default;
$link-hover-color: none !default;
$link-hover-decoration: underline !default;




// ----------------------------------------------------------------------------
// Buttons
// ----------------------------------------------------------------------------
// $btn-font-weight: $font-weight-bold !default;
$btn-font-weight: 700 !default;
$btn-border-width: 2px !default;

// $btn-border-radius-sm: 0 !default;
// $btn-border-radius: 0 !default;
// $btn-border-radius-lg: 0 !default;

$btn-font-size: $font-size-base !default;
$btn-font-size-xs: $font-size-xs !default;
$btn-font-size-sm: $font-size-sm !default;
$btn-font-size-lg: $font-size-lg !default;

$input-btn-font-size-xs: $btn-font-size-xs !default;

$input-btn-padding-x-xs: 0.5rem;
$input-btn-padding-x-sm: 0.75rem;
$input-btn-padding-x: 1rem;
$input-btn-padding-x-lg: 1.5rem;



// ----------------------------------------------------------------------------
// Border
// ----------------------------------------------------------------------------
$border-color: $icenight !default;



// ----------------------------------------------------------------------------
// Grid
// ----------------------------------------------------------------------------
$grid-gutter-width: 4rem !default;

$grid-breakpoints: (
  xs: 0,
  sm: 576px,
  md: 768px,
  lg: 992px,
  xl: 1200px,
  xxl: 1400px
) !default;

$container-max-widths: (
  sm: 540px,
  md: 720px,
  lg: 960px,
  xl: 1140px,
  xxl: 1320px
) !default;



// ----------------------------------------------------------------------------
// Misc
// ----------------------------------------------------------------------------
$ratios: ('4:5', '1:1', '4:3', '5:3', '16:9', '3:1', '32:9', '16:3') !default;

$max-widths: 100 200 300 400 500 600 700 800 900 1000 1100 1200 1400 1600 1700 1800 1900 2000 !default;

$enable-rounded: false !default;

$btn-hover-bg-shade-amount: 100% !default;

$table-striped-bg: #e8f4fb !default;

// $table-bg: $cornflower-500;
// $table-dark-bs-table-bg: $cornflower-500;

$btn-padding-x-sm:            1rem !default;
$btn-padding-y-sm:            1rem !default;

$btn-padding-x:               1.25rem !default;
$btn-padding-y:               1.25rem !default;

$btn-padding-x-lg:            1.5rem !default;
$btn-padding-y-lg:            1.5rem !default;

$box-shadow:                  0 0.0625rem 0.1875rem rgba(#000000, 0.16);
$box-shadow-dark-large:       0 .5rem 1.5rem rgba(22, 28, 45, .15);

$navbar-light-color: $icenight !default;
$navbar-light-hover-color: $icenight !default;

$list-link-color: $icenight !default;
$list-link-hover-color: $icenight !default;

$progress-box-shadow: none !default;

// // $toast-box-shadow: none !default;
$toast-header-color: $icenight !default;
$toast-border-color: none !default;
$toast-box-shadow: $box-shadow-dark-large !default;

$tooltip-padding-y: 8px;
$tooltip-padding-x: 8px;
$tooltip-opacity: 1.0 !default;

$btn-close-bg: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='#{$icenight}'><path d='M.293.293a1 1 0 011.414 0L8 6.586 14.293.293a1 1 0 111.414 1.414L9.414 8l6.293 6.293a1 1 0 01-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 01-1.414-1.414L6.586 8 .293 1.707a1 1 0 010-1.414z'/></svg>") !default;
$btn-close-opacity: 1 !default;

$popover-body-color: white !default;
$popover-body-bg: $icenight !default;
$popover-font-size: 1rem !default;
$popover-bg: $icenight !default;

// $popover-box-shadow:  0 .5rem 1.5rem rgba(22,28,45,.15)!important;//$box-shadow-dark !default;
$popover-box-shadow:  $box-shadow-dark-large !default;
// $popover-box-shadow: @extend.shadow-dark-lg !default;