$x-list-group-action-space:        2rem !default;
$x-list-group-action-space-lg:     4rem !default;

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

  .list-group-item {
    @include custom-theme-color(primary, color);
    @extend %d-flex,
            %font-size-sm,
            %align-items-center;

    span {
      @extend %text-default;
    }

    .x-icon-container {
      @extend %x-icon-lg,
              %pr-3;
    }

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

  &:not(.x-no-indent) {
    .list-group {
      padding-left: $x-list-group-action-space;

      .list-group-item {
        .x-icon-container {
          margin-left: -$x-list-group-action-space;
        }
      }
    }
  }

  &.x-list-group-dark {
    .list-group {
      .list-group-item {
        @extend %mb-1,
                %text-info;

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

%x-list-group-action-lg,
.x-list-group-action-lg {
  @extend %x-list-group-action;

  .list-group {
    .list-group-item {
      @extend %py-3,
              %font-size-lg,
              %border-0;

      .x-icon-container {
        @extend %x-icon-lg;

      }
    }
  }

  &.x-card {
    @extend %p-0;
  }

  &:not(.x-no-indent) {
    .list-group {
      @extend %p-0;
    }
    .list-group-item {
      padding-left: $x-list-group-action-space-lg;
      .x-icon-container {
        margin-left: -($x-list-group-action-space-lg - 2rem);
      }
    }
  }
}

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

  .x-list-group-action-slim-item {
    @extend %px-0,
            %py-3,
            %border-0,
            %rounded-0,
            %btn,
            %btn-link,
            %d-flex,
            %text-info,
            %justify-content-center,
            %align-items-center,
            %position-relative;
    .x-icon-container {
      @extend %x-icon-lg;
    }

    @include hover-focus-active() {
      @include custom-theme-color(secondary, background-color);
      .x-icon-container {
        @extend %text-white;
      }
    }
  }

  .aside-slim-separator {
      @extend %mx-3,
              %my-1,
              %border,
              %border-info-transparent;
  }
}