{% comment %}
  Renders a full bleed overay
  @param {object} settings - Block or Section settings, expects `overlay_color`, `overlay_style`, `gradient_direction`
  @param {string} layer - The z-index layer to place the overlay on, defaults to var(--layer-flat)
{% endcomment %}

{% stylesheet %}
  .overlay {
    position: absolute;
    inset: 0;
    z-index: var(--overlay-layer);
    pointer-events: none;
    border-radius: var(--overlay-border-radius, 0px);
  }

  .overlay--solid {
    background: var(--overlay-color);
  }

  .overlay--gradient {
    background: linear-gradient(var(--overlay-direction), var(--overlay-color), var(--overlay-color--end));
  }
{% endstylesheet %}

<div
  class="overlay overlay--{{ settings.overlay_style | default: 'gradient' }}"
  style="
    --overlay-layer: {{ layer | default: 'var(--layer-flat)' }};
    --overlay-color: {{ settings.overlay_color | default: 'rgba(0,0,0,0.25)' }};
    --overlay-color--end: {{ settings.overlay_color | color_modify: 'alpha', 0 | default: 'rgba(0,0,0,0)' }};
    --overlay-direction: {{ settings.gradient_direction | default: 'to top' }};
    {%- if settings.border_radius %} --overlay-border-radius: {{ settings.border_radius | default: '0' }}px;{% endif -%}
  "
></div>
