@mixin icon {
  display: inline-block;
  vertical-align: bottom;

  > svg {
    width: 100%;
    height: 100%;
  }
}

@mixin icon-size($size) {
  $icon-size: $size * .1rem;
  width: $icon-size;
  height: $icon-size;
  margin: $icon-size / 4;
}

@mixin icon-style-default {
  > svg * {
    fill: $color-black;
  }
}

.icon {
  @include icon;
  @include icon-size(16);
  @include icon-style-default;
}