//clear
.icon-clear{
  @extend %input-icon;
  &:before{
    content: "\f2b0";
    @extend %aid-icon;
  }
}

//sort
.icon-sort{
  &--desc{
    &:before{
      content: "\F74B";
      @extend %aid-icon;
    }
  }
  &--asc{
    &:before{
      content: "\F74B";
      @extend %aid-icon;
      transform: rotate(180deg);
    }
  }
}

//size
.icon-1.2x{
  font-size: 1.2em;
}

.icon-1.5x{
  font-size: 1.5em;
}

.icon-1.8x{
  font-size: 1.8em;
}

//color
@each $key, $value in $color-status {
  $gradient-color: nth($value, 3);
  .icon-gradient-#{$key} {
    &:before {
      @include text-gradient(nth($value, 2), nth($gradient-color, 2), nth($gradient-color, 3));
    }
  }
}

//bg
.icon-bg--circle,
.icon-bg--rectangle{
  width:40px;
  height:40px;
  line-height: 40px !important;
  text-align: center;
  flex-shrink:0;
}

//bg-shape
.icon-bg--circle{
  border-radius: 50%;
}
.icon-bg--rectangle{
  @include border-radius($border-radius);
}

//with bg icon size
.icon-bg--sm{
  width:32px;
  height:32px;
  line-height: 32px !important;
}
.icon-bg--lg{
  width:50px;
  height:50px;
  line-height: 50px !important;
}