@use "sass:math";
// Colors
$white: #fff;
$black: #000;
$red: #C92428; // Meets 4:5 contrast requirement when on light gray #eee
$blue: #0069AA; // As per Arrow Design Guidelines v2.4 (Main Bom App color & Default Button color)
$blue-15-opacity: rgba(0, 157, 220, 0.15);
$purple: #92278f;
$orange: #f68a33;
$green: #008445;  // Changed to provide ensure higher contrast with white and other used colors. Though, not used after switching to blue color schema
$yellow: #fdbb31;
$lightning-blue: #4faed3;
$lochmara: #007cce;

$lightergrey: #dedede;
$lightgrey: #eee;
$lightgreytransparent: rgba(
  0,
  0,
  0,
  0.07
); // Also #00000011 - equivalent to #EEE when on a white background
$evenlightergrey: #eee;
$midlightgrey: #cfcfcf;
$midgrey: #bbb;
$grey: #d7d7d7;
$middarkgrey: #757575;
$middarkergrey: #5d5d5d; // Meets 4:5 ratio contrast requirement when dark gray is on light gray
$verydarkgrey: #29272a;

$indiepink: #d73478;
$bronze: #ba7d45;
$silver: #cbc2c2;
$gold: #d5a23e;

$font-color: #369;
$link-color: #369;

$body-bg: $white;
$text-color: $black;

$input-border-color: #757575; // As per Arrow Design Guidelines v2.4

$focus-outline-color: #7FC1EA; // As per Arrow Design Guidelines v2.4
$focus-outline-sickness: 3px; // As per Arrow Design Guidelines v2.4
$focus-outline-offset: 0px;

// Fonts
$icon-font: 'bomIcomoon';
$font-family-base: 'Helvetica Neue', Helvetica, Arial, sans-serif !default;

$font-size-base: 14px !default;
$font-size-s: 12px;
$font-size-xs: 10px;

$font-size-m: 16px;
$font-size-l: 20px;
$font-size-xl: 24px;

$line-height-base: 1.428571429;

// Gutter
$gutter-s: 5px;
$gutter-m: 10px;
$gutter: 15px;
$gutter-l: 20px;

// Max width
$main-width: 1240px;

$button-hover-black: #404040;
$button-hover-green: #189c58;
$button-hover-red: #ca1836;
$button-hover-orange: #e46a2b;
$button-hover-blue: #0084D5; // As per Arrow Design Guidelines v2.4
$button-hover-black: $black;

$facebook: #3c5899;
$twitter: #28a9e0;
$google-plus: #db4437;
$linkedin: #1a85bc;
$pinterest: #bd081c;

// Themes
$themes: (
  black: $black,
  white: $white,
  verydarkgrey: $verydarkgrey,
  grey: $middarkgrey,
  red: $red,
  blue: $blue,
  green: $green,
  orange: $orange,
  purple: $purple,
  pink: $indiepink
);

// Darker colours
$darkerThemes: (
  white: darken($white, 10),
  verydarkgrey: darken($verydarkgrey, 10),
  grey: darken($grey, 10),
  red: darken($red, 10),
  blue: darken($blue, 10),
  green: darken($green, 10),
  orange: darken($orange, 10),
  purple: darken($purple, 10),
  pink: darken($indiepink, 10)
);
// Best contrast font text color
// for example black text is better on a white background, white text on a blue background, etc...
$contrastFontThemes: (
  black: $white,
  white: $black,
  verydarkgrey: $white,
  grey: $white,
  red: $white,
  blue: $white,
  green: $white,
  orange: $white,
  purple: $white,
  pink: $white
);

// Breakpoints
$mobile-breakpoint: 326px;
$phablet-breakpoint: 600px;
$modal-breakpoint: 641px;
$tablet-breakpoint: 720px;
$laptop-breakpoint: 890px;
$desktop-breakpoint: 1024px;
$wide-breakpoint: 1240px;
// Height Breakpoints
$nexus-height-breakpoint: 906px;
// Grid - number of columns
$col-narrow: 4;
$col-wide: 5;
// Letter spacing
$tracking--55: -0.055em;
$tracking--40: -0.04em;
$tracking--30: -0.03em;
$tracking--20: -0.02em;
$tracking-0: 0em;
$tracking-10: 0.01em;
$tracking-20: 0.02em;
$tracking-40: 0.04em;
$tracking-50: 0.05em;
$tracking-60: 0.06em;
$tracking-80: 0.08em;
$tracking-60: 0.06em;
$tracking-90: 0.09em;
$tracking-100: 0.1em;
// Font size
$font-base: 12px;
$font-size-header1: 44px;
$font-size-header2: 28px;
$font-size-header3: 20px;
$font-size-header4: 16px;
$font-size-header5: 14px;
$font-size-header6: 11px;
// Line heights
$line-height-header1: 45px;
$line-height-header2: 29px;
$line-height-header3: 24px;
$line-height-header4: 19px;
$line-height-header5: 14px;
// Font weight
$font-thin: 200;
$font-normal: 400;
$font-bold: 600;
$font-heavy: 800;
// Z-Index References
$z-main: 1; // main page elements
$z-button-text: 5; // Button text that requires a z index
$z-button-animations: 10;
// Button animations
$z-backTop: 15; // Back to top
$z-dropdowns: 90;
$z-nav: 101;
$z-header-megamenu: 120; // Megamenu link bar
$z-currency-overlay: 125; // black overlay that covers the page
$z-header-NavIcons: 130; // drop down menu on the icons in header
$z-typeaheadClose: 150; // close button for typeahead. Sits above header
$z-currency-dropdown: 195; // currency
$z-divisions-overlay: 200; // overlay that covers the page once header divisions menu is open
$z-tooltip: 900;
$z-header: 950; // header
$z-image-overlay: 9000; // overlay that covers the page once an image overlay opens
$z-modal-overlay: 9999; // overlay that covers the page once a modal dialog opens
$z-modal-wrapper: 10000; // wrapper that contains the modal dialog
// Transition Times
$default-transition-speed: 300ms;
$trans-tags: 300ms;
$trans-icon-circle: 300ms;
$trans-articleTile: 600ms;
$trans-modal: 300ms;
$trans-minimised-header: 300ms;
$trans-secondaryNav: 500ms;
$trans-divisions-menu: 500ms;
$trans-sideNav: 300ms;
$trans-tabs: 300ms;
$trans-browseBarButton: 300ms;
// Layouts
$main-panel-layout: (
  columns: 10,
  gutter-position: split,
  gutters: 0.2,
  global-box-sizing: border-box
);
$alternative-layout: (
  // 12 column layout used for 3 or 4 columns
    columns: 12,
  gutter-position: split,
  gutters: 0.2
);
$tempGrid-layout: (
  // 10 column layout with padding like bootstrap.
    columns: 10,
  gutter-position: inside,
  gutters: 0.3
);
// Grid variables
$susy: (
  columns: 10,
  global-box-sizing: border-box,
  gutters: 0.25
);
$arrow-grid: (
  columns: 10,
  gutter-position: split,
  gutters: 0.25
);
$grid-vertical-gutter: 15px;
$grid-height-single: 250px;
$grid-height-half: math.div($grid-height-single, 2);
$grid-height-double: $grid-height-single * 2;
$height-half: $grid-height-half - math.div($grid-vertical-gutter, 2);
$page-side-padding: 15px;
$article-body-font-size: 14px;
$divs-menu-height-laptop: 110px;
$divs-menu-height-desktop: 130px;
$header-transition-speed: 300ms;
$minimised-header-height: 40px;
$product-panel-width: 240px;
$header-height-mobile: 87px;
$header-height-laptop: 174px;
$third-party-header-height-laptop: 130px;
$third-party-header-height-desktop: 140px;
// Keep until refactor
$header-height-phablet: 84px;
$header-height-laptop: 185px;
$header-height-desktop: 195px;
// New Header
$headerV2-height-laptop: 160px;
$headerV2-height-tablet: 84px;
$headerV2-height-tablet-minimised: 44px;
$headerV2-height-tablet-mobile: 128px;
$ad-banner-height: 40px;
// Horizontal FilterContainer-filters
$filter-height: 192px;
$filter-min-width: 130px;
$filter-max-width: 400px;
$filter-title-width: 140px;
$filter-category-width: 243px;
$filter-manufacturers-width: 222px;
$filter-offset: 20px;
$filter-offset-with-search: 66px;
// Languages - used in: @include language($lang-german) { ... }
$lang-english: 'en';
$lang-french: 'fr-FR';
$lang-german: 'de-DE';
$lang-italian: 'it-IT';
$lang-spanish: 'es-MX';
$lang-chinese: 'zh-CN';
// ----------------------------------------------------------------
// Easing - Taken from Bourbon (http://bourbon.io/docs/#animation)
// EASE IN
$ease-in-quad: cubic-bezier(0.55, 0.085, 0.68, 0.53);
$ease-in-cubic: cubic-bezier(0.55, 0.055, 0.675, 0.19);
$ease-in-quart: cubic-bezier(0.895, 0.03, 0.685, 0.22);
$ease-in-quint: cubic-bezier(0.755, 0.05, 0.855, 0.06);
$ease-in-sine: cubic-bezier(0.47, 0, 0.745, 0.715);
$ease-in-expo: cubic-bezier(0.95, 0.05, 0.795, 0.035);
$ease-in-circ: cubic-bezier(0.6, 0.04, 0.98, 0.335);
$ease-in-back: cubic-bezier(0.6, -0.28, 0.735, 0.045);
// EASE OUT
$ease-out-quad: cubic-bezier(0.25, 0.46, 0.45, 0.94);
$ease-out-cubic: cubic-bezier(0.215, 0.61, 0.355, 1);
$ease-out-quart: cubic-bezier(0.165, 0.84, 0.44, 1);
$ease-out-quint: cubic-bezier(0.23, 1, 0.32, 1);
$ease-out-sine: cubic-bezier(0.39, 0.575, 0.565, 1);
$ease-out-expo: cubic-bezier(0.19, 1, 0.22, 1);
$ease-out-circ: cubic-bezier(0.075, 0.82, 0.165, 1);
$ease-out-back: cubic-bezier(0.175, 0.885, 0.32, 1.275);
// EASE IN OUT
$ease-in-out-quad: cubic-bezier(0.455, 0.03, 0.515, 0.955);
$ease-in-out-cubic: cubic-bezier(0.645, 0.045, 0.355, 1);
$ease-in-out-quart: cubic-bezier(0.77, 0, 0.175, 1);
$ease-in-out-quint: cubic-bezier(0.86, 0, 0.07, 1);
$ease-in-out-sine: cubic-bezier(0.445, 0.05, 0.55, 0.95);
$ease-in-out-expo: cubic-bezier(1, 0, 0, 1);
$ease-in-out-circ: cubic-bezier(0.785, 0.135, 0.15, 0.86);
$ease-in-out-back: cubic-bezier(0.68, -0.55, 0.265, 1.55);
// ----------------------------------------------------------------
// Results table specific
// Sticky columns offset
$table-col-height: 145px;
$table-col-height-deleted: 65px;
$table-sticky-cols-width: 796px;