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

$static-themes: 'black' 'white' !default;

@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),
            ),

            --key-focus: (
                --border:        fn.global-dim(--key-focus --border),
                --border-offset: fn.global-dim(--key-focus --border-offset),
                --outline:       fn.global-dim(--key-focus --border),
            ),
        ),
        --colors: (
            --underline: fn.global-color(--text-mute-more),

            --colored: (
                --text:          fn.global-color(--accent --1100),
                --underline:     fn.global-color(--accent --600),

                --hover: (
                    --text:      fn.global-color(--accent --1300),
                ),
    
                --visited: (
                    --text:          fn.global-color(--purple --1100),
                    --underline:     fn.global-color(--purple --600),
    
                    --hover: (
                        --text:      fn.global-color(--purple --1300),
                    ),
                ),
            ),

            --key-focus: (
                --text:          fn.global-color(--focus --text),
                --border:        fn.global-color(--focus --border),
                --outline:       fn.global-color(--focus --outline),
            ),
        ),
    ));

    @each $theme in $static-themes {
        @include iro.props-store((
            --colors: (
                --static-#{$theme}: (
                    --text:          fn.global-color(--#{$theme}-transparent --800),
                    --underline:     fn.global-color(--#{$theme}-transparent --500),
    
                    --hover: (
                        --text:      fn.global-color(--#{$theme}-transparent --900),
                    ),

                    --key-focus: (
                        --text:      fn.global-color(--#{$theme}-transparent --900),
                        --border:    fn.global-color(--#{$theme}-transparent --900),
                        --outline:   fn.global-color(--#{$theme}-transparent --300),
                    ),
                )
            )
        ));
    }

    @include iro.bem-scope(iro.props-namespace()) {
        :link,
        :visited {
            margin:                    calc(-1 * fn.dim(--key-focus --border-offset));
            padding:                   fn.dim(--key-focus --border-offset);
            border-radius:             fn.dim(--rounding);
            color:                     currentColor;
            text-decoration:           underline;
            text-decoration-color:     fn.color(--underline);
            text-decoration-thickness: fn.dim(--underline);
            box-decoration-break:      clone;

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

            &:focus-visible {
                outline:          fn.color(--key-focus --border) solid fn.dim(--key-focus --border);
                box-shadow:       0 0 0 calc(fn.dim(--key-focus --border) + fn.dim(--key-focus --outline)) fn.color(--key-focus --outline);
                color:            fn.color(--key-focus --text);
                text-decoration:  none;
            }
        }

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

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

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

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

        @each $theme in $static-themes {
            @include iro.bem-modifier(static-#{$theme}) {
                :link,
                :visited {
                    color:                 fn.color(--static-#{$theme} --text);
                    text-decoration-color: fn.color(--static-#{$theme} --underline);

                    &:hover {
                        color:             fn.color(--static-#{$theme} --hover --text);
                    }

                    &:focus-visible {
                        outline-color: fn.color(--static-#{$theme} --key-focus --border);
                        box-shadow:    0 0 0 calc(fn.dim(--key-focus --border) + fn.dim(--key-focus --outline)) fn.color(--static-#{$theme} --key-focus --outline);
                        color:         fn.color(--static-#{$theme} --key-focus --text);
                    }
                }
            }
        }
    }
}