@use 'sass:map';

// Spacing
$spacer: 0.5rem !default; // 1 unit - 8px - 0.5rem
/* prettier-ignore */
$rhythm: (
  0: 0,
  .25: ($spacer * .25), //   .25 unit -   2px -   .125 rem
  .5: ($spacer * .5),   //   .5  unit -   4px -   .25  rem
  1: $spacer,           //  1    unit -   8px -   .5   rem
  1.5: ($spacer * 1.5), //  1.5  unit -  12px -   .75  rem
  2: ($spacer * 2),     //  2    unit -  16px -  1     rem
  3: ($spacer * 3),     //  3    unit -  24px -  1.5   rem
  3.5: ($spacer * 3.5), //  3.5  unit -  28px -  1.75   rem
  4: ($spacer * 4),     //  4    unit -  32px -  2     rem
  5: ($spacer * 5),     //  5    unit -  40px -  2.5   rem
  6: ($spacer * 6),     //  6    unit -  48px -  3     rem
  7: ($spacer * 7),     //  7    unit -  56px -  3.5   rem
  8: ($spacer * 8),     //  8    unit -  64px -  4     rem
  9: ($spacer * 9),     //  9    unit -  72px -  4.5   rem
  10: ($spacer * 10),   //  10   unit -  80px -  5     rem
  12: ($spacer * 12),   //  12   unit -  96px -  6     rem
  16: ($spacer * 16),   //  16   unit - 128px -  8     rem
  20: ($spacer * 20),   //  20   unit - 160px - 10     rem
  24: ($spacer * 24),   //  24   unit - 192px - 12     rem
  26: ($spacer * 26),   //  26   unit - 208px - 13     rem
  28: ($spacer * 28),   //  28   unit - 224px - 14     rem
  32: ($spacer * 32),   //  32   unit - 256px - 16     rem
  40: ($spacer * 40),   //  40   unit - 320px - 20     rem
  48: ($spacer * 48),   //  48   unit - 384px - 24     rem
  56: ($spacer * 56),   //  56   unit - 448px - 28     rem
  64: ($spacer * 64),   //  64   unit - 512px - 32     rem
) !default;

@function rhythm($spacer-size) {
  @return map.get($rhythm, $spacer-size);
}

@function rhythmRatio($spacer-size, $ratio) {
  @return map.get($rhythm, $spacer-size) / $ratio;
}

$border-radius-default: rhythm(0.5) !default;
$border-radius-container: rhythm(1) !default;

// layout
$size-viewport-medium-max: 599px !default;
$size-viewport-medium-min: 600px !default;
$size-viewport-large-max: 1023px !default;
$size-viewport-large-min: 1024px !default;
$size-viewport-xlarge-max: 1439px !default;
$size-viewport-xlarge-min: 1440px !default;

$grid-cols: 12 !default;
$grid-gutters: 12px !default;

// distribute: define the space between blocks of content inside the main container
$distribute-xsmall-viewport-all: rhythm(2) !default;
$distribute-small-viewport-all: rhythm(3) !default;
$distribute-medium-viewport-small: rhythm(4) !default;
$distribute-large-viewport-small: rhythm(5) !default;
$distribute-medium-viewport-medium: rhythm(6) !default;
$distribute-large-viewport-medium: rhythm(10) !default;

// headings spacing
$margin-bottom-title: rhythm(3) !default;
$margin-bottom-paragraph: rhythm(1.5) !default;

// Side panel and dock:
$width-side-panel: rhythm(40) !default;
$width-dock: rhythm(9) !default;