{% import 'macros' as macros %}

{% set defaults = {
	isActive: false,
	attributes: null,
	classes: [],
	url: '',
	text: 'Read more',
	target: false,
	icon: '',
	attributes: [],
} %}

{% set self = defaults|merge(self) %}

<{%- if self.url -%}
	a
	href="{{ self.url }}"
	{% if self.target %}target="_blank"{% endif %}
{%- else -%}
	span
{%- endif %} class="group block pt-2 w-full border-t-2 transition {{ self.isActive ? "border-blue-700" : "border-gray-300 hocus:border-blue-300" }}{{ self.classes|length ? " #{self.classes|join(' ')}" }}" {{ macros.addAttributes(self.attributes) }}>

	<div class="flex items-start w-full leading-snug type-sm">
		{% if self.text|length %}
			<span class="mr-16">{{ self.text }}</span>
		{% endif %}
		{% if self.icon %}
			{{ macros.icon(self.icon, "type-base transition ml-auto group-hocus:-translate-x-2#{ self.isActive ? ' rotate-180'}") }}
		{% endif %}
	</div>

</{{ self.url ? 'a' : 'span'}}>