/**
  * @stylesheet list-group.less List group
  * @parent styles-base 18
  *
  * List groups are a flexible and powerful component for displaying not only simple lists of elements, but complex ones with custom content.
  *
  * ## Basic example
  * The most basic list group is simply an unordered list with list items, and the proper classes. Build upon it with the options that follow, or your own CSS as needed.
  * ```
  * <ul class="list-group">
  *  <li class="list-group-item">Cras justo odio</li>
  *  <li class="list-group-item">Dapibus ac facilisis in</li>
  *  <li class="list-group-item">Morbi leo risus</li>
  *  <li class="list-group-item">Porta ac consectetur ac</li>
  *  <li class="list-group-item">Vestibulum at eros</li>
  * </ul>
  * ```
  *
  * @demo demos/list-group/demo.html
  *
  * List groups are used in the list of interview on the A2J landing page:
  *
  * @demo demos/list-group-interviews/demo.html
  *
  * ## Button items
  * List group items may be buttons instead of list items (that also means a parent `<div>` instead of an `<ul>`). No need for individual parents around each element. *Don't use the standard `.btn` classes here.*
  *
  * @demo demos/list-group-button/demo.html
  *
  * ## Disabled items
  * Add `.disabled` to a `.list-group-item` to gray it out to appear disabled.
  *
  * @demo demos/list-group-disabled/demo.html
  *
  * ## Contextual classes
  * Use contextual classes to style list items, default or linked. Also includes `.active` state.
  *
  * @demo demos/list-group-contextual/demo.html
  *
  * ## Custom content
  * Add nearly any HTML within, even for linked list groups like the one below.
  *
  * @demo demos/list-group-custom/demo.html
**/


/**
* @styles var-list-groups List Groups
* @parent variables.less
*
* `list-group.less` Colors, padding, border, hover effects, and link colors for list groups.
*
**/

//== List group
//
//##

//* Background color on `.list-group-item`
@list-group-bg:                 #fff;
//* `.list-group-item` border color
@list-group-border:             #ddd;
//* List group border radius
@list-group-border-radius:      @border-radius-base;

//* Background color of single list items on hover
@list-group-hover-bg:           #f5f5f5;
//* Text color of active list items
@list-group-active-color:       @component-active-color;
//* Background color of active list items
@list-group-active-bg:          @component-active-bg;
//* Border color of active list elements
@list-group-active-border:      @list-group-active-bg;
//* Text color for content within active list items
@list-group-active-text-color:  lighten(@list-group-active-bg, 40%);

//* Text color of disabled list items
@list-group-disabled-color:      @gray-light;
//* Background color of disabled list items
@list-group-disabled-bg:         @gray-lighter;
//* Text color for content within disabled list items
@list-group-disabled-text-color: @list-group-disabled-color;

@list-group-link-color:         #555;
@list-group-link-hover-color:   @list-group-link-color;
@list-group-link-heading-color: #333;


.list-group {
  .border-radius(0);
  border: none;

  .list-group-item {
    padding: 5px 10px;
    margin-bottom: @grid-gutter-width/4;
    border: 1px solid transparent;
    .border-radius(0);

    &.item-selected {
      background: @alert-warning-bg;
      border: 1px solid @alert-warning-border;
      color: @text-color;

      .list-group-item-text {
        color: @text-color;
      }
    }
    &.guide-opened {
      border-left: 4px solid @brand-secondary !important;
      color: @text-color;

      .list-group-item-text {
        color: @text-color;
      }
    }
    &.guide-uploaded {
      border-left: 4px solid @brand-success !important;
      color: @text-color;

      .list-group-item-text {
        color: @text-color;
      }
    }
    &.active.item-selected, &.guide-uploaded.item-selected, &.guide-opened:hover, &.guide-uploaded:hover {
      background: @link-selected-color;
    }
    &.guide-opened:hover, &.guide-uploaded:hover {
      background: #f5f5f5;
      border: 1px solid @gray-lighter;
      cursor: pointer;
    }
    &.disabled, &.disabled:hover {
      background: none;
      color: @gray-lighter;
      border: none;
      cursor: not-allowed;
    }
    .title {
      color: @link-color;
    }
  }
  a.list-group-item, button.list-group-item {
    &:hover {
      .border;
      cursor: pointer;
    }
  }
  .list-group-item:last-child {
    margin-bottom: 0;
  }
}

/**
* @styles status Status, Selections, Active, and Hover
* @parent list-group.less 2
*
* The status of selected, active, and hovered list items has been based on the alert colors as defined above. Allows for users to select and hover selected and uploaded list items.
*
* @demo demos/list-group/status.html
*
**/