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

@include iro.props-namespace('links') {
    @include iro.props-store((
        --dims: (
            --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 --700),

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

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

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

            --focus: (
                --bg:            fn.global-color(--yellow-static --400),
                --text:          #000,
            )
        )
    ));

    @include iro.bem-scope(iro.props-namespace()) {
        :link,
        :visited {
            border-radius:             .5px;
            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);
            }

            @include iro.bem-at-theme('keyboard') {
                &:focus {
                    background-color:          fn.color(--focus --bg);
                    color:                     fn.color(--focus --text);
                    text-decoration:           none;
                    border-block-end:          fn.dim(--hover --underline) solid currentColor;
                }
            }
        }

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