{# API #}
{%- set props = props | default([]) -%}
{%- set _direction = props.direction | default('vertical') -%}
{%- set _isScrollbarDisabled = props.isScrollbarDisabled | default(false) -%}
{%- set _overflowDecorators = props.overflowDecorators | default('shadows') -%}

{# Class names #}
{%- set _contentClassName = _spiritClassPrefix ~ 'ScrollView__content' -%}
{%- set _overflowDecoratorsClassName = _spiritClassPrefix ~ 'ScrollView__overflowDecorators' -%}
{%- set _overflowDecoratorsShadowsClassName = _overflowDecorators in ['shadows', 'both'] ? _spiritClassPrefix ~ 'ScrollView__overflowDecorators--shadows' : null -%}
{%- set _overflowDecoratorsBordersClassName = _overflowDecorators in ['borders', 'both'] ? _spiritClassPrefix ~ 'ScrollView__overflowDecorators--borders' : null -%}
{%- set _rootClassName = _spiritClassPrefix ~ 'ScrollView' -%}
{%- set _rootDirectionClassName = _spiritClassPrefix ~ 'ScrollView--' ~ _direction -%}
{%- set _rootScrollbarDisabledClassName = _isScrollbarDisabled ? _spiritClassPrefix ~ 'ScrollView--scrollbarDisabled' : '' -%}
{%- set _viewportClassName = _spiritClassPrefix ~ 'ScrollView__viewport' -%}

{# Miscellaneous #}
{%- set _styleProps = useStyleProps(props) -%}
{%- set _classNames = [ _rootClassName, _rootDirectionClassName, _rootScrollbarDisabledClassName, _styleProps.className ] -%}
{%- set _overflowDecoratorsClassNames = [ _overflowDecoratorsClassName, _overflowDecoratorsShadowsClassName, _overflowDecoratorsBordersClassName ] -%}
{%- set _mainPropsWithoutReservedAttributes = props | filter((value, prop) => prop is not same as('data-spirit-direction')) -%}

<div
    {{ mainProps(_mainPropsWithoutReservedAttributes) }}
    {{ styleProp(_styleProps) }}
    {{ classProp(_classNames) }}
    data-spirit-direction="{{ _direction }}"
>
    <div class="{{ _viewportClassName }}" data-spirit-element="viewport">
        <div class="{{ _contentClassName }}" data-spirit-element="content">

            {%- block content %}{% endblock -%}

        </div>
    </div>
    <div {{ classProp(_overflowDecoratorsClassNames) }} aria-hidden="true"></div>
</div>
