[icon-size='micro'] {
  font-size: 12px;
}

[icon-size='small'] {
  font-size: 14px;
}

[icon-size='regular'] {
  font-size: 16px;
}

[icon-size='large'] {
  font-size: 18px;
}

[icon-size='xlarge'] {
  font-size: 22px;
}

[icon-flip='horizontal'] {
  transform: scaleX(-1);
}

[icon-flip='vertical'] {
  transform: scaleY(-1);
}

[icon-color='black'] {
  color: #000;
}

[icon-color='white'] {
  color: #fff;
}

[icon-color='warning'] {
  color: #e7b549;
}

[icon-color='error'] {
  color: #e74c3c;
}

[icon-color='primary'] {
  color: #542cc1;
}

[icon-color='check-green'] {
  color: #1a9921;
}

[icon-color='blue-grad'] {
  color: linear-gradient(to right, #0679e5, #0047b3);
  background: linear-gradient(to right, #0679e5, #0047b3);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  display: inline-block;
}

[icon-color='purple-grad'] {
  background: linear-gradient(60deg, #ae92ea, #754ad4);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  display: inline-block;
}

[icon-color='orange-grad'] {
  background: linear-gradient(60deg, #ffc56f, #eb9f2f);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  display: inline-block;
}

[icon-color='green-grad'] {
  background: linear-gradient(60deg, #a6dd52, #179128);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  display: inline-block;
}

[icon-color='red-grad'] {
  background: linear-gradient(60deg, #feb678, #ff384d);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  display: inline-block;
}