@import "../../style/mixins/index";

@mixin size($size, $value) {
  @include when($size) {
    font-size: $value;
    width: $value;
    height: $value;
  }
}

@mixin color($type,$value) {
  @include when($type) {
    color: $value;
  }
}

@include b(icon) {
  overflow: hidden;
  display: inline-block;
  vertical-align: middle !important;
  font-size: $--x-icon-size-default;
  width: $--x-icon-size-default;
  height: $--x-icon-size-default;
  & + .x-icon {
    margin-left: $--x-icon-split;
  }
  > img, > svg {
    width: 100%;
    height: 100%;
    vertical-align: top;
    display: inline-block;
  }
  @include when(pointer) {
    cursor: pointer;
    &:hover {
      opacity: $--x-icon-pointer-opacity;
    }
  }
  @include size(large, $--x-icon-size-large);
  @include size(small, $--x-icon-size-small);
  @include size(mini, $--x-icon-size-mini);
  @include color(primary, $--x-icon-color-primary);
  @include color(success, $--x-icon-color-success);
  @include color(warning, $--x-icon-color-warning);
  @include color(danger, $--x-icon-color-danger);
}