1.icon {
2  display: inline-block;
3  width: 20px;
4  height: 20px;
5  position: relative;
6  speak: none;
7  &:hover {
8    cursor: pointer;
9  }
10  &.icon-as-spacer {
11    text-indent: -9999px;
12  }
13}
14
15.icon__more {
16  fill: $medblue;
17  stroke: $medblue;
18  background: $white;
19  overflow: visible;
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  margin-right: .7em;
49  margin-top: -2px;
50  &:before {
51    content: '!';
52    color: $alert__error;
53    position: absolute;
54    left: 55%;
55    top: 40%;
56    font-size: .7em;
57  }
58  &:after {
59    content: '\025b3';
60    position: absolute;
61    left: 0;
62    top: -10%;
63    color: $alert__error;
64    font-size: 1.5em;
65  }
66}
67
68.icon__info{
69  margin-top: -4px;
70  margin-right: .5em;
71  width: 25px;
72  height: 25px;
73  fill: $medblue;
74  float: left;
75}
76
77.icon__up-arrow {
78  margin-right: 1em;
79  &:before {
80    content: '\029C0';
81    position: absolute;
82    font-size: 3em;
83    left: 0;
84    top: -50%;
85    transform: rotate(90deg);
86  }
87}
88.icon__down-arrow {
89  margin-right: 1em;
90  &:before {
91    content: '\029C0';
92    position: absolute;
93    font-size: 3em;
94    left: -4px;
95    top: -50%;
96    transform: rotate(-90deg);
97  }
98}