{% macro createcolor(name, value) %}
  .gogo-load-css .gogo-{{ name }} { color: {{ value }}; }
  .gogo-load-css .gogo-h-{{ name }}:hover, .gogo-h-{{ name }}.hover { color: {{ value }} !important; }
  .gogo-load-css .gogo-bg-{{ name }} { background-color: {{ value }} !important; }
{% endmacro %}

{% macro createBackgroung(name, bgdColor, textColor = null) %}
  {% if bgdColor %}
    {% if not textColor %}
      {% set textColor = tinycolor.mostReadable(bgdColor, [textDark, textLight]) %}
    {% endif %}
    {% set textSoftColor = tinycolor.mostReadable(bgdColor, [textDarkSoft, textLightSoft]) %}
    {% set name = name|replace(''', '"') %}
    .gogo-load-css .gogo-{{ name }} { background-color: {{ bgdColor }}; color: {{ textColor }}; }
    .gogo-load-css img.svg.gogo-{{ name }} { {{ textColor|to_css }} }
    .gogo-load-css .gogo-{{ name }} > img.svg { {{ textColor|to_css }} }
    .gogo-load-css .gogo-{{ name }}.gogo-color-soft { color: {{ textSoftColor }} }
    .gogo-load-css .gogo-{{ name }} .gogo-color-soft { color: {{ textSoftColor }} }
    .gogo-load-css .gogo-{{ name }} .gogo-color-link { color: {{ textSoftColor }} }
    .gogo-load-css .gogo-{{ name }} .gogo-color-link.active { color: {{ textColor }} }
    .gogo-load-css .gogo-{{ name }} .gogo-color-link.hover { color: {{ textColor }} }
    @media (max-width: 1100px) { .gogo-load-css .gogo-{{ name }} .gogo-color-link { color: {{ textColor }} } }
    .gogo-load-css .gogo-{{ name }} .gogo-color-link:hover { color: {{ textColor }}; cursor: pointer; }
  {% endif %}
{% endmacro %}

{# The following file generate styling accoring to GoGoCartoJS configuration #}

{% set textDark        = config.colors.textDark %}
{% set textDarkSoft    = config.colors.textDarkSoft %}
{% set textLight       = config.colors.textLight %}
{% set textLightSoft   = config.colors.textLightSoft %}

{% set contentBgd = config.colors.contentBackground %}
{% set text     = tinycolor.mostReadable(contentBgd, [textDark, textLight]) %}
{% set textSoft = tinycolor.mostReadable(contentBgd, [textDarkSoft, textLightSoft]) %}

{% set primary         = config.colors.primary %}
{% set secondary       = config.colors.secondary | default(primary) %}
{% set background      = config.colors.background %}

{% set mainFont  = config.fonts.mainFont %}
{% set titleFont = config.fonts.titleFont | default(mainFont) %}

{% set contentBackgroundElementBody = config.colors.contentBackgroundElementBody %}
{% set menuOptionHover = config.colors.menuOptionHover %}
{% set disabled           = config.colors.disabled %}
{% set lineBorder         = config.colors.lineBorder %}
{% set searchBar          = config.colors.searchBar          | default(primary) %}
{% set interactiveColor   = config.colors.interactiveSection | default(primary) %}
{% set pending            = config.colors.pending %}

<style>
  {# DESIGN #}
  {{ createBackgroung('section-content', contentBgd) }}
  {{ createBackgroung('section-contentBody', contentBackgroundElementBody) }}
  {{ createBackgroung('section-content-opposite', text) }}
  {{ createBackgroung('section-primary', primary) }}
  {{ createBackgroung('section-searchbar', searchBar) }}
  {{ createBackgroung('section-background', background) }}
  {{ createBackgroung('section-background', background) }}
  {{ createBackgroung('section-controls', config.colors.mapControlsBgd, config.colors.mapControls) }}
  {{ createcolor('primary', primary) }}
  {{ createcolor('neutral', text) }}

  {# TAXONOMY COLORS #}

  {# Default color #}
  {{ createBackgroung('bg-soft-color-as', config.marker.defaultColor) }}
  {{ createBackgroung('bg-color-as', config.marker.defaultColor) }}
  .gogo-load-css .gogo-color-as { color: {{ config.marker.defaultColor }}; }
  .gogo-load-css .gogo-border-color-as { border-color: {{ config.marker.defaultColor }}; }

  {% for option in optionList %}
     {% if option.icon or option.color %}
      {# if no softColor, softcolor equals color #}
      {% set softColor = option.softColor if option.softColor else option.color %}
      {% set name = "bg-color-as[option-id='" ~ option.id ~ "']" %}
      {{ createBackgroung(name|safe, option.color) }}
      {% set name = "bg-soft-color-as[option-id='" ~ option.id ~ "']" %}
      {{ createBackgroung(name|safe, softColor) }}
      {% if option.color %}
        .gogo-load-css .gogo-color-as[option-id="{{ option.id }}"] { color: {{ option.color }} }
        .gogo-load-css img.svg.gogo-color-as[option-id="{{ option.id }}"] { {{ option.color|to_css }} }
        .gogo-load-css .gogo-border-color-as[option-id="{{ option.id }}"] { border-color: {{ option.color }} }
      {% endif %}
    {% endif %}
  {% endfor %}

  .gogo-load-css .pending { color: {{ pending }} !important; }
  .gogo-load-css .pending.gogo-bg-soft-color-as, .gogo-load-css .pending.gogo-bg-color-as  {
    background-color: {{ pending }} !important;
    color: {{ tinycolor.mostReadable(pending, [textDarkSoft, textLightSoft]) }} !important;
  }

  {% if config.colors.infoBarMenu %}
    {{ createBackgroung('section-infobar-menu.menu-element', config.colors.infoBarMenu) }}
  {% endif %}
</style>

{% include 'styles/general.html.njk' %}
{% include 'styles/element-info-bar.html.njk' %}
{% include 'styles/list.html.njk' %}
{% include 'styles/menu-filters.html.njk' %}
{% include 'styles/search-bar.html.njk' %}
{% include 'styles/map.html.njk' %}

{# THEMES #}
{% include 'styles/themes/' ~ config.theme ~ '.html.njk' ignore missing %}