{# For an explanation of the [&>*:] syntax @see https://medium.com/@replynamanjain/tailwind-css-targeting-child-elements-b60c0ca11652 #}
{% set text_text_color = text_color|default('default') %}
{% set text_text_size = text_size|default('normal') %}

{% set text_component =
  html_cva(
    base: [
      '[&_h2]:mt-8 [&_h2]:mb-6 [&_h3]:mt-6 [&_h3]:mb-4 [&_h4]:mt-4 [&_h4]:mb-2 [&_h5]:my-2 [&_h6]:my-2',
      '[&_li]:mb-1 [&_ol]:my-4 [&_ol]:list-decimal [&_ul]:my-4',
      '[&>*:first-child]:mt-0 [&>*:last-child]:mb-0',
      '[&_a]:underline [&_a]:underline-offset-2'
    ],
    variants: {
      textColor: {
        default: 'text-foreground [&_a]:hover:text-accent',
        inverted: 'text-background [&_a]:hover:text-muted',
        primary: 'text-primary [&_a]:hover:text-accent'
      },
      textSize: {
        'text-xs': 'text-xs xl:text-sm 2xl:text-md',
        'text-sm': 'text-sm xl:text-md 2xl:text-lg',
        normal: 'text-base xl:text-lg 2xl:text-xl',
        'text-lg': 'text-lg xl:text-xl 2xl:text-2xl',
        'text-xl': 'text-xl xl:text-2xl 2xl:text-3xl',
        'text-2xl': 'text-2xl xl:text-3xl 2xl:text-4xl',
        'text-3xl': 'text-3xl xl:text-4xl 2xl:text-5xl'
      }
    }
  )
%}

{% set text_classes =
  text_component.apply({
    textColor: text_text_color,
    textSize: text_text_size
  })
%}

<div class="{{ text_classes }}">
  {{ text }}
</div>
