// List Group on Dark Bg

%x-list-group-dark,
.x-list-group-dark {
  @extend %bg-dark;

  .list-group {
    .list-group-item {
      @include x-hover-focus-active {
        background-color: rgba($white, .08);
      }
    }
  }
}

%x-list-group-profile,
.x-list-group-profile {
  @extend %list-group-item,
          %border-0,
          %px-3,
          %px-md-3,
          %list-group-flush,
          %w-100;

  &.x-list-group-profile-slim {
    @extend %px-0,
  }
}

%x-list-group-profile_item,
.x-list-group-profile_item {
  @extend %w-100,
          %px-2,
          %align-items-start,
          %d-flex;

  .x-avatar {
    @extend %mt-1;
  }

  .x-list-group-profile-slim & {
    @extend %justify-content-center;
  }
}


%x-profile-details,
.x-profile-details {
  @extend %d-flex,
          %flex-column,
          %ml-3;
  max-width: 9rem;

  &_action {
    @include custom-theme-color(primary, color);
    @extend %cursor-pointer;
  }

  &_email {
    font-size: $font-size-xs;
    @extend %mb-2,
            %text-truncate;
  }

  .x-list-group-profile-slim & {
    @extend %d-none;
  }
}