query:
  (
  way[highway=cycleway];
  way[cyclestreet=yes];
  way[bicycle_road=yes];
  )
feature:
  pre: |
    {% set type = tags.highway %}

    {% if tags.cyclestreet == 'yes' %}
      {% set type = 'cyclestreet' %}
    {% elseif tags.bicycle_road in ['yes', 'designated'] %}
      {% set type = 'bicycle_road' %}
    {% endif %}

  styles: |
    {% if tags.segregated %}
    footway,
    {% endif %}
    default
  style:
    width: |
      {% if tags.segregated == 'yes' %}
      {{ const.types[type].width / 2 }}
      {% else %}
      {{ const.types[type].width }}
      {% endif %}

    dashArray: |
      {% if tags.segregated == 'no' %}
      5,5
      {% endif %}

    lineCap: |
      {% if tags.segregated == 'no' %}
      butt
      {% else %}
      round
      {% endif %}

    color: |
      {{ const.types[type].color }}

    offset: |
      {% if tags.segregated == 'yes' %}
      {{ const.types[type].width / 2 - 1 }}
      {% endif %}

  style:footway:
    color: |
      {{ const.types.footway.color }}

    width: |
      {% if tags.segregated == 'yes' %}
      {{ const.types.footway.width / 2 }}
      {% else %}
      {{ const.types.footway.width }}
      {% endif %}

    dashArray: |
      {% if tags.segregated == 'no' %}
      5,5
      {% endif %}

    dashOffset: 5

    lineCap: |
      {% if tags.segregated == 'no' %}
      butt
      {% else %}
      round
      {% endif %}

    offset: |
      {% if tags.segregated == 'yes' %}
      {{ (const.types.footway.width / 2 - 1) * -1 }}
      {% endif %}

  description: |
    {% if tags.cyclestreet == 'yes' %}
    {{ keyTrans('cyclestreet') }}
    {% elseif tags.bicycle_road in ['yes', 'designated'] %}
    {{ keyTrans('bicycle_road') }}
    {% elseif tags.segregated %}
    {{ tagTrans('highway', 'cycleway segregated=' ~ tags.segregated) }}
    {% elseif tags.highway %}
    {{ tagTrans('highway', tags.highway) }}
    {% endif %}

  markerSymbol: ''

const:
  types:
    cycleway:
      color: '#009f00'
      width: 4
    footway:
      color: '#ff9f00'
      width: 4
    cyclestreet:
      color: '#006f3f'
      width: 8
    bicycle_road:
      color: '#006f4f'
      width: 8