codecheck

1
@use 'sass:math';
2

3
// core
4
.p-chip {
5
    display: inline-flex;
6
    align-items: center;
7
}
8

9
.p-chip-text {
10
    line-height: 1.5;
11
}
12

13
.p-chip-icon.pi {
14
    line-height: 1.5;
15
}
16

17
.p-chip-remove-icon {
18
    line-height: 1.5;
19
    cursor: pointer;
20
}
21

22
.p-chip img {
23
    border-radius: 50%;
24
}
25

26
// theme
27
.p-chip {
28
    background-color: $chipBg;
29
    color: $chipTextColor;
30
    border-radius: $chipBorderRadius;
31
    padding: 0 nth($inputPadding, 2);
32

33
    .p-chip-text {
34
        line-height: 1.5;
35
        margin-top: math.div(nth($inputPadding, 1), 2);
36
        margin-bottom: math.div(nth($inputPadding, 1), 2);
37
    }
38

39
    .p-chip-icon {
40
        margin-right: $inlineSpacing;
41
    }
42

43
    img {
44
        width: 1.5 + nth($inputPadding, 1);
45
        height: 1.5 + nth($inputPadding, 1);
46
        margin-left: -1 * nth($inputPadding, 2);
47
        margin-right: $inlineSpacing;
48
    }
49

50
    .p-chip-remove-icon {
51
        margin-left: $inlineSpacing;
52
        border-radius: $borderRadius;
53
        transition: $actionIconTransition;
54
        outline-color: transparent;
55
        
56
        &:focus-visible {
57
            @include focused();
58
        }
59

60
        &:focus {
61
            outline: 0 none;
62
        }
63
    }
64
}