$avatar-size:                 2.5rem !default;
$avatar-size-sm:              2rem !default;
$avatar-size-lg:              4rem !default;


$x-avatar-bg:                 $gray-400 !default;
$x-avatar-border-color:       $x-avatar-bg !default;
$x-avatar-border-width:       2px !default;

.x-avatar {
  @extend %font-size-sm,
          .position-relative,
          .rounded-circle,
          %d-flex,
          %m-0,
          %align-items-center,
          %justify-content-center,
          %text-white,
          %font-weight-normal,
          .overflow-hidden;

  background-color: $x-avatar-bg;
  border: $x-avatar-border-width solid $x-avatar-border-color;
  height: var(--avatar-size, $avatar-size);
  width: var(--avatar-size, $avatar-size);

  .ch3 {
    @extend %font-size-xs;
  }

}

.is-sm {
  --avatar-size: #{$avatar-size-sm};
  .x-icon {
    height: var(--avatar-size, $avatar-size);
    width: var(--avatar-size, $avatar-size);
  }
}

.is-md {
  --avatar-size: #{$avatar-size};
}

.is-lg {
  --avatar-size: #{$avatar-size-lg};

  .x-icon {
    transform: translateY(0.55rem);
  }
}

.x-avatar-thumbnail {
  @extend .img-fluid;
}

.x-avatar-list {
  @extend %d-flex;
  > * {
    @extend %mx-1;
    &:first-child {
      @extend %ml-0;
    }
    &:last-child {
      @extend %mr-0;
    }
  }
}

.x-avatar-notification {
  background-color: rgba(theme-color("primary"), 0.17);
  border: 0;
  * {
    color: theme-color("primary");
  }
}