@use "sass:map";

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

// Simplified to only include width and height
$draco-icon-sizes: (
  "small": (
    "width": 14px,
    "height": 14px
  ),
  "medium": (
    "width": 18px,
    "height": 18px
  ),
  "large": (
    "width": 24px,
    "height": 24px
  )
);

$draco-provider-colors: (
  "github": #232121,
  "gitlab": #6B4FBB,
  "bitbucket": #0052CC
);

.draco-avatar-github,
.draco-avatar-gitlab,
.draco-avatar-bitbucket {
  position: relative;
  display: inline-block;
  width: fit-content;

  .draco-icon {
    position: absolute;
    border-radius: 50%;
    padding: 1px;
    z-index: 2;
    bottom: 0;
    left: 0;
    transform: translate(-30%, 15%);
    box-shadow: 0 0 0 1px var(--token-color-palette-neutral-900);
    display: flex;
    align-items: center;
    justify-content: center;

    svg {
      display: block;
    }

    @each $size in $draco-avatar-sizes {
      &.draco-icon-github--size-#{$size},
      &.draco-icon-gitlab--size-#{$size},
      &.draco-icon-bitbucket--size-#{$size} {
        width: map.get($draco-icon-sizes, $size, "width");
        height: map.get($draco-icon-sizes, $size, "height");
      }
    }
  }
}

.draco-avatar-group {
  .draco-icon {
    transform: translate(-60%, -10%);
  }
}

@each $provider, $color in $draco-provider-colors {
  .draco-avatar-#{$provider} .draco-icon {
    background-color: $color;
  }
}