.euiListGroupItem {
  padding: 0;
  border-radius: $euiBorderRadius;
  display: flex;
  align-items: center;
  transition: background-color $euiAnimSpeedFast;
  position: relative;

  &.euiListGroupItem-isActive,
  &.euiListGroupItem-isClickable:hover {
    background-color: $euiListGroupItemHoverBackground;
  }

  // Can't be grouped with above or else IE will ignore the whole group
  &.euiListGroupItem-isClickable:focus-within {
    background-color: $euiListGroupItemHoverBackground;
  }

  &.euiListGroupItem--ghost {
    &.euiListGroupItem-isClickable:hover {
      background-color: $euiListGroupItemHoverBackgroundGhost;
    }

    // Can't be grouped with above or else IE will ignore the whole group
    &.euiListGroupItem-isClickable:focus-within {
      background-color: $euiListGroupItemHoverBackgroundGhost;
    }
  }

  &.euiListGroupItem-isClickable:hover .euiListGroupItem__button,
  .euiListGroupItem__button:hover,
  .euiListGroupItem__button:focus {
    text-decoration: underline;
  }

  // Style all disabled list items whether or not they are links or buttons
  &.euiListGroupItem-isDisabled,
  &.euiListGroupItem-isDisabled:hover,
  &.euiListGroupItem-isDisabled:focus,
  &.euiListGroupItem-isDisabled .euiListGroupItem__button:hover,
  &.euiListGroupItem-isDisabled .euiListGroupItem__button:focus {
    color: $euiButtonColorDisabled;
    cursor: not-allowed;
    background-color: transparent;
    text-decoration: none;
  }
}

// IE doesn't support :focus-within
@include internetExplorerOnly {
  .euiListGroupItem__button:hover,
  .euiListGroupItem__button:focus {
    background-color: $euiListGroupItemHoverBackground;
    border-radius: $euiBorderRadius;

    .euiListGroupItem--ghost .euiListGroupItem__button:hover,
    .euiListGroupItem--ghost .euiListGroupItem__button:focus {
      background-color: $euiListGroupItemHoverBackgroundGhost;
    }
  }
}

.euiListGroupItem__text,
.euiListGroupItem__button {
  line-height: $euiSizeL;
  padding: $euiSizeXS $euiSizeS;
  display: flex;
  align-items: center;
  flex: 1 0 auto; // The flex-shrink and flex-basis values are needed for IE11
  text-align: left;
  max-width: 100%;
  font-weight: inherit;

  .euiListGroupItem-hasExtraAction & {
    max-width: calc(100% - #{$euiSizeXL});
  }

  @each $colorName, $color in $euiListGroupItemColorTypes {
    .euiListGroupItem--#{$colorName} &:not(:disabled) {
      color: $color;
    }
  }

  .euiListGroupItem-isActive:not(.euiListGroupItem--ghost) & {
    color: $euiTextColor;
  }
}

.euiListGroupItem__label {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.euiListGroupItem__extraAction {
  opacity: 0;
  margin-right: $euiSizeS;
  transition: opacity $euiAnimSpeedFast;

  .euiListGroupItem:not(.euiListGroupItem-isDisabled):focus &,
  .euiListGroupItem:not(.euiListGroupItem-isDisabled):hover &,
  &.euiListGroupItem__extraAction-alwaysShow,
  &:focus {
    opacity: 1;
  }
}

.euiListGroupItem__icon {
  margin-right: $euiSizeM;
  flex-grow: 0;
  flex-shrink: 0;
}

// Font sizes
@each $sizeName, $fontSize in $euiListGroupItemSizeTypes {
  .euiListGroupItem--#{$sizeName} {
    font-size: $fontSize;
  }
}

.euiListGroupItem--xSmall,
.euiListGroupItem--small {
  font-weight: $euiFontWeightMedium;
  letter-spacing: 0;
}

.euiListGroupItem--xSmall {
  .euiListGroupItem__button,
  .euiListGroupItem__text {
    line-height: $euiSize;
  }
}

.euiListGroupItem--large {
  .euiListGroupItem__button,
  .euiListGroupItem__text {
    line-height: $euiSizeXL;
  }
}

.euiListGroupItem--wrapText {
  .euiListGroupItem__button,
  .euiListGroupItem__text {
    width: 100%;
    word-break: break-word;
  }

  .euiListGroupItem__label {
    white-space: inherit;
  }
}

// Layout alts from euiListGroup

.euiListGroup-flush .euiListGroupItem {
  border-radius: 0;
}

.euiListGroup-bordered .euiListGroupItem {
  &:first-child {
    border-top-left-radius: $euiBorderRadius;
    border-top-right-radius: $euiBorderRadius;
  }

  &:last-child {
    border-bottom-left-radius: $euiBorderRadius;
    border-bottom-right-radius: $euiBorderRadius;
  }
}

.euiListGroupItem__tooltip {
  width: 100%;
}