$avatar-darkestGray: $darkestGray;
$avatar-background-color: $white;
$avatar-width: 50px;
$avatar-height: $avatar-width;
$avatar-border-radius: 35%;
$avatar-content-font-weight: 500;
$avatar-content-border-radius: 7px;
$avatar-content-min-width: 18px;
$avatar-content-min-height: $avatar-content-min-width;
$avatar-badge-width: 13px;
$avatar-badge-height: $avatar-badge-width;
$avatar-badge-background-color: $lightGray;
$avatar-badge-width-z-index: 200;
$avatar-badge-font-size: 0.6rem;
$avatar-badge-font-weight: 700;
$avatar-badge-darkestGray: $darkestGray;
$avatar-badge-border-width: 2px;
$avatar-badge-border-color: $white;
$mini-avatar-width: 30px;
$mini-avatar-height: $mini-avatar-width;
$mini-avatar-font-size: 0.7rem;
$sm-avatar-width: 40px;
$sm-avatar-height: $sm-avatar-width;
$sm-avatar-font-size: 0.8rem;
$lg-avatar-width: 60px;
$lg-avatar-height: $lg-avatar-width;
$lg-avatar-font-size: 1.5rem;
$xl-avatar-width: 70px;
$xl-avatar-height: $xl-avatar-width;
$xl-avatar-font-size: 2rem;

.avatar {
  width: $avatar-width;
  height: $avatar-height;
  background-color: $avatar-background-color;
  color: $avatar-darkestGray;
  border-radius: $avatar-border-radius;
  margin: 5px;
  display: inline-block;
  position: relative;

  .avatar-content {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    user-select: none;
    font-weight: $avatar-content-font-weight;
  }

  .avatar-image {
    width: 100%;
    height: 100%;
    border-radius: inherit;
    object-fit: cover;
  }

  .avatar-badge {
    position: absolute;
    width: $avatar-badge-width;
    height: $avatar-badge-height;
    border-radius: 50%;
    background-color: $avatar-badge-background-color;
    z-index: $avatar-badge-width-z-index;
    top: -4px;
    right: -4px;
    font-size: $avatar-badge-font-size;
    font-weight: $avatar-badge-font-weight;
    border: $avatar-badge-border-width solid $avatar-badge-border-color;
    color: $avatar-badge-darkestGray;

    @each $color, $value in $colors {
      &.#{$color} {
        background-color: $value;
        color: get-contrast($value);
      }
    }

    &.top-left {
      top: -4px;
      left: -4px;
    }

    &.bottom-right {
      top: inherit;
      bottom: -4px;
      right: -4px;
    }

    &.bottom-left {
      top: inherit;
      bottom: -4px;
      left: -4px;
    }

    &.has-content {
      width: auto;
      height: auto;
      border-radius: $avatar-content-border-radius;
      min-width: $avatar-content-min-width;
      display: flex;
      align-items: center;
      justify-content: center;
      line-height: 0.9rem;
      padding: 0 3px;
      min-height: $avatar-content-min-height;
      font-size: 0.6rem;
      font-weight: 700;
    }
  }

  @each $color, $value in $colors {
    &.#{$color} {
      background-color: $value;
      color: get-contrast($value);
    }
  }

  &.circle {
    border-radius: 50%;
  }

  &.square {
    border-radius: 0;
  }

  &.mini {
    width: $mini-avatar-width;
    height: $mini-avatar-height;

    .avatar-content {
      font-size: $mini-avatar-font-size;
    }
  }

  &.sm {
    width: $sm-avatar-width;
    height: $sm-avatar-height;

    .avatar-content {
      font-size: $sm-avatar-font-size;
    }
  }

  &.lg {
    width: $lg-avatar-width;
    height: $lg-avatar-height;

    .avatar-content {
      font-size: $lg-avatar-font-size;
      font-weight: 400;
    }
  }

  &.xl {
    width: $xl-avatar-width;
    height: $xl-avatar-height;

    .avatar-content {
      font-size: $xl-avatar-font-size;
      font-weight: 400;
    }
  }

  // TODO Grouping

  // TODO Loading

  // TODO Border Color
}