@import "../../../theme/global";

:host {
  display: inline-block;
  width: var(--lar-icon-size-small, 1rem);
  height: var(--lar-icon-size-small, 1rem);
  font-size: var(--lar-icon-size-small, 1rem) !important;
  box-sizing: content-box !important;
}

:host(.lar-icon-medium){
  width: var(--lar-icon-size-medium, 1.5rem);
  height: var(--lar-icon-size-medium, 1.5rem);
  font-size: var(--lar-icon-size-medium, 1.5rem) !important;
}

:host(.lar-icon-large){
  width: var(--lar-icon-size-large, 2rem);
  height: var(--lar-icon-size-large, 2rem);
  font-size: var(--lar-icon-size-large, 2rem) !important;
}

.lar-icon-inner, .lar-icon-inner > div {
  display: block !important;
  height: 100% !important;
  width: 100% !important;
}

@mixin generate-icon-color($color-name) {
  $value: map-get($colors, $color-name);
  $base: map-get($value, base);
  fill: var(--lar-color-#{$color-name}, #{$base}) !important;;
  stroke: var(--lar-color-#{$color-name}, #{$base}) !important;;
}

@each $color-name, $value in $colors {
  :host(.lar-color-#{$color-name}) {
    @include generate-icon-color($color-name);
  }
}