@import "../../helpers";
.sf-icon {
  position: var(--icon-position, relative);
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  width: var(--icon-width, var(--icon-size, #{map-get($sizes, "sm")}));
  height: var(--icon-height, var(--icon-size, #{map-get($sizes, "sm")}));
  background: transparent;
  fill: var(--icon-color, #{map-get($icon-colors, "black")});   
  svg,
  img {
    width: inherit;
    height: inherit;
  }
  &__badge {
    position: absolute;
    top: var(--icon-badge-top, 0);
    right: var(--icon-badge-right, 0);
  }
  @each $palette, $color in $icon-colors {
    &.color-#{$palette} {
      --icon-color: #{$color};
    }
  }
  @each $profile, $size in $sizes {
    &.size-#{$profile} {
      --icon-size: #{$size};
    }
  }
}