From c1e28224aa2e1450031669d9a7e359b63e04687d Mon Sep 17 00:00:00 2001
From: Volpeon <git@volpeon.ink>
Date: Wed, 22 Jul 2026 19:40:59 +0200
Subject: Init

---
 src/styles/components/_logo.scss | 81 ++++++++++++++++++++++++++++++++++++++++
 1 file changed, 81 insertions(+)
 create mode 100644 src/styles/components/_logo.scss

(limited to 'src/styles/components/_logo.scss')

diff --git a/src/styles/components/_logo.scss b/src/styles/components/_logo.scss
new file mode 100644
index 0000000..3450817
--- /dev/null
+++ b/src/styles/components/_logo.scss
@@ -0,0 +1,81 @@
+@use "sass:map";
+@use "sass:string";
+
+@use "pkg:iro-sass/bem";
+@use "pkg:iro-sass/props";
+@use "pkg:iro-design" as iro;
+
+@mixin styles {
+	@include bem.component("logo") {
+		display: block;
+		padding: props.get(iro.$core--size--50);
+		margin-inline: calc(-1 * props.get(iro.$core--size--50));
+		border-radius: props.get(iro.$s-links--rounding);
+		color: props.get(iro.$core--theme, --heading);
+
+		&:link,
+		&:visited {
+			&:hover {
+				text-decoration: none;
+				color: props.get(iro.$core--theme, --text-mute);
+			}
+
+			&:focus-visible {
+				color: props.get(iro.$s-links--key-focus--text-color);
+				text-decoration: none;
+				outline: props.get(iro.$s-links--key-focus--border-color) solid
+					props.get(iro.$s-links--key-focus--border-width);
+				box-shadow: 0 0 0
+					calc(
+						props.get(iro.$s-links--key-focus--border-width) +
+							props.get(iro.$s-links--key-focus--outline-width)
+					)
+					props.get(iro.$s-links--key-focus--outline-color);
+			}
+		}
+
+		@include bem.elem("img") {
+			display: block;
+			block-size: 1.7em;
+			aspect-ratio: 2700 / 600;
+		}
+
+		@include bem.modifier("sm") {
+			@include bem.elem("img") {
+				aspect-ratio: 600 / 600;
+			}
+		}
+
+		@include bem.modifier("lg") {
+			@include bem.elem("img") {
+				block-size: 2em;
+			}
+		}
+
+		@each $theme in map.keys(props.get(iro.$core--transparent-colors)) {
+			$logo-theme: static-#{string.slice($theme, 3)};
+
+			@include bem.modifier($logo-theme) {
+				color: props.get(iro.$core--transparent-colors, $theme, --900);
+
+				&:link,
+				&:visited {
+					&:hover {
+						color: props.get(iro.$core--transparent-colors, $theme, --800);
+					}
+
+					&:focus-visible {
+						color: props.get(iro.$core--transparent-colors, $theme, --900);
+						outline-color: props.get(iro.$core--transparent-colors, $theme, --900);
+						box-shadow: 0 0 0
+							calc(
+								props.get(iro.$s-links--key-focus--border-width) +
+									props.get(iro.$s-links--key-focus--outline-width)
+							)
+							props.get(iro.$core--transparent-colors, $theme, --300);
+					}
+				}
+			}
+		}
+	}
+}
-- 
cgit v1.3.1