{% set class_map = {
  background: {
    brand: 'hg:bg-brand',
    'brand-light': 'hg:bg-brand-light',
    'brand-dark': 'hg:bg-brand-dark',
    accent: 'hg:bg-accent',
    'accent-light': 'hg:bg-accent-light',
    'accent-dark': 'hg:bg-accent-dark'
  },
  flex_direction: {
    column: 'hg:flex-col',
    row: 'hg:flex-row',
    'column-reverse': 'hg:flex-col-reverse',
    'row-reverse': 'hg:flex-row-reverse'
  },
  radius: {
    sm: 'hg:rounded-sm',
    md: 'hg:rounded-md',
    lg: 'hg:rounded-lg',
    xl: 'hg:rounded-xl'
  },
  flex_gap: {
    sm: 'hg:gap-4',
    md: 'hg:gap-8',
    lg: 'hg:gap-16',
    xl: 'hg:gap-32'
  },
  padding: {
    sm: 'hg:p-4',
    md: 'hg:p-8',
    lg: 'hg:p-16',
    xl: 'hg:p-32'
  },
  flex_align: {
    start: 'hg:self-start',
    end: 'hg:self-end',
    center: 'hg:self-center'
  }
} %}

{% set classes =
  [
    'group',
    class_map['flex_direction'][flex_direction] ?? '',
    class_map['flex_align'][flex_align] ?? '',
    flex_gap ? class_map['flex_gap'][flex_gap] : '',
    radius ? class_map['radius'][radius] : '',
    padding ? class_map['padding'][padding] : '',
    background ? class_map['background'][background] : 'hg:bg-none'
  ]
    |filter(c => c is not empty)
    |join(' ')
%}
<div class="{{ classes }}">
  {% block group_slot %}

  {% endblock %}
</div>
