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

///////////////////////////////////////////////////////////////////////////////
// Default theme variables
// Supposed to reflect the style guide of the storefront
///////////////////////////////////////////////////////////////////////////////
// NOTE
// The b2c theme styling is based on CSS custom properties.
// The actual default values for the variables are defined in `properties.scss`.
// See [Configurable Theme documentation](./docs/guides/themes.md#configurable-theme) for more information.
///////////////////////////////////////////////////////////////////////////////

// Logos
$logo: var(--logo);
$logo-width: var(--logo-width);
$logo-height: var(--logo-height);
$logo-mobile: var(--logo-mobile);
$logo-mobile-width: var(--logo-mobile-width);
$logo-mobile-height: var(--logo-mobile-height);

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

// Fonts
$font-family-regular: var(--font-family-regular);
$font-family-bold: var(--font-family-bold);
$font-family-condensedregular: var(--font-family-condensedregular);
$font-family-condensedbold: var(--font-family-condensedbold);

// 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: var(--corporate-primary);
$CORPORATE-SECONDARY: var(--corporate-secondary);
$CORPORATE-LIGHT: var(--corporate-light);
$CORPORATE-DARK: var(--corporate-dark);
$CORPORATE-SHADOW: var(--corporate-shadow);

// General colors
$color-primary: var(--color-primary);
$color-secondary: var(--color-secondary);
$color-tertiary: var(--color-tertiary);
$color-quaternary: var(--color-quaternary);

$color-dark: #000;
$color-inverse: #fff;

$color-special-error: #c00;
$color-special-warning: #f39c12;
$color-special-info: #006b99;
$color-special-success: #3c7d3c;

// Product label colors
$color-special-sale: #ea1919;
$color-special-topseller: #cf00a5;
$color-special-new: #06f;

// Text colors
$text-color-corporate: var(--text-color-corporate);
$text-color-primary: var(--text-color-primary);
$text-color-secondary: var(--text-color-secondary);
$text-color-tertiary: var(--text-color-tertiary);
$text-color-quaternary: var(--text-color-quaternary);
$text-color-quinary: var(--text-color-quinary);
$text-color-inverse: #fff;
$text-color-special: #ea1919;

// Backgrounds
$bg-color-corporate: $CORPORATE-PRIMARY;

// Borders
$border-color-corporate: $CORPORATE-PRIMARY;
$border-color-default: $color-primary;
$border-color-light: #ccc;
$border-color-lighter: #ddd;

$border-width-default: 1px;

// Header measurements
$top-header-height: 40px;
$header-height-mobile: 55px;
$search-container-height: 38px;

// Mobile toggler width
$toggler-width: 64px;

// 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: #f7f7f7;
$gray-300: #dee2e6;
$gray-400: #8b8b8b;
$gray-500: #757575;
$gray-600: #6c757d;
$gray-700: #495057;
$gray-800: #343a40;
$gray-900: #212529;
$black: #000;

$danger: $color-special-error;
$warning: $color-special-warning;
$info: $color-special-info;
$success: $color-special-success;

// NOTE: these few variables cannot be set with CSS custom properties
// since they are used for Bootstrap internal color calculations
// if necessary such Bootstrap generated styles need to be overridden in project styles (e.g. see buttons.scss)
$primary: #006f6f;
$secondary: color.adjust($primary, $lightness: -10%);
$body-bg: $white;
$body-color: #222;
$link-color: $primary;
$link-hover-color: $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;
$body-tertiary-bg: $gray-200; // bg for input group text
$input-group-addon-border-color: $gray-500;

// 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.
// 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;

///////////////////////////////////////////////////////////////////////////////
// Customized ng-select default variables
///////////////////////////////////////////////////////////////////////////////
$ng-select-border: $gray-500;
$ng-select-border-radius: 0;