//
// LIST GROUP
//

//   /\  /\  /\  /\  /\  /\  /\  /\  /\  /\  /\  /\  /\  /\  /\  /\
//  //\\//\\//\\//\\//\\//\\//\\//\\//\\//\\//\\//\\//\\//\\//\\//\\
//  \\//\\//\\//\\//\\//\\//\\//\\//\\//\\//\\//\\//\\//\\//\\//\\//
//  //\\ \/  \/  \/  \/  \/  \/  \/  \/  \/  \/  \/  \/  \/  \/ //\\
//  \\//                                                        \\//
//   \/              THIS WILL BE DEPRECATED SOON!               \/
//   /\                                                          /\
//  //\\                                                        //\\
//  \\//        Do NOT add any new uses for this file!          \\//
//  //\\                                                        //\\
//  \\//    _list-groups.scss is the new file for list groups.  \\//
//   \/      If you find views using these old styles please     \/
//   /\          change them over to _list-groups.scss.          /\
//  //\\                                                        //\\
//  \\// /\  /\  /\  /\  /\  /\  /\  /\  /\  /\  /\  /\  /\  /\ \\//
//  //\\//\\//\\//\\//\\//\\//\\//\\//\\//\\//\\//\\//\\//\\//\\//\\
//  \\//\\//\\//\\//\\//\\//\\//\\//\\//\\//\\//\\//\\//\\//\\//\\//
//   \/  \/  \/  \/  \/  \/  \/  \/  \/  \/  \/  \/  \/  \/  \/  \/


//
// STRUCTURE
//
//<ul class="rf-list-group rf-list-group--[modifiers]">
//  <li class="rf-list-group__item rf-list-group__item--[status]">
//    <h3 class="rf-list-group__title">
//      This is the title of the item with <a href="#" class="rf-list-group__titlelink">a link</a>
//    </h3>
//    <div class="rf-list-group__info">
//      This is some info about the item, like links and timestamp
//    </div>
//  </li>
//</ul>
//

.rf-list-group {
  clear: both;
  list-style-type: none;
  margin: 0;
  padding: 0;
}

.rf-list-group__item {
  border: $border-default;
  padding: $list-padding;
  margin-top: -1px;
}

.rf-list-group__item:first-child {
  border-top-left-radius: $border-radius;
  border-top-right-radius: $border-radius;
}

.rf-list-group__item:last-child {
  border-bottom-right-radius: $border-radius;
  border-bottom-left-radius: $border-radius;
}

// LIST GROUP TITLES

.rf-list-group__title {
  @include truncate;
  @extend %h3;

  color: $charcoal;
  font-size: 14px;
  line-height: 18px;
  position: relative;
}

.rf-list-group__title--wrap {
  @include untrunc;
}

.rf-list-group__title--notbold {
  font-weight: normal;
}

.rf-list-group__titlelink {
  color: $charcoal;

  @include hocus() {
    color: $black;
    text-decoration: none;
  }
}

.rf-list-group__info {
  color: $slate;
  display: flex;
  font-size: 13px;
  overflow: hidden;
}

.rf-list-group__info--full {
  width: 100%;
}


//
// LIST ITEM - STATUSES
//

.rf-list-group__item--danger,
.rf-list-group__item--failure,
.rf-list-group__item--aborted {
  border-left: 6px solid $red;
}

.rf-list-group__item--pending {
  border-left: 6px solid $lemon;
}

.rf-list-group__item--started,
.rf-list-group__item--ongoing {
  border-left: 6px solid $blue-bright;
}

.rf-list-group__item--success {
  border-left: 6px solid $green;
}

.rf-list-group__item--irrelevant {
  border-left: 6px solid $stormy;
  opacity: $opacity-default;
}


//
// LISTS GROUP W/ LINES
//

.rf-list-group--lines {

  .rf-list-group__item {
    border-color: $prewhite;
    border-left-width: 0;
    border-radius: 0;
    border-right-width: 0;
  }

  .rf-list-group__item:first-child {
    border-top-width: 0;
  }

  .rf-list-group__item:last-child {
    border-bottom-width: 0;
  }
}

.rf-list-group__item--condensed {
  padding: $list-padding/2;

  .rf-list-group__item__trigger {
    padding: $list-padding/2;
  }
}


// List item with accordion trigger

// Format:

// <li class="rf-list-group__item rf-list-group__item--hastrigger">
//   <a aria-expanded="false"
//      data-toggle="collapse"
//      class="rf-list-group__item__trigger"
//      href="#id">
//     <h3 class="rf-h3 rf-list-group__title">Title</h3>
//   </a>
//   <div class="rf-well collapse">
//     Collapsed content
//   </div>
// </li>

.rf-list-group__item--hastrigger {
  padding: 0;
}

.rf-list-group__item__trigger {
  @include trigger_arrow( $arrow-pos: $list-padding/2 );
  color: $charcoal;
  display: block;
  padding: $list-padding;
  position: relative;
  width: 100%;

  @include hocus() {
    background-color: $prewhite;
    color: $charcoal;
    text-decoration: none;
  }

  &[aria-expanded='true'] {
    background-color: $prewhite;
    border-bottom: $mercury;
  }
}