@use "sass:map";

$draco-avatar-sizes: ( "small", "medium", "large" );

$draco-avatar-size-props: (
  "small": (
    "width": 30px,
    "height": 30px,
    "font-size": 11px,
    "line-height": 1.5,
  ),
  "medium": (
    "width": 39px,
    "height": 39px,
    "font-size": 12px,
    "line-height": 1.5,
  ),
  "large": (
    "width": 47px,
    "height": 47px,
    "font-size": 15px,
    "line-height": 1.5,
  ),
);

@each $size in $draco-avatar-sizes {
  .draco-avatar.draco-avatar--size-#{$size},
  .draco-avatar-group--remaining-count.draco-avatar-remaining--size-#{$size} {
    width: map.get($draco-avatar-size-props, $size, "width");
    height: map.get($draco-avatar-size-props, $size, "height");
    font-size: map.get($draco-avatar-size-props, $size, "font-size");
    line-height: map.get($draco-avatar-size-props, $size, "line-height");
  }
}