ReactJS

1
.karmaCounter > * + * {
2
    padding: 0 0 0 4px;
3
}
4

5
.karmaValue {
6
    color: var(--greyC4);
7
    font-size: 12px;
8
    line-height: 14px;
9
}
10

11
svg.down {
12
    transform: rotate(180deg);
13
}
14

15
@media all and (min-width: 1024px) {
16
    .karmaCounter {
17
        display: flex;
18
        align-items: center;
19
        justify-content: center;
20
        flex-flow: column nowrap;
21
    }
22

23
    .karmaCounter > * + * {
24
        padding: 7px 0 0;
25
    }
26

27
    .karmaValue {
28
        font-size: 14px;
29
        line-height: 16px;
30
        color: var(--black);
31
    }
32
}
33

34
@media all and (min-width: 1540px) {
35
    .karmaCounter > button.up:hover > svg > path {
36
        fill: var(--green);
37
    }
38

39
    .karmaCounter > button.down:hover > svg > path {
40
        fill: var(--orange);
41
    }
42
}