$x-list-group-action-disabled-opacity:  0.5    !default;
$x-list-group-action-space:             2rem   !default;
$x-list-group-action-space-lg:          2.5rem !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;
    }
    &.disabled {
      @extend %cursor-default;
      opacity: $x-list-group-action-disabled-opacity;
    }
    @include x-hover-focus-active() {
      &,
      span {
        @extend .text-secondary-darker;
      }
    }
  }

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

      .list-group-item {
        @extend .pl-0;

        .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,
              .font-weight-light;

      .x-icon-container {
        @extend .x-icon-xl;

      }
    }
  }

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

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

.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;
  }

}