@import "../colors";
@import "../globals";
@import "../mixins";

.icon {
  margin-right: $unit;
  font-size: 1.8 * $unit;
}

.link {
  position: relative;
  display: flex;
  flex-direction: row;
  align-content: center;
  align-items: center;
  justify-content: center;
  line-height: 1.5;
  cursor: pointer;
  transition: opacity $animation-duration $animation-curve-default;
  &:not(.active) {
    opacity: .5;
  }
  &:hover, &:active {
    opacity: 1;
  }
  > * {
    vertical-align: middle;
  }
  > abbr {
    text-transform: capitalize;
  }
  > small {
    margin-left: .8 * $unit;
    font-size: $font-size-tiny;
    text-align: center;
  }
}