<script>
	import Crest from './Crest.svelte';
	export let animated = true;
</script>

<div class="logo" class:animated>
	<Crest x="62" y="62" />
	<svg
		id="logo-text"
		width="723.84009"
		height="116.720268"
		viewBox="0 0 723.84009 116.720269"
		fill="none"
		xmlns="http://www.w3.org/2000/svg"
	>
		<text xml:space="preserve" id="text" transform="translate(-278.77228,-206.83728)"
			><tspan x="275.57227" y="292.17088" id="tspan1319"
				><tspan style="font-size:106.667px;font-family:'Font-Awesome-brands';" id="tspan1317"
					>Alaskar.dev</tspan
				></tspan
			></text
		>
	</svg>
</div>

<style lang="scss">
	@import '$lib/scss/breakpoints.scss';

	.logo {
		width: auto;
		height: 100%;

		display: flex;
		gap: 8px;
		align-items: center;

		@include for-phone-only {
			gap: 4px;
		}

		#logo-text {
			width: auto;
			height: 100%;
			max-height: 28px;

			#text {
				transition: all 0.2s ease-in-out;
				fill: var(--color--text);
			}
		}

		&:hover {
			#logo-text {
				filter: drop-shadow(0px 0px 3px var(--color--primary));
			}
		}
	}

	@media screen and (prefers-reduced-motion: no-preference) {
		.animated {
			:global(svg path) {
				fill: transparent;
				stroke: var(--color--text);
				animation: svg-crest-stroke 3s ease forwards;
			}

			#text {
				animation: svg-text-stroke 3s;
				stroke-width: 2;
				--text-color: var(--color--text);
			}
		}
	}
</style>
