summaryrefslogtreecommitdiffstats
path: root/src/scopes/_links.scss
blob: 4f369725e5a13ec335162a9acd79954f8384e64e (plain) (blame)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
@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);
                }
            }
        }
    }
}