<ul class="my-4 border-b border-primary-900 divide-y divide-primary-900 {{ list_width }}">
    {{ links }}
        <li>
            <a class="{{ [
                'group',
                'flex',
                'items-center',
                'gap-x-5',
                'my-2',
                'py-2',
                'text-lg',
                'text-primary-90',
                icon_position
                ] | classes }}"
                href="{{ link }}"
            >
                <span class="grow text-2xl font-semibold">
                    {{ label ?? link:title }}
                </span>
                {{ partial src="components/atoms/icons/arrow-forward"
                    classes="{ [
                    'group-hover:translate-x-1',
                    'transition-transform',
                    'size-10',
                    'text-primary-500' => color === 'primary',
                    'text-secondary-500' => color === 'secondary',
                    'text-tertiary-500' => color === 'tertiary',
                    'text-quaternary-500' => color === 'quaternary',
                    'text-white' => color === 'white'] | classes }"
                    csrf_token
                }}
            </a>
        </li>
    {{ /links }}
</ul>
