{% block block_slide_in%}
{% set element = block.slots.getSlot('slideIn') %}
{% set columns = 1 %}
{% set config = element.fieldConfig.elements %}
{% set textBoxStyle = '' %}
{% if config.styles.value|length > 0 %}
{% for property, value in config.styles.value %}
{% set textBoxStyle = textBoxStyle ~ (property | filterProperty(value)) %}
{% endfor %}
{% endif %}
{% if config.enableBorder.value %}
{% set textBoxStyle = textBoxStyle ~ ";border-style: solid" %}
{% if element.config.borderColor.value %}
{% set textBoxStyle = textBoxStyle ~ ";border-color: " ~ element.config.borderColor.value %}
{% endif %}
{% if element.config.borderWidth.value %}
{% set textBoxStyle = textBoxStyle ~ ";border-width: " ~ element.config.borderWidth.value %}
{% endif %}
{% endif %}
{% set slideInPluginOptions = {
enableCookie: element.config.enableCookie.value,
cmsElementId: element.id
} %}
<div class="{% if element.config.animation.value is not null %} animated slow {% endif %} slide-in-box-vertical-position__{{ config.verticalPosition.value ?? 'bottom' }} slide-in-box-horizontal-position__{{ config.horizontalPosition.value ?? 'right' }}"
data-loyxx-slide-in="true"
data-loyxx-slide-in-options="{{ slideInPluginOptions | json_encode }}"
data-cms-element-id="{{ element.id }}"
data-loyxx-enable-cookie="{{ element.config.enableCookie.value ? 1 : 0 }}"
{% if config.animation.value is not null %} data-entry-animation="{{ config.animation.value }}" {% endif %} style="{{ textBoxStyle }}">
<div class="slide-in-close" data-cms-element-id="{{ element.id }}" >
{% sw_icon 'x' style { 'size': 'sm', 'color': 'white' } %}
</div>
{% block block_slide_in_inner %}
{% sw_include "@Storefront/storefront/element/cms-element-" ~ element.type ~ ".html.twig" ignore missing %}
{% endblock %}
</div>
{% endblock %}