{# Can't do any of this with arrays or macros because the Tailwind tree-shaker won't see any of the full classes. #}
{% set columns_mobile = behavior_mobile == 'scroll' ? false : behavior_mobile %}
{% set scroll_classes_mobile = [
  'hg:snap-x',
  'hg:snap-mandatory',
  'hg:overflow-x-auto',
  'hg:flex',
  'hg:flex-nowrap',
  'hg:justify-start',
  'hg:relative hg:left-1/2 hg:-translate-x-1/2 hg:w-screen',
]|join(' ') %}

{% set grid_classes_mobile = [
  columns_mobile ? 'logo-grid--grid-mobile logo-grid--columns-mobile-' ~ columns_mobile,
  'hg:grid',
  'hg:justify-stretch',
  'hg:items-stretch',
  'hg:grid-cols-[repeat(var(--hgc-columns-mobile),minmax(0,1fr))]'
]|join(' ') %}

{% set columns_tablet = behavior_tablet == 'scroll' ? false : behavior_tablet %}
{% set scroll_classes_tablet = [
  'hg:md:snap-x',
  'hg:md:snap-mandatory',
  'hg:md:overflow-x-auto',
  'hg:md:flex',
  'hg:md:flex-nowrap',
  'hg:md:justify-start',
  'hg:md:relative hg:md:left-1/2 hg:md:-translate-x-1/2 hg:md:w-screen',
]|join(' ') %}
{% set cancel_grid_classes_tablet = [
  'hg:md:max-w-[none]',
  'hg:md:mx-0',
  'hg:md:justify-[initial]',
  'hg:md:items-[initial]'
]|join(' ') %}

{% set grid_classes_tablet = [
  columns_tablet ? 'logo-grid--grid-tablet logo-grid--columns-tablet-' ~ columns_tablet,
  'hg:md:container',
  'hg:md:mx-auto',
  'hg:md:grid',
  'hg:md:justify-stretch',
  'hg:md:items-stretch',
  'hg:md:grid-cols-[repeat(var(--hgc-columns-tablet),minmax(0,1fr))]'
]|join(' ') %}
{% set cancel_scroll_classes_tablet = [
  'hg:md:overflow-x-visible',
  'hg:md:static hg:md:left-0 hg:md:-translate-x-0 hg:md:w-auto',
]|join(' ') %}

{% set columns_desktop = behavior_desktop == 'scroll' ? false : behavior_desktop %}
{% set scroll_classes_desktop = [
  'hg:xl:snap-x',
  'hg:xl:snap-mandatory',
  'hg:xl:overflow-x-auto',
  'hg:xl:flex',
  'hg:xl:flex-nowrap',
  'hg:xl:justify-start',
  'hg:xl:max-w-[none]',
  'hg:xl:relative hg:xl:left-1/2 hg:xl:-translate-x-1/2 hg:xl:w-screen',
]|join(' ') %}
{% set cancel_grid_classes_desktop = [
  'hg:xl:max-w-[none]',
  'hg:xl:mx-0',
  'hg:xl:justify-[initial]',
  'hg:xl:items-[initial]'
]|join(' ') %}

{% set grid_classes_desktop = [
  columns_desktop ? 'logo-grid--grid-desktop logo-grid--columns-desktop-' ~ columns_desktop,
  'hg:xl:container',
  'hg:xl:mx-auto',
  'hg:xl:grid',
  'hg:xl:justify-stretch',
  'hg:xl:items-stretch',
  'hg:xl:grid-cols-[repeat(var(--hgc-columns-desktop),minmax(0,1fr))]'
]|join(' ') %}
{% set cancel_scroll_classes_desktop = [
  'hg:xl:overflow-x-visible',
  'hg:xl:static hg:xl:left-0 hg:xl:-translate-x-0 hg:xl:w-auto',
]|join(' ') %}

{% set classes = [
  'logo-grid hg:gap-3 hg:min-w-[100%]',
  columns_mobile ? grid_classes_mobile : scroll_classes_mobile,
  columns_tablet ? grid_classes_tablet : scroll_classes_tablet,
  (not columns_mobile) != (not columns_tablet) ? (columns_tablet ? cancel_scroll_classes_tablet : cancel_grid_classes_tablet) : '',
  columns_desktop ? grid_classes_desktop : scroll_classes_desktop,
  ((not columns_tablet) != (not columns_desktop)) ? (columns_desktop ? cancel_scroll_classes_desktop : cancel_grid_classes_desktop) : '',
] %}

{% set styles = [
  '--hgc-columns-desktop:' ~ columns_desktop,
  '--hgc-columns-tablet:' ~ columns_tablet,
  '--hgc-columns-mobile:' ~ columns_mobile,
] %}

<div class="{{ classes|join(' ') }}" style="{{ styles|join(';') }}">
  {% block logos %}
    {% for i in 1..8 %}
      {% block logos_media %}
        {% embed 'mercury:tile-logo' with {
          background: 'light',
          media: {
            src: '/' ~ componentMetadata.path ~ '/assets/logo-' ~ i ~ '-vanilla-light.png',
            alt: 'Placeholder logo ' ~ i,
          }
        } %}
        {% endembed %}
      {% endblock %}
    {% endfor %}
  {% endblock %}
</div>
