.vuiButtonIcon {
  display: inline-block;
  border-radius: $sizeXxs;
  padding: $sizeXxs;
  line-height: 1;
}

// Color
$color: (
  primary: $colorPrimary,
  danger: $colorDanger,
  normal: $colorText
);

@each $colorName, $colorValue in $color {
  .vuiButtonIcon--#{$colorName} {
    color: $colorValue;
    background-color: transparentize($color: $colorValue, $amount: 1);
    transition: all 0.2s;

    &:hover {
      background-color: transparentize($color: $colorValue, $amount: 0.9);
    }
  }
}