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

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

  .list-group-item {
    @extend %font-size-sm,
            .d-flex,
            .align-items-center,
            .text-primary;

    span {
      @extend .text-default;
    }

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

    @include hover-focus-active() {
      &,
      span {
        @extend .text-secondary-darker;
      }
    }
  }

  &: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 {
          @extend .text-secondary;
        }
      }
    }
  }
}

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

  .list-group {
    .list-group-item {
      @extend %font-size-lg,
              .py-3,
              .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 {
    @extend .x-list-group-dark;

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

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

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

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

}