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: 20px;
57  height: 20px;
58  border-radius: 50%;
59  position: relative;
60  border-width: 2px;
61  border-style: solid;
62  color: $critical-lightbg;
63  background-color: rgba($critical-bg, 1);
64  background-image: url(/assets/images/crit-x.svg);
65  background-size: 120%;
66  background-position: 50% 50%;
67  background-repeat: no-repeat;
68  border-color: $critical-lightbg;
69}
70
71.icon__info {
72  margin-top: -4px;
73  margin-right: .5em;
74  width: 25px;
75  height: 25px;
76  fill: $medblue;
77  float: left;
78}
79
80.icon__up-arrow {
81  margin-right: 1em;
82  &:before {
83    content: '\029C0';
84    position: absolute;
85    font-size: 3em;
86    left: 0;
87    top: -50%;
88    transform: rotate(90deg);
89  }
90  &.hide {
91    text-align: -9999px;
92  }
93}
94
95.icon__down-arrow {
96  margin-right: 1em;
97  &:before {
98    content: '\029C0';
99    position: absolute;
100    font-size: 3em;
101    left: -4px;
102    top: -50%;
103    transform: rotate(-90deg);
104  }
105}