@use 'sass:math';

// Typographic scale settings
$ms-ratio: math.div(16, 14) !default;
$sp-unit-ratio: 0.5 !default;

// Baseline grid settings
$sp-unit: 1rem * $sp-unit-ratio !default;

// Main spacing variables. spv stands spacing-vertical; sph stands for spacing-horizontal.

$spv--x-small: $sp-unit * 0.5 !default;
$spv--small: $sp-unit !default;
$spv--medium: $sp-unit * 1.5 !default;
$spv--large: $sp-unit * 2;
$spv--x-large: $sp-unit * 3 !default;
$spv--strip-shallow: $sp-unit * 3 !default;
$spv--strip-regular: $sp-unit * 8 !default;
$spv--strip-deep: $sp-unit * 16 !default;

$sph--x-small: $sp-unit * 0.5 !default; // to be used in place of an inline space between characters/words
$sph--small: $sp-unit !default;
$sph--large: $sp-unit * 2 !default;
$sph--x-large: $sp-unit * 3 !default;

// Typography settings - per-level configuration maps
// Each settings map contains: nudge, line-height, font-size, sp-after, and sp-before (font-weight handled separately)
// Font sizes are unitless because the typography definitions append rem when emitting them.
//
// About `nudge`
// -------------
// `nudge` is the top padding that drops the first text baseline onto the baseline grid.
// A browser centres the font's content box in the line box, so the first baseline sits at:
//
//   baseline-offset = line-height / 2 + font-size * (ascent - abs(descent)) / (2 * units-per-em)
//
// and `nudge` is the distance from there up to the next multiple of $sp-unit. It is therefore a
// function of four things: the font's vertical metrics, font-size, line-height and $sp-unit.
// Change any one of them and the nudge must be recalculated - it cannot be carried over.
//
// Nudges are also tied to the font binary, not just to the typeface. Vanilla loads
// 'Ubuntu variable' v0.869 (ascent 932, descent -189); the values below are generated against the
// current Ubuntu Sans v1.006 release (ascent 940, descent -260), whose vertical metrics were
// re-cut. The outlines are identical. The resulting first-baseline error is under a pixel at every
// level. Regenerate when the webfont is updated.

// Nudges as generated by @lyubomir-popov/baseline-nudge-generator from Ubuntu Sans metrics.
// Levels sharing a font-size/line-height pair share a nudge.
//
// Font sizes are steps on the Mortensen modular scale, f(i) = 1rem * pow(2, i / 5):
// display i=12 (84px), display-mobile i=10 (64px), h1/h2 i=7 (42px), h3/h4 i=3 (24px),
// h5/h6/p i=0 (16px), small i=-1 (14px), x-small i=-2 (12px). display sits exactly one
// octave above h1.
//
// h1/h2 carry an extra baseline unit: at 2.625rem in a 3rem line box the content area almost fills
// the line box, so the generated nudge is ~1px and the cap sits closer to preceding content than
// body text does. The extra unit does not change the occupied block, because margin-bottom is
// derived as sp-after - nudge.
//
// `small` is the one level whose line-height is not a whole multiple of $sp-unit: 14px text needs
// 20px of leading, which is 2.5 units. Its nudge is generated on the 0.25rem sub-grid instead, so
// alternate lines of small text land on the main grid.
$nudge-h1: 0.06881rem + $sp-unit !default; // h1, h2: 2.625rem / 3rem
$nudge-h1-mobile: 0.03875rem + $sp-unit !default; // h1, h2 below $breakpoint-heading-threshold: 2rem / 2.5rem
$nudge-h3: 0.46917rem !default; // h3, h4: 1.5rem / 2rem
$nudge-body: 0.41rem !default; // h5, h6, p, default text: 1rem / 1.5rem
$nudge-display: 0.1644rem !default; // display: 5.25rem / 6rem
$nudge-display-mobile: 0.34313rem !default; // display-mobile: 4rem / 4.5rem
$nudge-small: 0.0775rem !default; // small: 0.875rem / 1.25rem, on the 0.25rem sub-grid
$nudge-x-small: 0.245rem !default; // x-small: 0.75rem / 1rem

$settings-text-display: (
  nudge: $nudge-display,
  line-height: 12 * $sp-unit,
  font-size: 5.25,
  sp-after: $spv--x-large,
  sp-before: 0,
) !default;

$settings-text-display-mobile: (
  nudge: $nudge-display-mobile,
  line-height: 9 * $sp-unit,
  font-size: 4,
  sp-after: $spv--x-large,
  sp-before: 0,
) !default;

$settings-text-h1: (
  nudge: $nudge-h1,
  line-height: 6 * $sp-unit,
  font-size: 2.625,
  sp-after: $spv--x-large,
  sp-before: $spv--x-large,
) !default;

$settings-text-h1-large: (
  nudge: $nudge-h1,
  line-height: 6 * $sp-unit,
  font-size: 2.625,
  sp-after: $spv--x-large,
  sp-before: $spv--x-large,
) !default;

$settings-text-h1-mobile: (
  nudge: $nudge-h1-mobile,
  line-height: 5 * $sp-unit,
  font-size: 2,
  sp-after: $spv--x-large,
  sp-before: $spv--x-large,
) !default;

$settings-text-h2: (
  nudge: $nudge-h1,
  line-height: 6 * $sp-unit,
  font-size: 2.625,
  sp-after: $spv--x-large,
  sp-before: $spv--x-large,
) !default;

$settings-text-h2-large: (
  nudge: $nudge-h1,
  line-height: 6 * $sp-unit,
  font-size: 2.625,
  sp-after: $spv--x-large,
  sp-before: $spv--x-large,
) !default;

$settings-text-h2-mobile: (
  nudge: $nudge-h1-mobile,
  line-height: 5 * $sp-unit,
  font-size: 2,
  sp-after: $spv--x-large,
  sp-before: $spv--x-large,
) !default;

$settings-text-h3: (
  nudge: $nudge-h3,
  line-height: 4 * $sp-unit,
  font-size: 1.5,
  sp-after: $spv--x-large,
  sp-before: $spv--x-large,
) !default;

$settings-text-h3-large: (
  nudge: $nudge-h3,
  line-height: 4 * $sp-unit,
  font-size: 1.5,
  sp-after: $spv--x-large,
  sp-before: $spv--x-large,
) !default;

$settings-text-h3-mobile: (
  nudge: $nudge-h3,
  line-height: 4 * $sp-unit,
  font-size: 1.5,
  sp-after: $spv--x-large,
  sp-before: $spv--x-large,
) !default;

$settings-text-h4: (
  nudge: $nudge-h3,
  line-height: 4 * $sp-unit,
  font-size: 1.5,
  sp-after: $spv--x-large,
  sp-before: $spv--x-large,
) !default;

$settings-text-h4-large: (
  nudge: $nudge-h3,
  line-height: 4 * $sp-unit,
  font-size: 1.5,
  sp-after: $spv--x-large,
  sp-before: $spv--x-large,
) !default;

$settings-text-h4-mobile: (
  nudge: $nudge-h3,
  line-height: 4 * $sp-unit,
  font-size: 1.5,
  sp-after: $spv--x-large,
  sp-before: $spv--x-large,
) !default;

$settings-text-h5: (
  nudge: $nudge-body,
  line-height: 3 * $sp-unit,
  font-size: 1,
  sp-after: $spv--x-large,
  sp-before: $spv--x-large,
) !default;

$settings-text-h5-large: (
  nudge: $nudge-body,
  line-height: 3 * $sp-unit,
  font-size: 1,
  sp-after: $spv--x-large,
  sp-before: $spv--x-large,
) !default;

$settings-text-h5-mobile: (
  nudge: $nudge-body,
  line-height: 3 * $sp-unit,
  font-size: 1,
  sp-after: $spv--x-large,
  sp-before: $spv--x-large,
) !default;

$settings-text-h6: (
  nudge: $nudge-body,
  line-height: 3 * $sp-unit,
  font-size: 1,
  sp-after: $spv--x-large,
  sp-before: $spv--x-large,
) !default;

$settings-text-h6-large: (
  nudge: $nudge-body,
  line-height: 3 * $sp-unit,
  font-size: 1,
  sp-after: $spv--x-large,
  sp-before: $spv--x-large,
) !default;

$settings-text-h6-mobile: (
  nudge: $nudge-body,
  line-height: 3 * $sp-unit,
  font-size: 1,
  sp-after: $spv--x-large,
  sp-before: $spv--x-large,
) !default;

$settings-text-p: (
  nudge: $nudge-body,
  line-height: 3 * $sp-unit,
  font-size: 1,
  sp-after: $spv--x-large,
  sp-before: 0,
) !default;

$settings-text-small: (
  nudge: $nudge-small,
  line-height: 2.5 * $sp-unit,
  font-size: 0.875,
  sp-after: $spv--large,
  sp-before: $spv--x-large,
) !default;

$settings-text-small-dense: (
  nudge: $nudge-small,
  line-height: 2.5 * $sp-unit,
  font-size: 0.875,
  sp-after: $spv--large,
  sp-before: $spv--x-large,
) !default;

$settings-text-x-small: (
  nudge: $nudge-x-small,
  line-height: 2 * $sp-unit,
  font-size: 0.75,
  sp-after: $spv--large,
  sp-before: 0,
) !default;

$settings-text-default: (
  nudge: $nudge-body,
  line-height: 3 * $sp-unit,
  font-size: 1,
  sp-after: $sp-unit,
  sp-before: 0,
) !default;

// Legacy maps for backwards compatibility
$font-sizes: (
  display: map-get($settings-text-display, font-size),
  display-mobile: map-get($settings-text-display-mobile, font-size),
  h1: map-get($settings-text-h1, font-size),
  h1-large: map-get($settings-text-h1-large, font-size),
  h1-mobile: map-get($settings-text-h1-mobile, font-size),
  h2: map-get($settings-text-h2, font-size),
  h2-large: map-get($settings-text-h2-large, font-size),
  h2-mobile: map-get($settings-text-h2-mobile, font-size),
  h3: map-get($settings-text-h3, font-size),
  h3-large: map-get($settings-text-h3-large, font-size),
  h3-mobile: map-get($settings-text-h3-mobile, font-size),
  h4: map-get($settings-text-h4, font-size),
  h4-large: map-get($settings-text-h4-large, font-size),
  h4-mobile: map-get($settings-text-h4-mobile, font-size),
  h5: map-get($settings-text-h5, font-size),
  h5-large: map-get($settings-text-h5-large, font-size),
  h5-mobile: map-get($settings-text-h5-mobile, font-size),
  h6: map-get($settings-text-h6, font-size),
  h6-large: map-get($settings-text-h6-large, font-size),
  h6-mobile: map-get($settings-text-h6-mobile, font-size),
  default: map-get($settings-text-default, font-size),
  small: map-get($settings-text-small, font-size),
  x-small: map-get($settings-text-x-small, font-size),
) !default;

$line-heights: (
  display: map-get($settings-text-display, line-height),
  display-mobile: map-get($settings-text-display-mobile, line-height),
  h1: map-get($settings-text-h1, line-height),
  h1-large: map-get($settings-text-h1-large, line-height),
  h1-mobile: map-get($settings-text-h1-mobile, line-height),
  h2: map-get($settings-text-h2, line-height),
  h2-large: map-get($settings-text-h2-large, line-height),
  h2-mobile: map-get($settings-text-h2-mobile, line-height),
  h3: map-get($settings-text-h3, line-height),
  h3-large: map-get($settings-text-h3-large, line-height),
  h3-mobile: map-get($settings-text-h3-mobile, line-height),
  h4: map-get($settings-text-h4, line-height),
  h4-large: map-get($settings-text-h4-large, line-height),
  h4-mobile: map-get($settings-text-h4-mobile, line-height),
  h5: map-get($settings-text-h5, line-height),
  h5-large: map-get($settings-text-h5-large, line-height),
  h5-mobile: map-get($settings-text-h5-mobile, line-height),
  h6: map-get($settings-text-h6, line-height),
  h6-large: map-get($settings-text-h6-large, line-height),
  h6-mobile: map-get($settings-text-h6-mobile, line-height),
  default-text: map-get($settings-text-default, line-height),
  small: map-get($settings-text-small, line-height),
  x-small: map-get($settings-text-x-small, line-height),
) !default;

// baseline nudges for type scale ratio of (16/14)^2
$nudges: (
  display: map-get($settings-text-display, nudge),
  display-mobile: map-get($settings-text-display-mobile, nudge),
  h1-large: map-get($settings-text-h1, nudge),
  // fallback to h1 nudge
  h1-mobile: map-get($settings-text-h1-mobile, nudge),
  h1: map-get($settings-text-h1, nudge),
  h2: map-get($settings-text-h2, nudge),
  h2-mobile: map-get($settings-text-h2-mobile, nudge),
  h2-large: map-get($settings-text-h2, nudge),
  // fallback to h2 nudge
  h3: map-get($settings-text-h3, nudge),
  h3-mobile: map-get($settings-text-h3-mobile, nudge),
  h3-large: map-get($settings-text-h3, nudge),
  // fallback to h3 nudge
  h4-large: map-get($settings-text-h4, nudge),
  // fallback to h4 nudge
  h4: map-get($settings-text-h4, nudge),
  h4-mobile: map-get($settings-text-h4-mobile, nudge),
  h5: map-get($settings-text-h5, nudge),
  h5-large: map-get($settings-text-h5, nudge),
  // fallback to h5 nudge
  h5-mobile: map-get($settings-text-h5-mobile, nudge),
  h6: map-get($settings-text-h6, nudge),
  h6-mobile: map-get($settings-text-h6-mobile, nudge),
  h6-large: map-get($settings-text-h6, nudge),
  // fallback to h6 nudge
  p: map-get($settings-text-p, nudge),
  default: map-get($settings-text-default, nudge),
  // not currently used in Vanilla, kept for backwards compatibility
  p-ubuntumono: 0.45rem,
  // fallback
  small: map-get($settings-text-small, nudge),
  x-small: map-get($settings-text-x-small, nudge),
) !default;

$sp-after: (
  display: map-get($settings-text-display, sp-after),
  display-mobile: map-get($settings-text-display-mobile, sp-after),
  h1: map-get($settings-text-h1, sp-after),
  h1-large: map-get($settings-text-h1-large, sp-after),
  h1-mobile: map-get($settings-text-h1-mobile, sp-after),
  h2: map-get($settings-text-h2, sp-after),
  h2-large: map-get($settings-text-h2-large, sp-after),
  h2-mobile: map-get($settings-text-h2-mobile, sp-after),
  h3: map-get($settings-text-h3, sp-after),
  h3-large: map-get($settings-text-h3-large, sp-after),
  h3-mobile: map-get($settings-text-h3-mobile, sp-after),
  h4: map-get($settings-text-h4, sp-after),
  h4-large: map-get($settings-text-h4-large, sp-after),
  h4-mobile: map-get($settings-text-h4-mobile, sp-after),
  h5: map-get($settings-text-h5, sp-after),
  h5-large: map-get($settings-text-h5-large, sp-after),
  h5-mobile: map-get($settings-text-h5-mobile, sp-after),
  h6: map-get($settings-text-h6, sp-after),
  h6-large: map-get($settings-text-h6-large, sp-after),
  h6-mobile: map-get($settings-text-h6-mobile, sp-after),
  p: map-get($settings-text-p, sp-after),
  p-small-caps: map-get($settings-text-small, sp-after),
  p-dense: map-get($settings-text-small, sp-after),
  default-text: map-get($settings-text-default, sp-after),
  small: map-get($settings-text-small, sp-after),
  small--dense: map-get($settings-text-small, sp-after),
  x-small: map-get($settings-text-x-small, sp-after),
) !default;

// Correct baseline drift due to browser rounding. (Visible in text > 1000 lines)
// It is applied only to padding-top.
// DEPRECATED, will be removed in 4.0
$browser-rounding-compensations: (
  h1: 0,
  h2: 0,
  h3: 0,
  h4: 0,
  h5: 0,
  h6: 0,
  p: 0,
  small-largescreen: 0,
  small: 0,
) !default;

// commonly occuring calculations available as variables
$spv-nudge: map-get($settings-text-p, nudge) !default; // top: nudge; bottom: unit - nudge; result: height = exact multiple of base unit
$spv-nudge-compensation: $sp-unit - $spv-nudge !default;

// form input spacing variables
$input-margin-bottom: $sp-unit * 4 - $spv-nudge * 2;
$input-border-thickness: 1.5px;
$input-vertical-padding: calc($spv-nudge - $input-border-thickness);

// tick element variables
$form-tick-box-size: 1rem;
$form-tick-height: 0.375rem;
$form-tick-offset-top: 0.1875rem;
$form-tick-box-nudge: 0.15rem; // to nudge the tick box a bit below baseline (to correctly align with default text size)
$form-radio-inner-circle-diameter: 0.375rem;
$form-radio-circle-offset: 0.5 * ($form-tick-box-size - $form-radio-inner-circle-diameter);

$text-max-width: 40em !default;

$icon-sizes: (
  small: $sp-unit * 1.5,
  default: $sp-unit * 2,
  heading-icon--x-small: $sp-unit * 3,
  heading-icon--small: $sp-unit * 4,
  heading-icon: $sp-unit * 5,
  thumb: $sp-unit * 6,
  thumb--large: $sp-unit * 12,
) !default;

$default-icon-size: map-get($icon-sizes, default);

$table-cell-vertical-padding: $spv--small;

// generic units
$sp-xx-small: $sp-unit * 0.25 !default;
$sp-x-small: $sp-unit * 0.5 !default;
$sp-small: $sp-unit !default;
$sp-medium: $sp-unit * 2 !default;
$sp-large: $sp-unit * 3 !default;
$sp-x-large: $sp-unit * 4 !default;
$sp-xx-large: $sp-unit * 5 !default;
$sp-xxx-large: $sp-unit * 6 !default;
$sp-xxxx-large: $sp-unit * 8 !default;
$sp-xxxxx-large: $sp-unit * 12 !default; // anythng this large should be expressed as a sum of constituent heights. This is not currently used AFAIK  , consider removing for 3.0