//clear
.icon-clear {
  @extend %input-icon;

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

//sort
.icon-sort {
  &--desc {
    &::before {
      @extend %aid-icon;
      content: "\F74B";
    }
  }

  &--asc {
    &::before {
      @extend %aid-icon;
      content: "\F74B";
      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 {
  .icon-#{$key} {
    &::before {
      display: inline-block;
      color: nth($value, 1);
    }
  }
}

//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;
}