.icon { display: inline-block; width: 20px; height: 20px; position: relative; speak: none; &.icon-as-spacer { text-indent: -9999px; } } .icon__more { fill: $medblue; stroke: $medblue; background: $white; overflow: visible; &:hover { cursor: pointer; } } .icon__more-dropdown { background: $lightgrey; position: absolute; right: 3px; white-space: normal; word-wrap: normal; z-index: 200; padding: 1em; font-size: 1em; box-shadow: 2px 4px 5px $medgrey; } .icon__bar-arrow { &:before { content: '\21E5'; position: absolute; font-size: 1.7em; vertical-align: middle; transform: rotate(90deg); display: inline-block; left: 0px; top: -5px; } } .icon__warning{ width: 30px; height: 30px; background-image: url(/assets/images/icon-warning.svg); background-repeat: no-repeat; vertical-align: middle; } .icon__info{ margin-top: -4px; margin-right: .5em; width: 25px; height: 25px; fill: $medblue; float: left; } .icon__up-arrow { margin-right: 1em; &:before { content: '\029C0'; position: absolute; font-size: 3em; left: 0; top: -50%; transform: rotate(90deg); } &.hide { text-align: -9999px; } } .icon__down-arrow { margin-right: 1em; &:before { content: '\029C0'; position: absolute; font-size: 3em; left: -4px; top: -50%; transform: rotate(-90deg); } }