.list-group {
    display: flex;
    flex-direction: column;

    // No need to set list-style: none; since .list-group-item is block level
    padding-left: 0; // reset padding because ul and ol
    margin-bottom: 0;
}


.list-group-item-action {
    width: 100%; // For `<button>`s (anchors become 100% by default though)
    text-align: inherit; // For `<button>`s (anchors inherit)

    &:focus,
    &:hover {
        color: @list-group-action-hover-color;
        text-decoration: none;
        background-color: @list-group-hover-bg;
    }

    &:active {
        color: @list-group-action-active-color;
        background-color: @list-group-action-active-bg;
    }
}

.list-group-item {
    position: relative;
    display: block;
    padding: @list-group-item-padding-y @list-group-item-padding-x;
    // Place the border on the list items and negative margin up for better styling
    margin-bottom: -@list-group-border-width;
    background-color: @list-group-bg;
    border: @list-group-border-width solid @list-group-border-color;

    &:first-child {
        border-top-left-radius: @list-group-border-radius;
        border-top-right-radius: @list-group-border-radius;
    }

    &:last-child {
      margin-bottom: 0;
      border-bottom-right-radius: @list-group-border-radius;
      border-bottom-left-radius: @list-group-border-radius;
    }

    &.disabled,
    &:disabled {
        color: @list-group-disabled-color;
        background-color: @list-group-disabled-bg;
    }

    // Include both here for `<a>`s and `<button>`s
    &.active {
        z-index: 2; // Place active items above their siblings for proper border styling
        color: @list-group-active-color;
        background-color: @list-group-active-bg;
        border-color: @list-group-active-border-color;
    }
}


// Flush list items
//
// Remove borders and border-radius to keep list group items edge-to-edge. Most
// useful within other components (e.g., cards).

.list-group-flush {
    .list-group-item {
        border-right: 0;
        border-left: 0;
        border-radius: 0;
        &:first-child {
            border-top: 0;
        }
        &:last-child {
            border-bottom: 0;
        }
    }
  }


.list-group-item-variant(@state, @background, @hover-background, @color) {
    .list-group-item-@{state} {
      color: @color;
      background-color: @background;
    }

    //scss-lint:disable QualifyingElement
    a.list-group-item-@{state},
    button.list-group-item-@{state} {
      color: @color;

      &:focus,
      &:hover {
        color: @color;
        background-color: @hover-background;
      }

      &.active {
        color: #fff;
        background-color: @color;
        border-color: @color;
      }
    }
    // scss-lint:enable QualifyingElement
  }

// color
.for-each(@colors, {
    @bgname:    "@{key}-1";
    @bghname:   "@{key}-2";
    @cname:     "@{key}-9";
    .list-group-item-variant(@key, @@bgname, @@bghname, @@cname);
});

.for-each(@aliasColors, {
    @bgname:    "@{value}-1";
    @bghname:   "@{value}-2";
    @cname:     "@{value}-9";
    .list-group-item-variant(@key, @@bgname, @@bghname, @@cname);
});