1 files changed, 81 insertions, 0 deletions

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);
+                                        }
+                                }
+                        }
+                }
+        }
+}