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 %}

    {% set oneway = attribute(tags, 'oneway:bicycle')|default(tags.oneway) %}
    {% if oneway == 'yes' %}
      {% set oneway = 1 %}
    {% elseif oneway == 'no' %}
      {% set oneway = 0 %}
    {% 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 oneway and tags.segregated == 'no' %}
      5,5,5,20
      {% elseif oneway %}
      25,10
      {% elseif tags.segregated == 'no' %}
      5,5
      {% endif %}

    dashOffset: |
      {% if oneway and tags.segregated == 'no' %}
      5
      {% elseif oneway %}
      10
      {% elseif tags.segregated == 'no' %}
      0
      {% endif %}

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

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

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

    pattern: |
      {% if oneway -%}
      arrowHead
      {%- endif %}

    pattern-repeat: |
      35

    pattern-offset: |
      {{ oneway == -1 ? 17 : 22 }}

    noClip: |
      {{ oneway != 0 }}

    pattern-polygon: true

    pattern-pixelSize: 9

    pattern-angleCorrection: |
      {{ oneway == -1 ? 180 : 0 }}

    pattern-path-color: |
      {{ const.types[type].color }}

    pattern-path-width: 0

    pattern-path-fillOpacity: 1

  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 oneway and tags.segregated == 'no' %}
      5,5,5,5,5,10
      {% elseif oneway %}
      25,10
      {% elseif tags.segregated == 'no' %}
      5,5
      {% endif %}

    dashOffset: |
      {% if oneway %}
      10
      {% elseif tags.segregated == 'no' %}
      5
      {% endif %}

    noClip: |
      {{ oneway != 0 }}

    lineCap: |
      {% if tags.segregated == 'no' or oneway %}
      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