// Avatar
.c-avatar {
  @include avatar-base();

  img {
    z-index: 0;
    width: 100%;
    height: 100%;
    position: relative;
    border: $avatar-img-border;
    border-radius: $avatar-border-radius;
  }

  &-square {
    border-radius: $radius-sm;

    img {
      border-radius: $radius-sm;
    }

    &.c-avatar[data-status]::after {
      top: -2px;
      right: -2px;
    }
  }

  &[data-status]::after {
    $status-shadow: 0 0 0 1px $color-white;

    content: '';
    top: 0;
    right: 0;
    z-index: 1;
    height: 8px;
    min-width: 8px;
    position: absolute;
    color: $color-white;
    box-shadow: $status-shadow;
    background-clip: padding-box;
    border-radius: $radius-round;
    font-weight: $font-weight-semibold;
  }

  &[data-badge]::after {
    z-index: 1;
    font-size: 0;
    white-space: nowrap;
    content: attr(data-badge);
  }

  &[data-text]::before {
    top: 50%;
    left: 50%;
    z-index: 0;
    position: absolute;
    color: currentColor;
    content: attr(data-text);
    transform: translate(-50%, -50%);
  }
}

// All default Avatar color classes
@each $name, $hex in $theme-colors {
  .c-avatar-#{$name} {
    background-color: $hex;
  }

  .c-avatar[data-status='#{$name}']::after {
    background-color: $hex;
  }
}

// All default Avatar size classes
@each $name, $data in $avatar-sizes {
  $size: map-get($data, size);
  $font-size: map-get($data, font-size);

  .c-avatar-#{$name} {
    @include avatar-size($size, $font-size);

    &[data-status]::after {
      height: round(calc($size / 4));
      min-width: round(calc($size / 4));
    }
  }
}

// Extended Avatar color classes
@if $enable-extended-avatar-colors == true {
  @each $name, $hex in $extended-palette-light {
    .c-avatar-#{$name} {
      background-color: $hex;
      color: $color-gray-9;

      @if $name == "white" {
        box-shadow: inset 0 0 0 1px $color-gray-9;
      }
    }
  }

  // Extended Avatar LIGHT color classes
  @each $name, $hex in $extended-palette {
    .c-avatar-#{$name} {
      background-color: $hex;

      @if $name == "black" {
        box-shadow: inset 0 0 0 1px $color-white;
      }
    }
  }
}

.c-avatar-group {
  z-index: 1;
  display: flex;
  position: relative;

  .c-avatar {
    margin-left: -$avatar-group-spacing;
    box-shadow: $space-0 $space-0 $space-0 1px $color-white;
    transition: margin $avatar-group-transition;

    &:first-of-type {
      margin-left: $space-0;
      z-index: 5;
    }

    &:nth-of-type(2) {
      z-index: 4;
    }

    &:nth-of-type(3) {
      z-index: 3;
    }

    &:nth-of-type(4) {
      z-index: 2;
    }

    &:nth-of-type(5) {
      z-index: 1;
    }
  }

  &:hover {
    cursor: pointer;

    .c-avatar:not(:first-of-type) {
      margin-left: $avatar-group-spacing;
    }
  }
}


.c-avatar-xl[data-badge]::after {
  font-size: $font-size-3;
  min-width: $space-md + $space-xs;
  padding: $space-xxs $space-xs;
  height: $space-md + $space-xs;
  line-height: $line-height-xs;
}