/*!
 * SPDX-License-Identifier: Apache-2.0
 *
 * The OpenSearch Contributors require contributions made to
 * this file be licensed under the Apache-2.0 license or a
 * compatible open source license.
 *
 * Modifications Copyright OpenSearch Contributors. See
 * GitHub history for details.
 */

.ouiListGroupItem {
  padding: 0;
  border-radius: $ouiBorderRadius;
  display: flex;
  align-items: center;
  transition: background-color $ouiAnimSpeedFast;
  position: relative;

  &.ouiListGroupItem-isActive,
  &.ouiListGroupItem-isClickable:hover {
    background-color: $ouiListGroupItemHoverBackground;
  }

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

  &.ouiListGroupItem--ghost {
    &.ouiListGroupItem-isClickable:hover {
      background-color: $ouiListGroupItemHoverBackgroundGhost;
    }

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

  &.ouiListGroupItem-isClickable:hover .ouiListGroupItem__button,
  .ouiListGroupItem__button:hover,
  .ouiListGroupItem__button:focus {
    text-decoration: underline;
  }

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

// IE doesn't support :focus-within
@include internetExplorerOnly {
  .ouiListGroupItem__button:hover,
  .ouiListGroupItem__button:focus {
    background-color: $ouiListGroupItemHoverBackground;
    border-radius: $ouiBorderRadius;

    .ouiListGroupItem--ghost .ouiListGroupItem__button:hover,
    .ouiListGroupItem--ghost .ouiListGroupItem__button:focus {
      background-color: $ouiListGroupItemHoverBackgroundGhost;
    }
  }
}

.ouiListGroupItem__text,
.ouiListGroupItem__button {
  line-height: $ouiSizeL;
  padding: $ouiSizeXS $ouiSizeS;
  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;

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

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

  .ouiListGroupItem-isActive:not(.ouiListGroupItem--ghost) & {
    color: $ouiTextColor;
  }
}

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

.ouiListGroupItem__extraAction {
  opacity: 0;
  margin-right: $ouiSizeS;
  transition: opacity $ouiAnimSpeedFast;

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

.ouiListGroupItem__icon {
  margin-right: $ouiSizeM;
  flex-grow: 0;
  flex-shrink: 0;
}

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

.ouiListGroupItem--xSmall,
.ouiListGroupItem--small {
  font-weight: $ouiFontWeightMedium;
  letter-spacing: 0;
}

.ouiListGroupItem--xSmall {
  .ouiListGroupItem__button,
  .ouiListGroupItem__text {
    line-height: $ouiSize;
  }
}

.ouiListGroupItem--large {
  .ouiListGroupItem__button,
  .ouiListGroupItem__text {
    line-height: $ouiSizeXL;
  }
}

.ouiListGroupItem--wrapText {
  .ouiListGroupItem__button,
  .ouiListGroupItem__text {
    width: 100%;
    word-break: break-word;
  }

  .ouiListGroupItem__label {
    white-space: inherit;
  }
}

// Layout alts from ouiListGroup

.ouiListGroup-flush .ouiListGroupItem {
  border-radius: 0;
}

.ouiListGroup-bordered .ouiListGroupItem {
  &:first-child {
    border-top-left-radius: $ouiBorderRadius;
    border-top-right-radius: $ouiBorderRadius;
  }

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

.ouiListGroupItem__tooltip {
  width: 100%;
}