@use "../../../../00-theme/00-base/01-helpers" as *;

////////////////////////////////////////////////////////////////////////////////
// *
// * Content block variables
// *
////////////////////////////////////////////////////////////////////////////////

:root {
  // -- Horizontal spacing:

  // spacing on the sides or between elements in a row.
  --gap-layout-hor: var(--gap-hor);

  // -- Vertical spacing:

  --gap-layout-vert: var(--gap-md);
  --gap-layout-vert-sm: var(--gap-sm);

  // space above and below certain elements: e.g. blocks with a bg
  // that change depending on breakpoint.
  --gap-layout-vert-base: #{rem(40)};
  --gap-layout-vert-top: var(--gap-layout-vert-base);
  --gap-layout-vert-bottom: var(--gap-layout-vert-base);

  // Overrides for Vertical spacing on layouts.
  //   This one is the same space we have between blocks in the same region === space between p-tags.
  --gap-layout-vert-minimal: var(--gap-layout-vert);
  //   This one is the same space as for the gap between teaser & next fields
  --gap-layout-vert-medium: calc(var(--gap-layout-vert) * 1.5);

  // -- Content blocks variables:

  // Cb inner spacing
  --gap-cb-inner-vert: var(--gap-layout-vert);
  --gap-cb-inner-hor: var(--gap-layout-hor);

  // Buttons spacing
  --gap-cb-buttons-vert: var(--gap-layout-vert);
  --gap-cb-button-hor: #{rem(10)};
  --gap-cb-button-vert: #{rem(10)};

  // Boxed variables
  --clr-cb-boxed-bg: var(--clr-gray-light-1);
  --gap-cb-boxed-vert: #{rem(40)};
  --gap-cb-boxed-hor: #{rem(40)};
}

// * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
// * Breakpoint: desktop & wider
// * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *

@include bp-md {
  :root {
    --gap-layout-vert-top: #{rem(50)};
    --gap-layout-vert-bottom: #{rem(50)};
  }
}

// * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
// * Breakpoint: large
// * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *

@include bp-lg {
  :root {
    --gap-layout-vert-top: #{rem(75)};
    --gap-layout-vert-bottom: #{rem(75)};
  }
}
