$avatar-size:                 2.5rem !default;
$avatar-size-xs:              1.75rem !default;
$avatar-size-sm:              2rem !default;
$avatar-size-lg:              4rem !default;
$avatar-size-xl:              6rem !default;

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

.x-avatar {
  @extend %m-0,
          .rounded-circle,
          %position-relative,
          %overflow-hidden,
          %bg-white,
          %x-flex-center,
          %font-size-sm,
          %font-weight-normal;
  @include custom-theme-color(primary, color);
  border: $x-avatar-border-width solid $x-avatar-border-color;
  height: var(--avatar-size, $avatar-size);
  width: var(--avatar-size, $avatar-size);

  &::before {
    @extend %position-absolute,
            %w-100,
            %h-100;
    @include custom-theme-color(primary-transparent, background-color);
    z-index: 0;
    content: '';
  }

  // Avatar with tooltip
  &[placement] {
    @include hover-focus-active {
      @extend %cursor-pointer;
    }
  }

  &.is-xs {
    --avatar-size: #{$avatar-size-xs};
  }

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

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

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

  &.is-xl {
    --avatar-size: #{$avatar-size-lg};
    .ch2 {
      font-size: 1.55em;
      font-weight: 500;
      line-height: 1;
      margin-top: 2px;
    }
  }
}

.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-group {
  @extend %d-flex;
  max-width: 120px;
  margin-left: auto;
  padding-right: 0.5rem;

  .x-avatar-item {
    margin-right: -8px;
    border-radius: 50%;
  }
}

.dropdown-menu-avatar {
  max-height: 10rem;
  overflow: auto;

  .dropdown-item {
    @extend %cursor-default;
    padding: 0.25rem 0.75rem;
  }
}


.x-avatar-btn {
  .x-avatar {
    .x-icon {
      @extend %x-icon-sm;
    }
  }
  @include x-hover() {
    .x-avatar {
      color: theme-color("info") !important;
    }
  }
}