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__info{
56  margin-top: -4px;
57  margin-right: .5em;
58  width: 25px;
59  height: 25px;
60  fill: $medblue;
61  float: left;
62}
63
64.icon__up-arrow {
65  margin-right: 1em;
66  &:before {
67    content: '\029C0';
68    position: absolute;
69    font-size: 3em;
70    left: 0;
71    top: -50%;
72    transform: rotate(90deg);
73  }
74  &.hide {
75    text-align: -9999px;
76  }
77}
78.icon__down-arrow {
79  margin-right: 1em;
80  &:before {
81    content: '\029C0';
82    position: absolute;
83    font-size: 3em;
84    left: -4px;
85    top: -50%;
86    transform: rotate(-90deg);
87  }
88}