@use "sass:list";

#footer {
	background-color:        var(--foregroundColour);
	border-top-left-radius:  calc($padding / 2);
	border-top-right-radius: calc($padding / 2);
	font-family:             $codeFont;
	margin:                  auto;
	max-width:               calc($contentWidth + $padding * 2);
	padding:                 $padding;
	text-align:              center;
	width:                   100%;

	#arabic {
		$width:  31;
		$height: 11;

		$actualHeight: 4em;

		aspect-ratio:     list.slash($width, $height);
		background-color: var(--textColour);
		image-rendering:  pixelated;
		margin:           auto;
		mask-image:       url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB8AAAALCAQAAAAt4J4/AAAATElEQVQoz9WRwQ4AMARDdfH/v9wdlghBlrnNDU8rQIbBQcf3KSxJJq7WjfVKjQ1n2XIw7svzUEZo0M1+wRgCBqNy+OHc2l7m9R//xQbPdSTsn4rEMwAAAABJRU5ErkJggg");
		mask-size:        cover;
		max-height:       $actualHeight;
		max-width:        calc($actualHeight * ($width / $height));
	}

	#starDescription {
		$width: calc($contentWidth / 2);

		margin:     auto;
		max-width:  $width;
		text-align: left;

		&::before, &::after {
			@include separator;

			margin:    $padding 0;
		}
	}

	#cvrNumber {
		font-weight: bold;
		margin:      auto;
		width:       fit-content;
	}

	#emailAddress {
		$width:  183;
		$height: 8;

		$actualHeight: 1em;

		aspect-ratio:     list.slash($width, $height);
		background-color: var(--textColour);
		display:          block;
		image-rendering:  pixelated;
		margin:           auto;
		mask-image:       url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAALcAAAAICAQAAAAR+6a0AAAA0klEQVRIx+1W0Q4CMQhrzf3/L9eHM25zwJAzi4nyomSw0kLYEYDwtz1GQgD4cE/he4/P0MgDZHh+G+neEkWO+Ozy5dbSIsZfm5GNHesyZ76edXk0C895cP7N3lyOglwv0kbInbWYFaMV+rpqWxcC0BHOVt+tzMrh5tXEN9D5DdvkMEUdSzt7w+HMpqWiUNXIaB1EdbI4TpftZharAFzT7qqY0vRUFELGq2Tf+RlG6ekWmJgF/ymh+Zh4VK+0iOGdMZ5KgjbuK5U8XYa83dv2xz8E70XwbQlyNNhzAAAAAElFTkSuQmCC");
		mask-size:        cover;
		max-height:       $actualHeight;
		max-width:        calc($actualHeight * $width / $height);
		width:            100%;
	}

	#socials {
		display:     flex;
		font-weight: bold;
		gap:         1rem;
		margin:      auto;
		width:       fit-content;

		a {
			aspect-ratio:     1;
			background-color: var(--textColour);
			display:          block;
			image-rendering:  pixelated;
			mask-size:        cover;
			width:            2rem;

			&.bluesky {
				mask-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAQAAAC1+jfqAAAAVElEQVQoz5WQwQ3AMAgDz1X3X9n9RCoQUFMeKD6QgQAY08Xi5s25vLIToCjHwvByZ5uJxwbDnSYLA4ro4ig8008HhW4VRx2N2O8uv/DzCu9K7VpBPYElKOozRUDfAAAAAElFTkSuQmCC");
			}

			&.instagram {
				mask-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAX0lEQVQ4y8VTQQ6AMAiDhfT/7+0FLy6ZBnWMLPYILYQCKicAuCRAUmVVfNFkxSMfgLcV8VjEZjr1mUkqAP+cPxW7J948ibhNivi/QNlEezrTaI0R16ZufasH1WfS6jsfuEMzS24xXK8AAAAASUVORK5CYII");
			}

			&.linktree {
				mask-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAU0lEQVQ4y8VTQQ4AIAgS//9nu3QrFFctNk+iIk6zHDGDwu0Q3pm24zkhZMVUAYomseOiqWCpgSqV8SEa9+6MV1ZQ3A7VxOjmIE6mSrzhS5X79I0DeIAXDaPn+ZcAAAAASUVORK5CYII");
			}

			&.mastodon {
				mask-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAQAAAC1+jfqAAAAV0lEQVQoz4WRQRLAIAjENkz//2V6qBVpEffgwRCQET1x/cM8SjwoDZYkWPBbnKQo4OOOe0u2D+QhmA656saRYwfaJSXsoLcjyI+krrIJvN6G/i+18ZeBNwxoEhoY69ydAAAAAElFTkSuQmCC");
			}

			&.reddit {
				mask-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAQAAAC1+jfqAAAAWUlEQVQoz42RwQ3AMAgDz1H3X9l9NYKCQngFHNBhBIDpQ6CDDCAVWftlgNV0OTe5K+7cZwLwCpAu09wzpHgafsUPq+D+jPt8UBJCFo1SN03DmvMWF8cazv0CbV0eA+jaPIYAAAAASUVORK5CYII");
			}

			&.youTube {
				mask-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAQAAAC1+jfqAAAARklEQVQoz6XRQQrAQAgEwZol//+yueYguhCP2gyNE1D6CRnOkIxnHG6ByJ7QQKcxz+7wgVbJp93WBNSUUJ3O309elLXU/QLhAgkk5VAXSQAAAABJRU5ErkJggg");
			}
		}
	}
}