@use 'sass:color';
@use 'sass:map';

///////////////////////////////////////////////////////////////////////////////
// DEFAULT THEME VARIABLES
// supposed to reflect the style guide of the storefront
///////////////////////////////////////////////////////////////////////////////

// LOGOS

$logo: url('/assets/themes/b2b/img/logo.svg');
$logo-width: 114px;
$logo-height: 40px;
$logo-mobile: url('/assets/themes/b2b/img/logo_mobile.svg');
$logo-mobile-width: 41px;
$logo-mobile-height: 41px;

// General spaces
$space-default: 15px;

// FONTS
$font-family-regular: 'robotoregular', 'Helvetica', 'Arial', sans-serif;
$font-family-bold: 'robotobold', 'Helvetica', 'Arial', sans-serif;
$font-family-condensedregular: 'roboto_condensedregular', 'Helvetica Neue', helvetica, 'Arial', sans-serif;
$font-family-condensedbold: 'roboto_condensedbold', 'Helvetica Neue', helvetica, 'Arial', sans-serif;

// FONT SIZES
$font-size-corporate: 0.875rem; // 14px is the bootstrap 3 default font size (1rem should be around 16px)

//CORPORATE DESIGN COLORS

$CORPORATE-PRIMARY: #006b99; // sea blue
$CORPORATE-SECONDARY: color.adjust($CORPORATE-PRIMARY, $lightness: -10%);
$CORPORATE-LIGHT: color.adjust($CORPORATE-PRIMARY, $lightness: 10%);
$CORPORATE-DARK: color.adjust($CORPORATE-PRIMARY, $lightness: -20%);
$CORPORATE-SHADOW: #7f9ecc80; // with alpha transparency

//TEXT COLORS

$text-color-corporate: $CORPORATE-PRIMARY;

$text-color-primary: #222;
$text-color-secondary: #6b6b6b;
$text-color-tertiary: #757575;
$text-color-quaternary: #8b8b8b;
$text-color-quinary: #eee;

$text-color-inverse: #fff;
$text-color-special: #ea1919; //RED

//GENERAL COLORS

$color-corporate: $CORPORATE-PRIMARY;

$color-primary: #222;
$color-secondary: #2c2d2e;
$color-tertiary: #eee;
$color-quaternary: #d5d5d5;

$color-dark: #000;
$color-inverse: #fff;
$color-special-primary: #c00; //RED
$color-special-secondary: #f39c12; //ORANGE
$color-special-tertiary: #006f6f; //DARK TURQUOISE
$color-special-quaternary: #3c7d3c; // GREEN

// colors for product label ribbons
$color-label-sale: #ea1919; // sale
$color-label-topseller: #cf00a5; // topseller
$color-label-new: #06f; // new

// BORDERS

$border-color-corporate: $color-corporate;

$border-color-default: #222;
$border-color-light: #ccc;
$border-color-lighter: #ddd;

$border-width-default: 1px;

// BUTTONS

// primary buttons
$button-primary-bg: $CORPORATE-PRIMARY;
$button-primary-border: $CORPORATE-PRIMARY;
$button-focus-box-shadow: $CORPORATE-SHADOW;

// default buttons
$button-default-color: $CORPORATE-PRIMARY;
$button-default-bg: #fff;
$button-default-border: $CORPORATE-PRIMARY;

// datepicker
$datepicker-border-radius: 15px;

$datepicker-today-bg: #ff9800;
$datepicker-today-hover: #e65100;

$datepicker-active-bg: $CORPORATE-PRIMARY;
$datepicker-active-hover: $CORPORATE-SECONDARY;

// input indicator color
$error-color: #dc3545;
$success-color: #28a745;

// mobile toggler base width
$toggler-width: 64px;

// Header
$top-header-height: 40px;
$header-height-mobile: 55px;

//search container
$search-container-height: 38px;

// Navigation
$font-size-navbar-item: $font-size-corporate * 1.25; // ~18px
$font-size-menu-item: $font-size-corporate * 1.05; // ~15px
$font-size-sub-menu-item: $font-size-corporate; // ~14px

$font-size-navbar-item-mobile: $font-size-corporate * 1.14; // ~16px
$font-size-menu-item-mobile: $font-size-corporate; // ~14px
$font-size-sub-menu-item-mobile: $font-size-corporate; // ~14px

// filter
$swatch-image-diameter: 28px;
$swatch-image-border-radius: 50%;
$swatch-image-padding-to-border: 2px;

// tables
$table-cell-padding: 0.75rem;
$table-bg: transparent;

// toasts
$toastViewBox: '0 0 512 512';
$toast-error-icon: '<path d="M256,0C114.6,0,0,114.6,0,256s114.6,256,256,256s256-114.6,256-256S397.4,0,256,0z M377,343c9.4,9.4,9.4,24.6,0,33.9c-4.7,4.7-10.8,7-17,7s-12.3-2.3-17-7l-87-87l-87,87c-4.7,4.7-10.8,7-17,7s-12.3-2.3-17-7c-9.4-9.4-9.4-24.6,0-33.9l87-87l-87-87c-9.4-9.4-9.4-24.6,0-33.9c9.4-9.4,24.6-9.4,33.9,0l87,87l87-87c9.4-9.4,24.6-9.4,33.9,0c9.4,9.4,9.4,24.6,0,33.9l-87,87L377,343z"/>';
$toast-warning-icon: '<path d="M7.5,14.967A7.467,7.467,0,1,0,.033,7.5,7.476,7.476,0,0,0,7.5,14.967Zm0-14A6.533,6.533,0,1,1,.967,7.5,6.54,6.54,0,0,1,7.5.967Z"/><circle cx="7.5" cy="11.5" r="0.5"/><path d="M8,8V3.5a.5.5,0,0,0-1,0V10H8Z"/>';
$toast-success-icon: '<path d="M437,75C388.7,26.6,324.4,0,256,0S123.3,26.6,75,75C26.6,123.3,0,187.6,0,256s26.6,132.7,75,181c48.4,48.4,112.6,75,181,75s132.7-26.6,181-75c48.4-48.4,75-112.6,75-181S485.4,123.3,437,75z M389,191L225,355c-4.5,4.5-10.6,7-17,7s-12.5-2.5-17-7l-68-68c-9.4-9.4-9.4-24.6,0-33.9c9.4-9.4,24.6-9.4,33.9,0l51,51l147-147c9.4-9.4,24.6-9.4,33.9,0C398.3,166.4,398.3,181.6,389,191z"/>';
$toast-info-icon: '<path d="M256,0C114.6,0,0,114.6,0,256s114.6,256,256,256s256-114.6,256-256S397.4,0,256,0z M280,400c0,13.3-10.7,24-24,24s-24-10.7-24-24V216c0-13.3,10.7-24,24-24s24,10.7,24,24V400z M256,160c-17.7,0-32-14.3-32-32s14.3-32,32-32c17.7,0,32,14.3,32,32S273.7,160,256,160z"/>';
/* stylelint-disable number-max-precision */
$toast-error-color: rgb(114 28 36 / 0.999999);
$toast-warning-color: rgb(133 100 4 / 0.999999);
$toast-success-color: rgb(21 87 36 / 0.999999);
$toast-info-color: rgb(12 84 96 / 0.999999);
/* stylelint-enable number-max-precision */

///////////////////////////////////////////////////////////////////////////////
// CUSTOMIZED BOOTSTRAP DEFAULT VARIABLES
// theme specific customization of Bootstrap variables
///////////////////////////////////////////////////////////////////////////////

// Color system

$white: #fff;
$gray-100: #f8f9fa;
$gray-200: #e9ecef;
$gray-300: #dee2e6;
$gray-400: #757575;
$gray-500: #adb5bd;
$gray-600: #6c757d;
$gray-700: #495057;
$gray-800: #343a40;
$gray-900: #212529;
$black: #000;

$primary: $CORPORATE-PRIMARY;
$secondary: $CORPORATE-SECONDARY;

$danger: $color-special-primary;
$warning: $color-special-secondary;
$info: $color-special-tertiary;
$success: $color-special-quaternary;

// Body
// Settings for the `<body>` element.

$body-bg: $white;
$body-color: $color-primary;

// Links
// Style anchor elements.

$link-color: $CORPORATE-PRIMARY;
$link-hover-color: $CORPORATE-SECONDARY;

// Components
// Define common padding and border radius sizes and more.

$border-radius: 0;
$border-radius-lg: 0;
$border-radius-sm: 0;

// Fonts
// Font, line-height, and color for body text, headings, and more.
$font-family-sans-serif: $font-family-regular;
$font-family-monospace: 'Menlo', 'Monaco', 'Consolas', 'Courier New', monospace;
$font-family-base: $font-family-regular;

$font-size-base: $font-size-corporate; // 14px is the bootstrap 3 default font size (1rem should be around 16px)
$font-size-sm: $font-size-base * 0.85; // ~12px

$h1-font-size: $font-size-base * 2.15; // ~30px
$h2-font-size: $font-size-base * 1.7; // ~24px
$h3-font-size: $font-size-base * 1.25; // ~18px
$h4-font-size: $font-size-base * 1.05; // ~15px
$h6-font-size: $font-size-base * 0.85; // ~12px

$headings-font-family: $font-family-condensedbold;
$headings-font-weight: normal;
$headings-line-height: 1.1;
$headings-color: $text-color-primary;

// Buttons + Forms
// Shared variables that are reassigned to `$input-` and `$btn-` specific variables.

// Forms
$input-placeholder-color: $text-color-tertiary;
$input-accent-color: $CORPORATE-DARK;
$body-tertiary-bg: $gray-200; // bg for input group text
$input-group-addon-border-color: $gray-400;

// Dropdown
// Dropdown menu container and contents.

$dropdown-border-color: $color-inverse;

// Grid breakpoints
// Define the minimum dimensions at which your layout will change,
// adapting to different screen sizes, for use in media queries.

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

// Grid columns
// Set the number of columns and specify the width of the gutters.
$grid-gutter-width: 30px;
// Container sizes

// Define the maximum width of `.container` for different screen sizes.
// to work well with our breakpoints the value for 'sm' needs to be the width of the next breakpoint
// and the value of 'md' needs to be larger than the one for 'sm'
$container-max-widths: (
  sm: 768px,
  md: 770px,
  lg: map.get($grid-breakpoints, lg) - $grid-gutter-width,
  xl: map.get($grid-breakpoints, xl) - $grid-gutter-width,
);
// Navbar
$navbar-padding-x: 0;
// Popovers
$popover-max-width: 310px;
$popover-border-color: rgb(0 0 0 / 0.2);
// Modals
$modal-content-border-color: rgb(0 0 0 / 0.2);
$modal-header-border-color: $border-color-light;
// Carousel
$carousel-control-color: $color-secondary;
$carousel-control-width: 5%;
$carousel-indicator-active-bg: $CORPORATE-PRIMARY;
// Close
$close-text-shadow: none;

// import ng-select default theme
$ng-select-border: $gray-400;
$ng-select-border-radius: 0;