@use 'iro-sass/src/index' as iro;
@use '../functions' as fn;

@include iro.props-namespace('links') {
    @include iro.props-store((
        --dims: (
            --rounding:          fn.global-dim(--rounding),
            --underline:         fn.global-dim(--border --thin),

            --hover: (
                --underline:     fn.global-dim(--border --medium),
            )
        ),
        --colors: (
            --underline:         fn.global-color(--text-mute-more),

            --idle: (
                --text:          fn.global-color(--accent --1000),
                --underline:     fn.global-color(--accent --600),

                --hover: (
                    --text:      fn.global-color(--accent --1200),
                ),
            ),

            --visited: (
                --text:          fn.global-color(--purple --1000),
                --underline:     fn.global-color(--purple --600),

                --hover: (
                    --text:      fn.global-color(--purple --1200),
                ),
            ),

            --key-focus: (
                --bg:            fn.global-color(--focus-static --400),
                --text:          fn.global-color(--focus-static --400-text),
            )
        )
    ));

    @include iro.bem-scope(iro.props-namespace()) {
        :link,
        :visited {
            margin:                    calc(-1 * fn.global-dim(--border --thick));
            padding:                   fn.global-dim(--border --thick);
            border-radius:             calc(fn.dim(--rounding) + fn.global-dim(--border --thick));
            color:                     currentColor;
            text-decoration:           underline;
            text-decoration-color:     fn.color(--underline);
            text-decoration-thickness: fn.dim(--underline);

            &:hover {
                text-decoration:           underline;
                text-decoration-thickness: fn.dim(--hover --underline);
                text-decoration-skip-ink:  none;
            }

            &:focus-visible {
                background-color:          fn.color(--key-focus --bg);
                color:                     fn.color(--key-focus --text);
                text-decoration:           underline;
                text-decoration-thickness: fn.dim(--hover --underline);
                text-decoration-skip-ink:  none;
            }
        }

        @include iro.bem-modifier('invisible') {
            :link,
            :visited {
                text-decoration: none;
            }
        }

        @include iro.bem-modifier('colored') {
            :link {
                color:                 fn.color(--idle --text);
                text-decoration-color: fn.color(--idle --underline);

                &:hover {
                    color:             fn.color(--idle --hover --text);
                }
            }
    
            :visited {
                color:                 fn.color(--visited --text);
                text-decoration-color: fn.color(--visited --underline);

                &:hover {
                    color:             fn.color(--visited --hover --text);
                }
            }
        }
    }
}