// Name:            List groups
//
// Component:       `list-group`
//
// Modifiers:       `list-group.bg-inherit`
//                  `list-group-bordered`
//                  `list-group-gap`
//                  `list-group-full`
//                  `list-group-item-dark`
//
// ========================================================================

// Variables
// ========================================================================

$list-group-active-color                 : $brand-primary !default;

$list-group-link-hover-bg                : $bg-color-base !default;
$list-group-link-disabled-color          : $disabled-color-base !default;
$list-group-link-disabled-bg             : $gray-100 !default;

$list-group-action-active-color          : $color-white;
$list-group-action-active-bg             : $brand-primary;

$list-group-bg-inherit-item-border       : rgba(0, 0, 0, .075) !default;
$list-group-bg-inherit-item-hover-bg     : rgba(0, 0, 0, .075) !default;

$list-group-bordered-border              : $border-color-base !default;
$list-group-bordered-active-color        : $component-active-color !default;
$list-group-bordered-active-bg           : $component-active-bg !default;
$list-group-bordered-active-border       : $list-group-bordered-active-bg !default;

$list-group-hover-item-hover-bg          : $list-group-link-hover-bg !default;
// $list-group-hover-item-hover-color       : $list-group-action-hover-color !default;

// Component: List groups
// ========================================================================

a.list-group-item {
  @include hover-focus {
    color: $list-group-action-hover-color;
    background-color: $list-group-link-hover-bg;
  }
  color: $list-group-action-color;

  &.disabled {
    @include plain-hover-focus {
      color: $list-group-link-disabled-color;
      background-color: $list-group-link-disabled-bg;
    }
  }
  &.active {
    @include plain-hover-focus {
      color: $list-group-action-active-color;
      background-color: $list-group-action-active-bg;
    }
  }
}
// Modifier: `list-group.bg-inherit`
// -------------------------

.list-group.bg-inherit {
  .list-group-item {
    background-color: transparent;
    border-bottom-color: $list-group-bg-inherit-item-border;
    &:last-child {
      border-bottom-color: transparent;
    }
    &:hover {
      background-color: $list-group-bg-inherit-item-hover-bg;
      border-color: transparent;
    }
  }
}

// Modifier: `list-group-bordered`
// -------------------------

.list-group-bordered {
  .list-group-item {
    border-color: $list-group-bordered-border;
    &.active,
    &.active:hover,
    &.active:focus {
      color: $list-group-bordered-active-color;
      background-color: $list-group-bordered-active-bg;
      border-color: $list-group-bordered-active-border;
    }
  }
}

// Modifier: `list-group-dividered`
// -------------------------

.list-group-dividered {
  .list-group-item, {
    border-top-color: $list-group-bordered-border;

    &.active:hover {
      border-top-color: $list-group-bordered-border;
    }
  }

  .list-group-item:last-child {
    border-bottom-color: $list-group-bordered-border;
  }

  .list-group-item:first-child {
    border-top-color: $list-group-border-color;
    &.active:hover {
      border-top-color: $list-group-border-color;
    }
  }
}

// Modifier: `list-group-gap`
// -------------------------

// Modifier: `list-group-full`
// -------------------------

// add from---v3

.list-group-item {
  border: 1px solid transparent;
  // Disabled state
  &.disabled {
    @include plain-hover-focus {
      // Force color to inherit for custom content
      .list-group-item-heading {
        color: inherit;
      }
      .list-group-item-text {
        color: $list-group-disabled-text-color;
      }
    }
  }

  // Active class on item itself, not parent
  &.active {
    @include plain-hover-focus {
      // Force color to inherit for custom content
      .list-group-item-heading,
      .list-group-item-heading > small,
      .list-group-item-heading > .small {
        color: inherit;
      }
      .list-group-item-text {
        color: $list-group-active-text-color;
      }
    }
  }
}

// Custom content options
//
// Extra classes for creating well-formatted content within `.list-group-item`s.
.list-group-item.active {
  @include plain-hover-focus {
    background-color: $list-group-active-bg;
    border-color: $list-group-active-border;
    color: $list-group-active-color;

    .list-group-item-heading {
      color: inherit;
    }
  }
}

// Color Modifier
// ========================================================================

// Modifier: `list-group-item-dark`
// -------------------------

@include list-group-item-variant(dark, $state-dark-bg, $state-dark-text);

// Modifier: `list-group-hover`
// -------------------------
// not suitable for list-group(no this modifier) nest in list-group(add this modifier)
.list-group-hover {
  .list-group-item:hover {
    background-color: $list-group-hover-item-hover-bg;
  }
}

@include list-group-hover-item-variant(success, $state-success-bg, $state-success-text);
@include list-group-hover-item-variant(info, $state-info-bg, $state-info-text);
@include list-group-hover-item-variant(warning, $state-warning-bg, $state-warning-text);
@include list-group-hover-item-variant(danger, $state-danger-bg, $state-danger-text);
@include list-group-hover-item-variant(dark, $state-dark-bg, $state-dark-text);