@import "~bootstrap/scss/list-group";

.x-list-group-menu {
  @extend .px-3,
          .w-100;

  .list-group-item {
    @extend .d-flex,
            .border-0,
            .px-3,
            .my-2,
            .bg-transparent,
            .align-items-center;
    @include border-radius($border-radius-lg);
    color: $x-aside-nav-text-light;

    .x-aside-dark & {
      color: $x-aside-nav-text-dark;
    }

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

    @include x-hover-focus-active() {
      @extend .bg-light;
    }

    .x-aside-dark & {
      @include x-hover-focus-active() {
        @extend .bg-primary,
                .text-white;
      }
    }
  }
}