//
// List Group
// --------------------------------------------------

.list-group {
  padding-left: 0;
  margin-bottom: $line-height-computed;

  &-item {
    position: relative;
    display: block;
    border-width: 0;
    border-bottom-width: 1px;
    border-bottom-style: solid;
    line-height: $list-group-item-line-height;
    padding: $list-group-item-padding-y $list-group-item-padding-x;
    font-size: $font-size-large;
    font-weight: $font-weight-regular;
    margin-bottom: 0;
    background-clip: padding-box;

    @include themes(color, color-new-body-dark);
    @include themes(background-color, list-group-bg);
    @include themes(border-bottom-color, list-group-border-inner);

    @include text-overflow();

    &:first-child {
      @include border-top-radius($list-group-border-radius);
    }

    &:last-child {
      margin-bottom: 0;
      border-bottom-width: 0;

      @include border-bottom-radius($list-group-border-radius);
    }

    &-heading {
      margin-top: 0;
      margin-bottom: 5px;
    }

    &-text {
      margin-bottom: 0;
      line-height: 1.3;
    }

    & + .list-group-item {
      border-top: 0;
    }

    p {
      font-size: $font-size-base;
    }

    &-icon {
      padding-right: $padding-base-horizontal;
      font-size: $font-size-h4;
      display: inline-block;
      vertical-align: bottom;

      @include themes(color, color-new-body-light);

      &-point {
        $size: 6px;

        position: relative;

        &:before {
          content: "";
          height: $size;
          width: $size;
          border-radius: 50%;
          background-color: $brand-primary;
          position: absolute;
          right: 6px;
          top: 0;
        }
      }
    }

    &-avatar.avatar {
      @include themes-border(color-new-border);
      @include themes-value(background-color, transparent);
      @include themes-value(color, color-new-body-light);
    }

    .badge {
      margin-top: ceil(($list-group-item-line-height - $badge-height) * 0.5);

      @include badge-default();
    }

    &-image {
      padding-right: $popover-padding;
      overflow: hidden;

      .avatar {
        font-size: $font-size-small;

        @include avatar-size($grid-unit-y * 2 + 6);

        line-height: $grid-unit-y * 2 + 4;

        @include themes-border(color-new-border);
        @include themes-value(background-color, transparent);
        @include themes(color, color-new-body-dark);
      }
    }

    &-danger {
      color: $brand-danger !important;
    }
  }

  // Disabled state
  .list-group-item.disabled,
  .list-group-item.disabled:hover,
  .list-group-item.disabled:focus {
    cursor: $cursor-disabled;

    @include themes(color, list-group-disabled-color);
    @include themes(background-color, list-group-disabled-bg);

    // Force color to inherit for custom content
    .list-group-item-heading {
      color: inherit;
    }
    .list-group-item-text {
      @include themes(color, list-group-disabled-text-color);
    }
  }

  a.list-group-item,
  button.list-group-item {
    @include themes(color, list-group-link-color);

    .list-group-item-heading {
      @include themes(color, list-group-link-heading-color);
    }

    // Hover state
    &:hover,
    &:focus {
      text-decoration: none;

      @include themes(background-color, list-group-hover-bg);
      @include themes(color, list-group-link-hover-color);
    }
  }

  .list-group-item,
  a.list-group-item,
  button.list-group-item {
    // Active class on item itself, not parent
    &.active,
    &.active:hover,
    &.active:focus {
      z-index: 2; // Place active items above their siblings for proper border styling

      @include themes(color, list-group-active-color);
      @include themes(background-color, list-group-active-bg);
      @include themes(border-color, list-group-active-border);

      // 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 {
        @include themes(color, list-group-active-text-color);
      }

      .list-group-icon {
        @include themes(color, list-group-active-color);
      }
    }
  }

  button.list-group-item {
    width: 100%;
    text-align: left;
  }

  @include list-group-item-variant(success, $state-success-bg, $brand-success);
  @include list-group-item-variant(info, $state-info-bg, $brand-info);
  @include list-group-item-variant(warning, $state-warning-bg, $brand-warning);
  @include list-group-item-variant(danger, $state-danger-bg, $brand-danger);

  // Style Variations
  // ------------------

  &-lite {
    @include list-group-transparent();

    @include list-group-lite();
  }

  &-only-icons {
    @each $theme, $map in $themes {
      .#{$theme} & {
        $size: $grid-unit-y * 5;

        margin-bottom: 0;
        text-align: center;

        .list-group-item {
          margin-bottom: $padding-small-vertical;
          border-width: 0;
          padding: 0;
          background-color: transparent;
          overflow: visible;

          &-icon {
            padding-right: 0;
            font-size: $font-size-large;
            position: relative;
            border-radius: $border-radius-base * 4;
            color: map-get($map, list-group-only-icons-color);

            .fa {
              vertical-align: -5%;
            }

            &-badge {
              $badge-size: ceil($grid-unit-y * 2);

              position: absolute;
              top: -8px;
              right: 5px;
              font-size: $font-size-small;
              line-height: $badge-size;
              min-width: $badge-size;
              border-radius: ceil($badge-size * 0.5);
              padding-left: $padding-xs-horizontal;
              padding-right: $padding-xs-horizontal;
              color: map-get($map, list-group-only-icons-badge-color);
              background-color: $color-white;
              font-family: $font-family-proxima-sbold;
            }
          }

          &-icon,
          &-avatar {
            width: $size;
            height: $size;
            line-height: $size;
            display: inline-block;

            @include transition(background-color 500ms ease);
          }

          &-avatar {
            line-height: $size - 1;
          }

          &.active {
            background-color: transparent !important;

            .list-group-item-icon,
            .list-group-item-avatar {
              color: map-get($map, list-group-active-text-color);
              background: map-get($map, list-group-only-icons-active-bg);
            }

            .list-group-item-icon {
              &-point {
                &:before {
                  background-color: $color-white;
                }
              }
            }

            @each $group-name, $group in $map-harmony-colors-grouped {
              @each $name, $color in map-get($group, colors) {
                &.list-group-item-#{$name} {
                  $color-text: map-get($group, "text-color");

                  .list-group-item-icon,
                  .list-group-item-avatar {
                    color: $color;
                  }

                  .list-group-item-icon {
                    &-point {
                      &:before {
                        background-color: $color-white;
                      }
                    }
                  }
                }
              }
            }
          }
        }

        a.list-group-item,
        button.list-group-item {
          &:hover,
          &:focus {
            background-color: transparent;

            .list-group-item-icon,
            .list-group-item-avatar {
              background-color: map-get($map, list-group-only-icons-hover-bg);
              color: map-get($map, list-group-only-icons-color-hover);
            }

            .list-group-item-icon {
              &-point {
                &:before {
                  background-color: $color-white;
                }
              }
            }
          }
        }

        // Variation without bg
        &-no-bg {
          .list-group-item {
            $size: $grid-unit-y * 3;

            margin-bottom: $padding-small-vertical;
            line-height: $grid-unit-y * 3;

            &-icon {
              height: $size;
              line-height: $size;
              font-size: $font-size-base;
            }

            &-badge {
              $size: ceil($grid-unit-y * 1.5);

              top: 0;
              right: 7px;
              font-size: $font-size-small;
              line-height: $size;
              min-width: $size;
              border-radius: ceil($size * 0.5);
              padding-left: 2px;
              padding-right: 2px;
            }

            &.active {
              .list-group-item-icon {
                background-color: transparent;
                color: map-get($map, list-group-active-text-color);
                border-color: transparent;
              }

              &:hover,
              &:focus {
                .list-group-item-icon {
                  background-color: transparent;
                }
              }
            }
          }

          a.list-group-item,
          button.list-group-item {
            &:hover,
            &:focus {
              .list-group-item-icon {
                background-color: transparent;
                color: map-get($map, list-group-only-icons-no-bg-color-hover);
              }
            }
          }
        }

        &-inline {
          margin-right: -$padding-small-vertical;

          .list-group-item {
            display: inline-block;
            margin-right: $padding-small-vertical;
          }
        }
      }
    }
  }
}