@use 'sass:map';
@use '../utils/tokens.scss' as tokens;
@use './icon.vars.scss' as vars;

%icon-rendering-preset {
  -webkit-font-feature-settings: 'liga';
  font-feature-settings: 'liga';
  -webkit-font-smoothing: antialiased;
}

.#{vars.$iconBaseClass} {
  @extend %icon-rendering-preset;
  #{vars.$iconColor}: inherit;
  box-sizing: border-box !important;
  font-weight: normal;
  font-style: normal;
  fill: currentColor;
  font-size: var(#{vars.$iconSize}, tokens.$bm-sem-size-icon-md);
  width: var(#{vars.$iconSize}, tokens.$bm-sem-size-icon-md);
  height: var(#{vars.$iconSize}, tokens.$bm-sem-size-icon-md);
  color: var(#{vars.$iconColor});
  vertical-align: middle;

  line-height: inherit;
  letter-spacing: normal;
  text-transform: none;
  display: inline-block;
  white-space: nowrap;
  word-wrap: normal;

  @each $color, $value in vars.$iconColors {
    &--#{$color} {
      #{vars.$iconColor}: #{$value};
    }
  }

  @each $size, $value in vars.$iconSizes {
    &--#{$size} {
      #{vars.$iconSize}: #{$value};
    }
  }

  &--clickable {
    cursor: pointer;
  }
}