{% comment %}
  
  Usage:
    {% include themes.scss.liquid id=theme.id colors=theme.colors svg=theme.svg graph=theme.graph %}

  Parameters:
    * colors         (object) - collection of color values for css theming
    * svg            (object) - collection of color values for svg images
    * graph          (object) - collection of graph/size values for d3 graph

{% endcomment %}

// theme colors
[data-theme='{{ include.id }}'] {
  // logo images //
  
  --favicon-src: {{ include.src.favicon }};
  --logo-src: {{ include.src.logo }};
  --nav-burger-base: {{ include.src.nav_burger.base }};
  --nav-burger-bonsai: {{ include.src.nav_burger.bonsai }};

  // theme colors //

  // singles
  --selection-color: {{ include.colors.selection }};
  --body-background-color: {{ include.colors.background }};
  --box-shadow-color: {{ include.colors.shadow }};
  --body-text-color: {{ include.colors.text }};
  --small-heading-color: {{ include.colors.text_grey }};
  --accent-dark-color: {{ include.colors.accent_dark }};
  --accent-light-color: {{ include.colors.accent_light }};

  // link colors
  --link-color: {{ include.colors.link.web.valid }};
  --link-underline-color: {{ include.colors.link.web.underline }};
  --wiki-link-color: {{ include.colors.link.wiki.valid }};
  --wiki-link-underline-color: {{ include.colors.link.wiki.underline }};
  --invalid-wiki-link-color: {{ include.colors.link.wiki.invalid }};

  // svg colors //

  // bullets
  --bullet-link: {{ include.graph.link.color }};
  --bullet-node: {{ include.graph.node.visited.color }};

  // pencil

  // fill
  --pencil-fill-default: {{ include.svg.pencil.default }};
  --pencil-fill-blue: {{ include.svg.pencil.blue }};
  --pencil-fill-green: {{ include.svg.pencil.green }};
  --pencil-fill-red: {{ include.svg.pencil.red }};
  --pencil-fill-yellow: {{ include.svg.pencil.yellow }};
  // stroke
  --pencil-stroke-default: {{ include.svg.pencil.default }};
  --pencil-stroke-blue: {{ include.svg.pencil.blue }};
  --pencil-stroke-green: {{ include.svg.pencil.green }};
  --pencil-stroke-red: {{ include.svg.pencil.red }};
  --pencil-stroke-yellow: {{ include.svg.pencil.yellow }};

  // graph colors //

  // nodes
  //  glow
  --graph-node-current-glow: {{ include.graph.node.current }};
  --graph-node-tagged-glow: {{ include.graph.node.tagged }};
  --graph-node-visited-glow: {{ include.graph.node.visited.glow }};
  //  color
  --graph-node-stroke-color: {{ include.graph.node.stroke }};
  --graph-node-missing-color: {{ include.graph.node.missing }};
  --graph-node-unvisited-color: {{ include.graph.node.unvisited }};
  --graph-node-visited-color: {{ include.graph.node.visited.color }};
  
  // links
  --graph-link-color: {{ include.graph.link.color }};
  --graph-particles-color: {{ include.graph.particles.color }};
  
  // label text
  --graph-text-color: {{ include.graph.text.color }};
}