@use 'sass:math';
// Global variables.
// Module settings
$breakpoint: (
  'to ems': true,
);

// Font families used across the site.
$font-body: 'Google Sans Text', Arial, Helvetica, sans-serif;
$font-google-sans: 'Google Sans', $font-body;
$font-mono: 'Google Sans Mono', monospace;
$font-weight-normal: 400;
$font-weight-bold: 700;

// Base font size to be used for calculations.
$base-font-size: 16px;

// Default spacing between elements following the normal flow.
$rhythm: 1.5rem;

// Breakpoints for tech detail page.
$bkpt-article--2-cols: 840px;
$bkpt-article--landing: 881px;
$bkpt-article--3-cols: 1073px;

// Articles
$bkpt-articles--2-cols: 840px;
$bkpt-articles--3-cols: 1000px;

// Anchor colors
$anchor-color--default: var(--blue-700);
$anchor-color--hover: var(--blue-900);
$anchor-color--visited: var(--purple-900);

//Header
$bkpt-lang-headers: (
  'en': 958px,
  'es': 926px,
);

//Landings
$content-max-width: pxRem(1440px);
$bkpt-landing--large: 1024px;

// Wrapper
$wrapper-content-max-width: pxRem(1600px);

$wrapper-max-width: 1440px;
$wrapper-scaler: math.div(math.div($wrapper-max-width, 100), 1vw);

$wrapper-block-spacing-s: 8.25rem;
$wrapper-block-spacing-l: 10.5rem;
$wrapper-inline-spacing-s: 1.5rem;
$wrapper-inline-spacing-l: 5rem;

$wrapper-bumper-s: 0.875rem;
$wrapper-bumper-l: 1.25rem;

$wrapper-block-spacing-m: math.div(
  ($wrapper-block-spacing-l + $wrapper-block-spacing-s),
  2
);
$wrapper-inline-spacing-m: math.div(
  ($wrapper-inline-spacing-l + $wrapper-inline-spacing-s),
  2
);
$wrapper-bumper-m: math.div(($wrapper-bumper-l + $wrapper-bumper-s), 2);

$wrapper-block-spacing-r: clamp(
  $wrapper-block-spacing-s,
  (math.div($wrapper-block-spacing-l, 1rem) * math.div(16px, $wrapper-scaler)),
  $wrapper-block-spacing-l
);
$wrapper-inline-spacing-r: clamp(
  $wrapper-inline-spacing-s,
  (math.div($wrapper-inline-spacing-l, 1rem) * math.div(16px, $wrapper-scaler)),
  $wrapper-inline-spacing-l
);
$wrapper-bumper-r: clamp(
  $wrapper-bumper-s,
  (math.div($wrapper-bumper-l, 1rem) * math.div(16px, $wrapper-scaler)),
  $wrapper-bumper-l
);
