$icon-size: 14px;

.icon{
  width: $icon-size;
  height: $icon-size;
  fill: currentColor;
}

.icon--outline{
  fill: transparent;
  stroke: currentColor;
  stroke-width: .5px;
}

.icon--small{
  width: 10px;
  height: 10px;
}

.icon--action{
  fill: rgba(black, .2);
}

.icon--action:hover,
a:hover .icon--action{
  fill: currentColor;
}

.icon--after{
  margin-left: .3rem;
}

.icon--before{
  margin-right: .3rem;
}

.icon--share{
  margin-bottom: -2px;
  width: 12px;
  height: 12px;
}

.icon-highlight{
  color: $warning-color;
  margin-right: .3rem;
}

.icon-unpublished{
  color: $alert-color;
}

.icon-active{
  background-color: $success-color;
  display: inline-block;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  margin-right: .5rem;
  vertical-align: middle;
}

.icon--component{
  width: 1.5em;
  height: 1.5em;
  vertical-align: -.45em;
  margin-right: .2em;
  color: $medium-gray;
}