//@import "../bootstrap-core/list-group";

// Base class
//
// Easily usable on <ul>, <ol>, or <div>.

.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;
  @include border-radius($list-group-border-radius);
}

// States for ordered list groups

.list-group-ordered > {
  .list-group-item-info::before {
    background: $info;
    color: color-yiq($info);
  }

  .list-group-item-success::before {
    background: $success;
    color: color-yiq($success);
  }

  .list-group-item-warning::before {
    background: $warning;
    color: color-yiq($warning);
  }

  .list-group-item-danger::before {
    background: $danger;
    color: color-yiq($danger);
  }
}

// Interactive list items
//
// Use anchor or button elements instead of `li`s or `div`s to create interactive
// list items. Includes an extra `.active` modifier class for selected items.

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

  &.active {
    background: $list-group-action-hover-bg;
    &::before {
      background: $list-group-active-bg;
      color: $list-group-active-color;
    }
  }

  // Hover state
  @include hover-focus {
    &:not(.disabled):not(:disabled) {
      cursor: pointer;
      background-color: $list-group-action-hover-bg;
    };
    &::before {
      color: $list-group-action-hover-color;
      text-decoration: none;
      background-color: $list-group-hover-bg;
    }
  }

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

  &.disabled,
  &:disabled {
    color: $list-group-disabled-color;
  }
}


// Individual list items
//
// Use on `li`s or `div`s within the `.list-group` parent.

.list-group-item {
  position: relative;
  display: block;

  &:first-child {
    @include border-top-radius(inherit);
  }

  &:last-child {
    margin-bottom: 0;
    @include border-bottom-radius(inherit);
  }

  &.active::before {
    background: $list-group-active-bg;
    color: $list-group-active-color;
  }

  @include hover-focus {
    z-index: 1; // Place hover/active items above their siblings for proper border styling
    text-decoration: none;
  }

  &.disabled,
  &:disabled {
    color: $list-group-disabled-color;
  }

}


//Currently not in use
//
//// Horizontal
////
//// Change the layout of list group items from vertical (default) to horizontal.
//
//@each $breakpoint in map-keys($grid-breakpoints) {
//  @include media-breakpoint-up($breakpoint) {
//    $infix: breakpoint-infix($breakpoint, $grid-breakpoints);
//
//    .list-group-horizontal#{$infix} {
//      flex-direction: row;
//
//      > .list-group-item {
//        margin-right: -$list-group-border-width;
//        margin-bottom: 0;
//
//        &:first-child {
//          @include border-left-radius($list-group-border-radius);
//          @include border-top-right-radius(0);
//        }
//
//        &:last-child {
//          margin-right: 0;
//          @include border-right-radius($list-group-border-radius);
//          @include border-bottom-left-radius(0);
//        }
//      }
//    }
//  }
//}


// 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 {
    padding: $list-group-item-padding-y $list-group-item-padding-x;
    border: $list-group-border-width solid $list-group-border-color;
    margin-bottom: -$list-group-border-width;
    border-right-width: 0;
    border-left-width: 0;
    @include border-radius(0);
  }

  &:first-child {
    border-top-width: 0;
  }

  &:last-child {
    .list-group-item:last-child {
      border-bottom-width: 0;
    }
  }
}


// Contextual variants
//
// Add modifier classes to change text and background color on individual items.
// Organizationally, this must come after the `:hover` states.

//@each $color, $value in $theme-colors {
//  @include list-group-item-variant($color, theme-color-level($color, -9), theme-color-level($color, 6));
//}



// SEB Specific
.list-group-bullet {
  margin-bottom: $list-group-margin-bottom;
  li {
    content: '';
    display: inline-block;
    background-size: 8px 8px;
    background-position: 6px 16px;
    background-repeat: no-repeat;
    border: none;
    padding: .5rem 2rem 0;
    background-image: escape-svg($list-group-bullet-icon);
  }
}
.list-group-check {
  margin-bottom: $list-group-margin-bottom;
  li {
    content:'';
    display: inline-block;
    background-image: escape-svg($list-group-check-icon);
    background-size: 1rem 1rem;
    background-position: 0 0.75rem;
    background-repeat: no-repeat;
    border: none;
    padding: .5rem 2rem 0;
  }
}

.list-group {
  li p {
    margin: 0;
  }
}


.list-group-ordered li {
  counter-increment: list-order;
  border: none;
  padding: .5rem 2rem;
  &.active {
    background: $list-group-action-hover-bg;
  }
  &:focus {
    outline: 0;
    // box-shadow: 0 0 0 $input-btn-focus-width rgba($blue, .5) inset;
  }
  &::before {
    content:counter(list-order);
    position:absolute;
    left: 0;
    height: 1.5rem;
    width: 1.5rem;
    text-align:center;
    display:inline-block;
    // background: $list-group-bg;
    font-weight: $font-weight-medium;
  }
  &:disabled::before, &.disabled::before {
    background: $list-group-disabled-bg;
    color: $list-group-disabled-color;
  }
}