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


$x-avatar-bg:                 $gray-400 !default;
$x-avatar-text:               theme-color("default") !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);
  color: $x-avatar-text !important;

  .x-list-group-menu .list-group-item & {
    margin-left: -0.25rem !important;
    margin-right: 0.75rem !important;
  }

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

}

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

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

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

.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;
    }
  }
}