// ------------------- //
// LISTGROUP
// new with wrapper
// .listgroup-wrapper
//    .listgroup-intro
//    .listgroup-content /.list-group
//    .listgroup-footer
//
// .listgroup-arrow
// .listgroup-arrow-right
// .listgroup-content
// .listgroup-footer
// .listgroup-image-blog
// .listgroup-info
// .list-group-item
// .listgroup-wrapper
// .listgroup-color

// -- to set page color -- //
.listgroup-color {
  color: @hwk-blue-light;
}

// -- DEFAULT -- //
.listgroup-wrapper {
  .white-box();
  margin-left: -@listgroup-padding-x;
  margin-right: -@listgroup-padding-x;
  margin-bottom: (@grid-gutter-width - @listgroup-padding-x);

  @media (min-width: @screen-xl-min) {
    margin-left: -@listgroup-padding-x-xl;
    margin-right: -@listgroup-padding-x-xl;
  }
  /*@media (max-width: @screen-xs-max) {
    margin-left: -@listgroup-padding-x-xs;
    margin-right: -@listgroup-padding-x-xs;
  }*/

  // if NO INTRO
  /*& > div.list-group:first-child,
  & > div.listgroup-content:first-child {
    .list-group-item:first-child {
      border-top: none;
    }
  }*/

  // if blue box
  &.color-hwk-blue-light-25 {
    .list-group-item {
      background-color: @hwk-blue-light-25;
      border-color: @hwk-blue-light-50;
    }
    .listgroup-text {
      p, span,
      &::after, &::before {
        color: @hwk-blue-dark;
      }
      p:last-child {
        padding-bottom: 0;
      }
    }
  }
}


// if .row.d-flex.d-flex-wrapper
.row.d-flex.d-flex-wrap,
.row.stretch {
  .listgroup-wrapper {
    //margin-bottom not working since height : 100% => set height instead
    height: calc(100% - ((@grid-gutter-width-half - @listgroup-padding-x) * 2)); // docu: needs row to have .d-flex.d-flex-wrap
    @media (min-width: @screen-xl-min) {
      height: calc(100% - ((@grid-gutter-width-half-xl - @listgroup-padding-x-xl) * 2));
    }
    //height: 100%; // docu: needs row to have .d-flex.d-flex-wrap
    display: flex;
    flex-direction: column;
  }
  .space-around {
    &.listgroup-wrapper, .listgroup-wrapper {
      justify-content: space-around;
    }
  }
}

.listgroup-intro {
  position: relative;
  h3, .h3, h4, .h4 {
    font-size: @font-size-base-p !important;
    color: @hwk-blue-light;
    padding: 12px @listgroup-padding-x 0 @listgroup-padding-x;
    @media (min-width: @screen-xl-min) {
      padding: 12px @listgroup-padding-x-xl 0 @listgroup-padding-x-xl;
    }
  }
  figure {
    max-height: @listgroup-image-height;
    overflow: hidden;
    position: relative;
    figcaption {
      position: absolute;
      display: block;
      bottom: 0;
      left: 0;
      font-size: @font-size-xxs;
      color: white;
      width: 100%;
      background: rgba(0, 0, 0, .2);
      background: linear-gradient(0deg, rgba(0,0,0,0.6) 0%, rgba(0,0,0,0) 100%);
      padding: 30px 20px 10px 20px;
    }
  }
  
  border-bottom: 1px solid @listgroup-border-color;
  margin-bottom: 0;
}

.list-group, listgroup-content {
  margin-bottom: 0;
  .list-group-item {
    display: flex;
    padding: @listgroup-padding-y 0;
    background-image: none;
    border-right: none;
    border-left: none;

    &:active,
    &:focus,
    &:hover {
      background-color: @list-group-hover-bg;
    }
    p {
      //font-size: @font-size-small;
      //font-weight: @font-weight-bold; // commented @since 2.0.6
      line-height: 1.3;
    }
    .listgroup-text {
      width: 100%;
      p, a {
        //font-weight: @font-weight-bold; // commented @since 2.0.6
        padding: 0px 0px 0px;
        line-height: 1.4;
        hyphens: auto;
      }
      p {
        &:not(.h2):not(.h3):not(.h4):not(.h5):not(.h6) {
          font-size: @font-size-small;
          .glyphicon {
            top: 0;
            line-height: 1;
          }
        }
      }
    }

    // image / info
    .listgroup-image, .listgroup-info {
      @media (min-width: @screen-xl-min) {
        margin: 0 @listgroup-padding-x-xl;
      }
      width: 80px;
      min-width: 80px;
      margin: 0 0 0 @listgroup-padding-x;
      padding-right: @grid-gutter-width-half;
    }

    // new image (no padding left / slightly bigger)
    .listgroup-image-blog {

      &.listgroup-image,
      .listgroup-image {
        margin-left: 0;
        width: 80px + @listgroup-padding-x;
        min-width: 80px + @listgroup-padding-x;
      }
    }

    // add borders on intro/footer instead
    &:first-child {
      border-top: none;
    }
    &:last-child {
      border-bottom: none;
    }
  }
}

.listgroup-footer {
  border-top: 1px solid @listgroup-border-color;
  //margin-top: 0;
  margin-top: auto;
  & > p, & > a {
    padding: 8px @listgroup-padding-x;
    @media (min-width: @screen-xl-min) {
      padding: 8px @listgroup-padding-x-xl;
    }
  }
  p, span, i, a {
    font-size: 14px;
    line-height: 1.3;
    //color: @hwk-blue-light;
  }
  .glyphicon {
    font-size: 16px;
    width: 26px;
    top: 1px;
    line-height: 1;
  }
  a {
    display: block;
    &:active,
    &:focus,
    &:hover {
      background-color: @list-group-hover-bg;
    }
  }
}

// -- WITH ARROWS -- //
.listgroup-arrow:not(.listgroup-arrow-right) {
  .list-group-item {
    .listgroup-text {
      padding-left: @listgroup-padding-x + 22;
      @media (min-width: @screen-xl-min) {
        padding-left: @listgroup-padding-x-xl  + 22;
      }
      &::before {
        content: "\E072";
        position: absolute;
        font-family: @icon-font-name;
        top: @listgroup-padding-y + 1;
        left: @listgroup-padding-x;
        @media (min-width: @screen-xl-min) {
          left: @listgroup-padding-x-xl;
        }
      }
    }
  }
}
.listgroup-arrow-right {
  .list-group-item {
    .listgroup-text {
      padding-right: @listgroup-padding-x + 22;
      @media (min-width: @screen-xl-min) {
        padding-right: @listgroup-padding-x-xl  + 22;
      }
      &::after {
        content: "\E072";
        position: absolute;
        font-family: @icon-font-name;
        top: @listgroup-padding-y + 1;
        right: @listgroup-padding-x;
        @media (min-width: @screen-xl-min) {
          right: @listgroup-padding-x-xl;
        }
      }
    }
  }
}

// ----------------------- //
// LIST with IMAGES
// LIST with TEXT INFO
//
.listgroup-text {
  padding: 0 @listgroup-padding-x;
  @media (min-width: @screen-xl-min) {
    padding: 0 @listgroup-padding-x-xl;
  }
  float: none !important;

  .col {
    @media (min-width: @screen-xl-min) {
      padding-left: @grid-gutter-width-half;
      padding-right: @grid-gutter-width-half;
    }
  }
}

.listgroup-image, .listgroup-info {
    & + .listgroup-text {
    padding-left: 0;
  }
}

// image old
.listgroup-image {
  margin: 0 @listgroup-padding-x;
  @media (min-width: @screen-xl-min) {
    margin: 0 @listgroup-padding-x-xl;
  }
  max-width: 60px;
  float: none !important;
}

// NEW IMAGE (no padding left / slightly bigger)
.listgroup-image-blog {
  &.listgroup-image,
  .listgroup-image {
    margin-left: 0;
    min-width: 80px;
  }
}

/*.listgroup-info {
  margin: 0 @listgroup-padding-x;
  @media (min-width: @screen-xl-min) {
    margin: 0 @listgroup-padding-x-xl;
  }
  width: 15%;
  min-width: 15%;
}*/

// calendar, info text
.list-group-item {
  .listgroup-info {
    p {
      font-size: 36px;
      color: @hwk-blue-light;
      font-weight: @font-weight-bold;
      line-height: 1;
      margin-bottom: 0;
      padding-bottom: 0;
    }
    .small {
      display: block;
      font-size: 12px;
    }
  }
}

// ----------------------- //
// SPECIAL LIST with ICONS
// hwk-icon-menu
//
@media (max-width: @screen-xs-max) {
  .col.hwk-icon-menu {
    order: -1;
    .listgroup-wrapper {
      background-color: transparent !important;
      box-shadow: none;
      .list-group {
        display: flex;
        justify-content: space-around;
        padding-bottom: 10px;
        .list-group-item {
          background-color: transparent;
          border: none;
          padding: 10px 0;
        }
        .listgroup-text {
          padding: 0 10px;
          p {

            span.glyphicon {
              font-size: 22px;
              display: block;
              margin-bottom: 5px;
              width: 100%;
              margin-bottom: 7px;
            }
            text-align: center;
            font-size: 10px !important;
          }
          // hide arrows
          &::before,
          &::after {
            display: none;
          }
        }
      }
    }
  }
}
