Link Toggle

{#
	{% render "@partial-link-toggle" with {
		title: "Button Text",
		url: "#",
		class: "",
		js: false,
		icon: "",
		active_title: "Active Text",
		active_icon: "",
		swap_target: "",
		swap_linked: "",
		aria: ""
	} %}
#}

<a href="{{ url ?: "#" }}" class="{{ class }}_toggle{% if js %} js-{{ class|replace({ "_": "-"}) }}-toggle{% endif %}{% if swap_target %} js-swap{% endif %}" {% if aria %} aria-label="{{ aria }}" {% endif %} {% if swap_target %} data-swap-target="{{ swap_target }}" {% endif %} {% if swap_link %} data-swap-linked="{{ swap_link }}" {% endif %}>
	<span class="{{ class }}_toggle_inner_default {{ class }}_toggle_inner">
		<span class="{{ class }}_toggle_label_default {{ class }}_toggle_label">{{ title }}</span>
		{% if icon %}
			<span class="{{ class }}_toggle_icon_default {{ class }}_toggle_icon" aria-hidden="true">
				<span class="{{ class }}_toggle_icon_inner_default {{ class }}_toggle_icon_inner">
					<span class="{{ class }}_toggle_icon_space">&#xfeff;</span>
					<svg class="icon icon_{{ icon }}">
						<use xlink:href="/images/icons.svg#{{ icon }}"></use>
					</svg>
				</span>
			</span>
		{% endif %}
	</span>
	{% if active_title %}
		<span class="{{ class }}_toggle_inner_active {{ class }}_toggle_inner">
			<span class="{{ class }}_toggle_label_active {{ class }}_toggle_label">{{ active_title }}</span>
			{% if icon %}
				<span class="{{ class }}_toggle_icon_active {{ class }}_toggle_icon" aria-hidden="true">
					<span class="{{ class }}_toggle_icon_inner_active {{ class }}_toggle_icon_inner">
						<span class="{{ class }}_toggle_icon_space">&#xfeff;</span>
						<svg class="icon icon_{{ active_icon ?: icon }}">
							<use xlink:href="/images/icons.svg#{{ active_icon ?: icon }}"></use>
						</svg>
					</span>
				</span>
			{% endif %}
		</span>
	{% endif %}
</a>