{{/*
  spacing.css
  Eryn Wells <eryn@erynwells.me>
  vim: set sw=2 sts=2:
*/}}

{{- $base := (index . "Base") | default 1 -}}
{{- $unit := (index . "Unit") | default "rem" -}}
{{- $factor := (index . "Factor") | default 1.618 -}}
{{- $scale := partial "base/_size_scale.html" . }}





/***********
 # SPACING
 ***********/


:root {
  --space-base: {{ $base }}{{ $unit }};
{{- range $scale }}
  --space-{{ .Name }}: calc(var(--space-base) * pow({{ $factor }}, {{ .Value }}));
{{- end }}

  --fixed-space-base: 1rem;
{{- range $scale }}
  --fixed-space-{{ .Name }}: calc(var(--fixed-space-base) * pow({{ $factor }}, {{ .Value }}));
{{- end }}

  --space-paragraph: var(--space-m);
}


{{ range $scale }}
{{ printf "/* Spacing utility classes: %s */" .Name }}
.margin-block-start--{{ .Name }}  {  margin-block-start: var(--space-{{ .Name }}); }
.margin-block-end--{{ .Name }}    {    margin-block-end: var(--space-{{ .Name }}); }
.margin-inline-start--{{ .Name }} { margin-inline-start: var(--space-{{ .Name }}); }
.margin-inline-end--{{ .Name }}   {   margin-inline-end: var(--space-{{ .Name }}); }
{{ end }}


h1, h2, h3, h4, h5, h6 {
  margin-block: var(--space-l) var(--space-m);
}

hr {
  margin-block: var(--space-m);
}

main {
  margin-block-end: var(--space-xl);
}

p + p {
  margin-block-start: var(--space-paragraph);
}


/* Figures */

{{- $elementsWithXLBlockMargins := "blockquote, .figure--image, .codeblock, .highlight" -}}

p + :is({{ $elementsWithXLBlockMargins }}) {
    margin-block-start: var(--space-xl);
}

:is({{ $elementsWithXLBlockMargins }}):has(+ p) {
  margin-block-end: var(--space-xl);
}

.codeblock {
  --padding: var(--space-m);

  margin-inline: calc(-1 * var(--padding));
  padding: var(--padding);
}

.figure--image {
  --padding: var(--space-m);
  margin-inline-start: calc(-1 * var(--padding));
  width: calc(100% + 2 * var(--padding));

  figcaption {
    margin-inline: var(--padding);
  }
}

/* Blockquotes */

blockquote {
  --border-width: var(--space-xs);
  --inline-padding: var(--space-l);

  border-inline-start: var(--border-width) solid #eee;
  margin-inline: 0 var(--inline-padding);
  padding-inline-start: calc(var(--inline-padding) - var(--border-width));
}

/* Type size classes */

.title {
  margin-block-end: var(--space-l);
}

.subtitle {
  margin-block-start: 0;
}

.heading {
  margin-block-start: var(--space-l);
}

.heading:has(+ p) {
  margin-block-end: var(--space-xs);
}

.subheading {
}


.footnotes {
  hr {
    margin-block-start: var(--space-l);
  }

  li:not(:last-child) {
    margin-block-end: var(--space-xs);
  }
}