// 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-item-icon-margin-right: 10px !default;
$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-gap-item-margin-bottom: 2px !default;
$list-group-media-heading-font-size: $font-size-base !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
// ========================================================================

.list-group {
  margin-bottom: 20px;

  &-item {

    @include hover-focus {
      // don't agree with bootstrap v4.0.0 :"z-index: 1";
      z-index: auto; // for not destroy z-index stacking context
    }
    & > .media:only-child {
      margin: 0;
    }
  }

  .media {
    width: 100%;
    padding: 2px 0;
    border-bottom: 0;
  }

  .media-heading {
    margin-top: 0;
    margin-bottom: 5px;
    font-size: $list-group-media-heading-font-size;
  }
}

.list-group-full {
  > .list-group-item {
    padding-right: 0;
    padding-left: 0;
  }
}

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

  &.disabled {
    @include plain-hover-focus {
      color: $list-group-link-disabled-color;
      cursor: not-allowed;
      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;
    }
  }
}

.list-group-item {
  .icon {
    margin-right: $list-group-item-icon-margin-right;
  }
}

// Modifier: `list-group.bg-inherit`
// -------------------------

.list-group.bg-inherit {
  border-radius: $border-radius;

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

    &:hover,
    &:focus {
      z-index: auto;
    }

    &.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`
// -------------------------

.list-group-gap {
  .list-group-item {
    margin-bottom: $list-group-gap-item-margin-bottom;
    border-radius: $border-radius;
  }
}

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

.list-group-full {
  .list-group-item {
    padding-right: 0;
    padding-left: 0;
  }
}

// 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-heading {
  margin-top: 0;
  margin-bottom: 5px;
}

.list-group-item-text {
  margin-bottom: 0;
  line-height: 1.3;
}

.list-group-item.active {
  @include plain-hover-focus {
    color: $list-group-active-color;
    background-color: $list-group-active-bg;
    border-color: $list-group-active-border;

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