// svg icons and custom icon styles
// ======================================================================

// default icon styles - inline, same color, 1em/1em
.icon {
  position: relative;
  top: -0.0625em;
  display: inline-block;
  width: 1em;
  height: 1em;
  fill: currentColor;

  &--correct,
  &--incorrect {
    @include spacing(r .5);
    @include spacing-inner(a .2);
    border-color: inherit;
    border-style: solid;
    border-width: 2px;
    border-radius: 100%;
    width: $base-unit * 1.2;
    height: $base-unit * 1.2;
  }

  &--triangle {
    @include absolute(r .8, t .7);
    pointer-events: none;
    width: 9px;
    height: 6px;
  }
}