{#
/**
 * @file
 *   Sticky component.
 *
 * @param array $attr
 *   Custom attributes for the root element.
 * @param array $innner_attr
 *   Custom attributes for the inner element.
 *
 * @block $content
 *   Use this block to set the content of the sticky element.
 */
#}

{% set attributes =
  merge_html_attributes(
    attr ?? null,
    {
      data_component: 'Sticky',
      class: 'z-10 sticky top-0 w-full'
    }
  )
%}

{% set inner_attributes =
  merge_html_attributes(
    inner_attr ?? null,
    {
      data_ref: 'inner',
      class: 'transition duration-500 ease-out-expo'
    }
  )
%}

<div {{ html_attributes(attributes) }}>
  <div data-component="Sentinel" class="absolute bottom-full w-full h-px pointer-events-none"></div>
  <div {{ html_attributes(inner_attributes) }}>
    {% block content %}
      {{ content ?? '' }}
    {% endblock %}
  </div>
</div>