@use 'sass:math';
@use 'sass:map';
@use 'spacing.tokens';

// prettier-ignore
$extra-rhythm: (
  45: (spacing.$spacer * 45), //   45  unit -  360px - 22.5 rem
  72: (spacing.$spacer * 72), //   72  unit -  576px - 36   rem
  75: (spacing.$spacer * 75), //   75  unit -  600px - 37.5 rem
  100: (spacing.$spacer * 100), //  100  unit -  800px - 50   rem
  128: (spacing.$spacer * 128), //  128  unit - 1024px - 64   rem
  140: (spacing.$spacer * 140), //  140  unit - 1120px - 70   rem
  180: (spacing.$spacer * 180), //  180  unit - 1440px - 90   rem
);
@function extraRhythm($spacer-size) {
  @return map.get($extra-rhythm, $spacer-size);
}

$breakpoint-small: extraRhythm(45);
$breakpoint-medium: extraRhythm(75);
$breakpoint-large: extraRhythm(128);
$breakpoint-xlarge: extraRhythm(180);

$size-viewport-large-with-panel-min: 1344px;
$size-viewport-xlarge-with-panel-min: 1760px;

// In our formulas, some values must be without unit. To remove a unit from a value, we have to divide it by 1 unit.

// Remove unit from breakpoints
$width-breakpoint-small: math.div($breakpoint-small, 1rem);
$width-breakpoint-medium: math.div($breakpoint-medium, 1rem);
$width-breakpoint-large: math.div($breakpoint-large, 1rem);
$width-breakpoint-xlarge: math.div($breakpoint-xlarge, 1rem);

// Fixed margins value in rem without unit
$margin-small: math.div(spacing.rhythm(2), 1rem);
$margin-medium: math.div(spacing.rhythm(8), 1rem);

$margin-tight-large: math.div(spacing.rhythm(20), 1rem);
$margin-tight-xlarge: math.div(spacing.rhythm(40), 1rem);

$margin-wide-large: math.div(spacing.rhythm(10), 1rem);
$margin-wide-xlarge: math.div(spacing.rhythm(20), 1rem);

$max-width-container-tight-xlarge: math.div(extraRhythm(100), 1rem);
$max-width-container-wide-xlarge: math.div(extraRhythm(140), 1rem);

// Formula to compute side margin
// prettier-ignore
$margin-formula-small: calc(#{$margin-small}rem + #{$margin-medium - $margin-small} * ((100vw - #{$breakpoint-small}) / #{$width-breakpoint-medium - $width-breakpoint-small}));
// prettier-ignore
$margin-formula-tight-medium: calc(#{$margin-medium}rem + #{$margin-tight-large - $margin-medium} * ((100vw - #{$breakpoint-medium}) / #{$width-breakpoint-large - $width-breakpoint-medium}));
// prettier-ignore
$margin-formula-tight-large: calc(#{$margin-tight-large}rem + #{$margin-tight-xlarge - $margin-tight-large} * ((100vw - #{$breakpoint-large}) / #{$width-breakpoint-xlarge - $width-breakpoint-large}));
// prettier-ignore
$margin-formula-wide-medium: calc(#{$margin-medium}rem + #{$margin-wide-large - $margin-medium} * ((100vw - #{$breakpoint-medium}) / #{$width-breakpoint-large - $width-breakpoint-medium}));
// prettier-ignore
$margin-formula-wide-large: calc(#{$margin-wide-large}rem + #{$margin-wide-xlarge - $margin-wide-large} * ((100vw - #{$breakpoint-large}) / #{$width-breakpoint-xlarge - $width-breakpoint-large}));

// prettier-ignore
$width-formula-panel-plus-wide-medium: calc(100vw - #{spacing.$width-side-panel} - 2 * (#{$margin-medium}rem + #{$margin-wide-large - $margin-medium} * (((100vw - #{spacing.$width-side-panel}) - #{$breakpoint-medium}) / #{$width-breakpoint-large - $width-breakpoint-medium})));
// prettier-ignore
$width-formula-panel-plus-wide-large: calc(100vw - #{spacing.$width-side-panel} - 2 * (#{$margin-wide-large}rem + #{$margin-wide-xlarge - $margin-wide-large} * (((100vw - #{spacing.$width-side-panel}) - #{$breakpoint-large}) / #{$width-breakpoint-xlarge - $width-breakpoint-large})));

// prettier-ignore
$width-formula-dock-plus-wide-medium: calc(100vw - #{spacing.$width-dock} - 2 * (#{$margin-medium}rem + #{$margin-wide-large - $margin-medium} * (((100vw - #{spacing.$width-dock}) - #{$breakpoint-medium}) / #{$width-breakpoint-large - $width-breakpoint-medium})));
// prettier-ignore
$width-formula-dock-plus-wide-large: calc(100vw - #{spacing.$width-dock} - 2 * (#{$margin-wide-large}rem + #{$margin-wide-xlarge - $margin-wide-large} * (((100vw - #{spacing.$width-dock}) - #{$breakpoint-large}) / #{$width-breakpoint-xlarge - $width-breakpoint-large})));
// Tight compact max-width:
$max-width-tight-compact: extraRhythm(72);