1 files changed, 93 insertions, 0 deletions

diff --git a/src/scopes/_links.scss b/src/scopes/_links.scss
new file mode 100644
index 0000000..69793b2
--- /dev/null
+++ b/src/scopes/_links.scss
@@ -0,0 +1,93 @@
+@use 'sass:map';
+@use 'sass:meta';
+@use 'iro-sass/src/iro-sass' as iro;
+@use '../props';
+
+@forward 'links.vars';
+@use 'links.vars' as vars;
+
+@mixin styles {
+    @include props.materialize(meta.module-variables('vars'));
+
+    @include iro.bem-scope('links') {
+        :link,
+        :visited {
+            color:                     currentColor;
+            text-decoration:           underline;
+            text-decoration-thickness: props.get(vars.$underline-width);
+            text-decoration-color:     props.get(vars.$underline-color);
+            border-radius:             props.get(vars.$rounding);
+            box-decoration-break:      clone;
+
+            &:hover {
+                text-decoration:           underline;
+                text-decoration-skip-ink:  none;
+                text-decoration-thickness: props.get(vars.$hover--underline-width);
+            }
+
+            &:focus-visible {
+                color:           props.get(vars.$key-focus--text-color);
+                text-decoration: none;
+                outline:         props.get(vars.$key-focus--border-color) solid props.get(vars.$key-focus--border-width);
+                box-shadow:
+                    0
+                    0
+                    0
+                    calc(props.get(vars.$key-focus--border-width) + props.get(vars.$key-focus--outline-width))
+                    props.get(vars.$key-focus--outline-color);
+            }
+        }
+
+        @include iro.bem-modifier('invisible') {
+            :link,
+            :visited {
+                text-decoration: none;
+            }
+        }
+
+        @include iro.bem-modifier('colored') {
+            :link {
+                color:                 props.get(vars.$colored--text-color);
+                text-decoration-color: props.get(vars.$colored--underline-color);
+
+                &:hover {
+                    color:             props.get(vars.$colored--hover--text-color);
+                }
+            }
+
+            :visited {
+                color:                 props.get(vars.$colored--visited--text-color);
+                text-decoration-color: props.get(vars.$colored--visited--underline-color);
+
+                &:hover {
+                    color:             props.get(vars.$colored--visited--hover--text-color);
+                }
+            }
+        }
+
+        @each $theme in map.keys(props.get(vars.$static-themes)) {
+            @include iro.bem-modifier($theme) {
+                :link,
+                :visited {
+                    color:                 props.get(vars.$static-themes, $theme, --text-color);
+                    text-decoration-color: props.get(vars.$static-themes, $theme, --underline-color);
+
+                    &:hover {
+                        color:             props.get(vars.$static-themes, $theme, --hover, --text-color);
+                    }
+
+                    &:focus-visible {
+                        color:         props.get(vars.$static-themes, $theme, --key-focus, --text-color);
+                        outline-color: props.get(vars.$static-themes, $theme, --key-focus, --border-color);
+                        box-shadow:
+                            0
+                            0
+                            0
+                            calc(props.get(vars.$key-focus--border-width) + props.get(vars.$key-focus--outline-width))
+                            props.get(vars.$static-themes, $theme, --key-focus, --outline-color);
+                    }
+                }
+            }
+        }
+    }
+}