<template>
	<a v-if="isExternal" :href="href" class="link">
		{{ title }}
		<i class="link__icon icon-arrow_back" />
	</a>
	<nuxt-link v-else :to="localePath(href)" class="link">
		{{ title }}
		<i class="link__icon icon-arrow_back" />
	</nuxt-link>
</template>
<script>
export default {
	name: "ArrowBtn",
	props: {
		href: {
			default: "#",
			required: true,
			type: String,
		},
		isExternal: {
			default: false,
			required: false,
			type: Boolean,
		},
		title: {
			default: "",
			required: true,
			type: String,
		},
	},
};
</script>
<style lang="scss" scoped>
.link {
	color: $color-text;
	font-size: 12px;
	text-decoration: none;

	&__icon {
		$size: 18px;

		background-color: $color-text;
		border-radius: 50%;
		color: $color-white;
		display: inline-block;
		font-size: 18px;
		height: $size;
		margin: 0 5px;
		vertical-align: middle;
		width: $size;
	}

	&:hover {
		color: $color-primary;

		.link__icon {
			background-color: $color-primary;
		}
	}
}


[data-lang="en"] {
	.link {
		&__icon {
			transform: rotate(180deg);
		}
	}
}
</style>