@use 'sass:map';
@use 'sass:meta';
@use 'sass:string';
@use 'iro-sass/src/bem';
@use 'iro-sass/src/props';
@use '../props' as *;

@forward 'links.vars';
@use 'links.vars' as vars;

@mixin styles {
    @include materialize-at-root(meta.module-variables('vars'));

    @include 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 bem.modifier('invisible') {
            :link,
            :visited {
                text-decoration: none;
            }
        }

        @include 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 bem.modifier(string.slice($theme, 3)) {
                :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);
                    }
                }
            }
        }

        @include bem.elem('image') {
            img {
                margin-inline: calc(-1 * props.get(vars.$key-focus--border-offset));
                border:        props.get(vars.$key-focus--border-offset) solid transparent;
                border-radius: calc(props.get(vars.$rounding) + props.get(vars.$key-focus--border-offset));
            }
    
            &:link,
            &:visited {
                &:focus-visible {
                    outline:    none;
                    box-shadow: none;
    
                    img {
                        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);
                    }
                }
            }
        }
    }
}