.x-list-group-content {
  @extend %list-group,
          %list-group-flush;

  .list-group-item {
    @extend %list-group-item-action;

    .x-list-group-item-header,
    .x-list-group-item-content {
      @extend %d-flex,
              %align-items-center,
              .w-100;
    }

    .x-list-group-item-header {
      @extend %text-info,
              %justify-content-between;
      label {
        @extend %font-size-xs,
                %mb-0;
      }
      .x-icon-container {
        @extend %x-icon-lg,
                %text-info,
                .is-clickable;

        @include hover-focus-active {
          @extend %cursor-pointer,
                  %text-primary;
        }
      }
    }

    .x-list-group-item-content {
      > * {
        @extend %d-flex,
        %flex-auto;
      }

      .x-icon-container {
        @extend %cursor-pointer,
        %align-self-center;
        @include hover-focus-active { }
      }

      .x-list-group-content-action {
        @extend %d-flex;
        @include invisible(hidden);

        a {
          @extend %text-capitalize,
          %text-center;
        }
      }
    }

    @include hover-focus-active {
      @extend %cursor-pointer;

      a {
        color: theme-color("primary-lighter");
        @include x-hover-focus-active {
          color: theme-color("secondary-darker");
        }
      }

      .x-list-group-content-action {
        @include invisible(visible);
      }
    }
  }
}

.x-list-group-text {
  @extend %list-group,
          %list-group-flush;

  .list-group-item {
    @extend %d-flex,
            %align-items-center,
            %py-3;

    .x-icon-container {
      @extend %mr-2,
      %align-self-center;
    }

    h6 {
      @extend %text-primary-lighter,
      %mb-0;
    }
  }

  &.x-list-group-border-bottom {
    .list-group-item {
      &:last-child {
        @extend .border-bottom
      }
    }
  }

  .x-list-group-title {
    @extend %text-truncate,
            %text-primary-lighter,
            %mb-2;
  }

  .x-list-group-subtitle {
    @extend %text-body,
            %text-truncate,
            %mb-0;
  }

  .x-list-group-description {
    @extend .ag-content-description;
  }

  @include hover-focus-active {
    @extend %cursor-pointer;

    a.x-no-hover {
        text-decoration: none;
    }
  }
}