.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 %justify-content-between,
      %text-info;

      label {
        @extend %mb-0,
        %font-size-xs;
      }
      .x-icon-container {
        @extend %x-icon-lg,
                %text-info,
                .is-clickable;

        @include hover-focus-active {
          @include custom-theme-color(primary, color);
          cursor: $cursor-pointer;

        }
      }
    }

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

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

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

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

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

      a {
        @include custom-theme-color(primary-lighter, color);

        @include x-hover-focus-active {
          @include custom-theme-color(secondary-darker, color);
        }
      }

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