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

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

  .x-aside-theme-dark & {
    @extend %x-theme-dark-aside-mobile;
  }

  .list-group-item {
    @extend .d-flex,
            .border-0,
            .py-2,
            .my-2,
            .bg-transparent,
            %cursor-pointer,
            .align-items-center;
    @include border-radius($border-radius-lg);

    .x-icon-container {
      @extend .text-primary;
    }

    @include x-hover-focus-active() {
      @extend .bg-light-secondary,
              .text-primary;
      .x-icon-container {
        @extend .text-primary;
      }
    }

    &.x-list-item-action {
      .x-aside-theme-dark & {
        @extend .text-secondary;
      }
      .x-icon-container {
        .x-aside-theme-dark & {
          @extend .text-secondary;
        }
      }
    }

    .x-aside-theme-dark & {
      @extend %x-theme-dark-menu-item;
    }

    .x-avatar {
      @extend .mr-2;
    }

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

    .x-list-item-stacked {
      @extend .d-flex,
              .flex-column;

      .x-list-item-action {
        @extend .text-secondary,
                %font-size-sm;
      }
    }
  }
}