{# API #}
{%- set props = props | default([]) -%}
{%- set _elementType = props.elementType | default('div') -%}
{%- set _hasEndDivider = props.hasEndDivider | default(false) -%}
{%- set _hasIntermediateDividers = props.hasIntermediateDividers | default(false) -%}
{%- set _hasSpacing = props.hasSpacing | default(false) -%}
{%- set _hasStartDivider = props.hasStartDivider | default(false) -%}
{%- set _spacing = props.spacing | default(null) -%}

{# Class names #}
{%- set _rootClassName = _spiritClassPrefix ~ 'Stack' -%}
{%- set _rootBottomDividerClassName = _hasEndDivider ? _spiritClassPrefix ~ 'Stack--hasEndDivider' : null -%}
{%- set _rootMiddleDividersClassName = _hasIntermediateDividers ? _spiritClassPrefix ~ 'Stack--hasIntermediateDividers' : null -%}
{%- set _rootSpacingClassName = _hasSpacing or _spacing is not null ? _spiritClassPrefix ~ 'Stack--hasSpacing' : null -%}
{%- set _rootTopDividerClassName = _hasStartDivider ? _spiritClassPrefix ~ 'Stack--hasStartDivider' : null -%}

{# Miscellaneous #}
{%- set _styleProps = useStyleProps(props) -%}
{%- set _classNames = [
    _rootClassName,
    _rootBottomDividerClassName,
    _rootMiddleDividersClassName,
    _rootSpacingClassName,
    _rootTopDividerClassName,
    _styleProps.className,
] -%}

{%- set _style = '' -%}

{%- if _spacing is iterable -%}
    {%- for breakpoint, breakpointValue in _spacing -%}
        {%- set suffix = (breakpoint == 'mobile') ? '' : '-' ~ breakpoint -%}
        {%- set _style = _style ~ '--stack-spacing' ~ suffix ~ ': var(--spirit-' ~ breakpointValue ~ ');' -%}
    {%- endfor -%}
{%- elseif _spacing -%}
    {%- set _style = _style ~ '--stack-spacing: var(--spirit-' ~ _spacing ~ ');' -%}
{%- endif -%}

{# Attributes #}
{%- set _styleAttr = _style or (_styleProps.style is not same as(null)) ? 'style="' ~ _style ~ _styleProps.style | join() ~ '"' -%}

<{{ _elementType }} {{ mainProps(props) }} {{ classProp(_classNames) }} {{ _styleAttr | raw }}>
{%- block content %}{% endblock -%}
</{{ _elementType }}>
