1.icon {
2  display: inline-block;
3  width: 20px;
4  height: 20px;
5  position: relative;
6  speak: none;
7  &.icon-as-spacer {
8    text-indent: -9999px;
9  }
10}
11
12.icon__more {
13  fill: $medblue;
14  stroke: $medblue;
15  background: $white;
16  overflow: visible;
17  &:hover {
18    cursor: pointer;
19  }
20}
21
22.icon__more-dropdown {
23  background: $lightgrey;
24  position: absolute;
25  right: 3px;
26  white-space: normal;
27  word-wrap: normal;
28  z-index: 200;
29  padding: 1em;
30  font-size: 1em;
31  box-shadow: 2px 4px 5px $medgrey;
32}
33
34.icon__bar-arrow {
35  &:before {
36    content: '\21E5';
37    position: absolute;
38    font-size: 1.7em;
39    vertical-align: middle;
40    transform: rotate(90deg);
41    display: inline-block;
42    left: 0px;
43    top: -5px;
44  }
45}
46
47.icon__warning{
48  width: 30px;
49  height: 30px;
50  background-image: url(/assets/images/icon-warning.svg);
51  background-repeat: no-repeat;
52  vertical-align: middle;
53}
54
55.icon__critical{
56  width: 30px;
57  height: 30px;
58  background-image: url(/assets/images/icon-critical.svg);
59  background-repeat: no-repeat;
60  vertical-align: middle;
61}
62
63.icon__info{
64  margin-top: -4px;
65  margin-right: .5em;
66  width: 25px;
67  height: 25px;
68  fill: $medblue;
69  float: left;
70}
71
72.icon__up-arrow {
73  margin-right: 1em;
74  &:before {
75    content: '\029C0';
76    position: absolute;
77    font-size: 3em;
78    left: 0;
79    top: -50%;
80    transform: rotate(90deg);
81  }
82  &.hide {
83    text-align: -9999px;
84  }
85}
86.icon__down-arrow {
87  margin-right: 1em;
88  &:before {
89    content: '\029C0';
90    position: absolute;
91    font-size: 3em;
92    left: -4px;
93    top: -50%;
94    transform: rotate(-90deg);
95  }
96}