.sui-a-avatar {
  position: relative;
  display: inline-block;
  vertical-align: middle;
  height: 0;
  color: $sui-color-brand-denim-100;
  background: $sui-color-brand-denim-700;
  border-radius: $sui-border-radius-rounded;
  border: $sui-size-border solid rgba(0, 0, 0, .1);
  text-align: center;
  font-family: $sui-font-family-secondary;
  font-weight: bold;
  text-transform: uppercase;

  img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: $sui-border-radius-rounded;
  }

  i {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    opacity: .9;
  }

  span {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    font-family: $sui-font-family-secondary;
    font-size: .7em;
    font-weight: bold;
    overflow: hidden;
    opacity: .9;
  }

  // Default size
  @include suiAvatarSize($sui-size-xs, $sui-font-size-md);

  &.as--sm {
    @include suiAvatarSize($sui-size-xs*.66, $sui-font-size-xs);

    &.as--stacked + .as--stacked {
      margin-left: rem(-4);
    }

    &.as--you::after {
      padding: $sui-space-xxs*.66;
      font-size: $sui-font-size-xxs*.66;
    }
  }

  &.as--lg {
    @include suiAvatarSize($sui-size-sm, $sui-font-size-xl);
  }

  &.as--xl {
    @include suiAvatarSize($sui-size-md, $sui-font-size-xxl);

    &.as--stacked + .as--stacked {
      margin-left: rem(-24);
    }

    &.as--you::after {
      padding: $sui-space-xs;
      font-size: $sui-font-size-sm;
      border-radius: $sui-border-radius-md;
    }
  }

  &.as--start {
    margin-right: .5em;
  }

  &.as--between {
    margin-left: .5em;
    margin-right: .5em;
  }

  &.as--end {
    margin-left: .5em;
  }

  &.as--you {
    &::after {
      content: 'you';
      text-transform: uppercase;
      position: absolute;
      top: 100%;
      left: 50%;
      transform: translate(-50%, -50%);
      line-height: 1;
      color: $sui-color-brand-denim-100;
      background: $sui-a-avatar-you-color;
      font-size: $sui-font-size-xxs;
      letter-spacing: 0;
      font-weight: bold;
      padding: $sui-space-xxs;
      border-radius: $sui-border-radius-sm;
      white-space: nowrap;
    }
  }

  &.as--group {
    border-radius: $sui-border-radius-md;

    &.as--xl {
      border-radius: $sui-border-radius-xl;
    }
  }

  &.as--stacked {
    border: $sui-size-border solid $sui-color-brand-denim-100;
    box-shadow: white 0 0 0 rem(2);
  }

  &.as--stacked + .as--stacked {
    border: $sui-size-border solid $sui-color-brand-denim-100;
    box-shadow: white 0 0 0 rem(2);
    margin-left: rem(-12);
  }

  @include suiAvatarStackedColor('as--dark', $sui-color-brand-denim-800);

  &.as--locked {
    background: $sui-color-danger;
  }
}