_legend_item.scss

@import '../mixins';

$legendItemVerticalPadding: $echLegendRowGap / 2;
$legendItemHeight: #{$euiFontSizeXS * $euiLineHeight};

.echLegendItem {
  color: $euiTextColor;
  display: flex;
  flex-wrap: nowrap;
  justify-content: space-between;
  align-items: flex-start;
  position: relative;

  // wrapper is needed to isolate color icon when wrapped or not
  .echLegend__colorWrapper > *:first-of-type {
    // euiPopover adds a div with height of 19px otherwise
    // this prevents color dot from shifting when wrapped
    height: $legendItemHeight;
  }

  &:not([dir='rtl']) > *:not(.background) {
    margin-left: $euiSizeXS;

    &:last-child:not(.echLegendItem__legendValue) {
      margin-right: $euiSizeXS;
    }
  }

  &[dir='rtl'] > *:not(.background) {
    margin-right: $euiSizeXS;

    &:last-child:not(.echLegendItem__legendValue) {
      margin-left: $euiSizeXS;
    }
  }

  &:not(&--hidden) {
    .echLegendItem__color--changable {
      cursor: pointer;
    }
  }

  &:hover .background {
    background-color: $euiColorLightestShade;
  }

  .background {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: -1;
  }

  &__action {
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    height: $legendItemHeight;
    max-width: calc(#{$legendItemHeight} + #{$euiSizeXS * 2});

    .euiPopover,
    .euiPopover__anchor,
    .euiPopover__anchor > *:first-child {
      // makes custom buttons in eui popover take full action size
      height: 100%;
      width: 100%;
      display: flex;
    }
  }

  &--actionOnHover {
    .echLegendItem__action {
      opacity: 0;
      // Not using pointer-events: none here because it causes a rendering
      // bug in Firefox. See https://github.com/elastic/elastic-charts/pull/2773#discussion_r2792933172
    }

    &:hover,
    &:focus-within {
      .echLegendItem__action {
        opacity: 1;
        pointer-events: auto;
      }
    }
  }

  &--isActive {
    .echLegendItem__action {
      opacity: 1;
      pointer-events: auto;
    }
  }

  &__color {
    display: flex;
    line-height: 1.5;
    align-items: center;
  }

  &__label {
    @include euiFontSizeXS;
    flex: 1 1 auto;
    text-align: left;
    vertical-align: baseline;
    letter-spacing: unset;
    align-items: center;
    @include wrapText;

    &--singleline {
      @include resetWrapText;
      @include euiTextTruncate;

      // When using middle truncation, JS handles the ellipsis. `clip` will disable euiTextTruncate
      &--middle {
        text-overflow: clip;
      }
    }

    // div to prevent changing to button
    &--multiline:is(div) {
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 2; // number of lines to show, overridden in element styles
    }

    // When using middle truncation, JS handles the ellipsis so disable CSS line-clamp truncation
    &--multiline--middle:is(div) {
      -webkit-line-clamp: none; // Disable CSS truncation, JS handles it
      line-break: anywhere; // Allow breaking at any point for accurate text fitting
      word-break: break-all; // Fallback for older browsers
    }

    &--clickable:hover {
      cursor: pointer;
      text-decoration: underline;
    }
  }

  &__legendValue {
    @include euiFontSizeXS;
    text-align: right;
    flex: 0 0 auto;
    margin-left: $euiSizeXS;
    font-feature-settings: 'tnum';
    letter-spacing: unset;
    direction: ltr;
  }

  &--vertical {
    padding-top: $legendItemVerticalPadding / 2;
    padding-bottom: $legendItemVerticalPadding / 2;

    &:first-of-type {
      margin-top: $legendItemVerticalPadding / 2;
    }

    .background {
      margin-top: $legendItemVerticalPadding / 2;
      margin-bottom: $legendItemVerticalPadding / 2;
    }
  }

  &--hidden {
    color: $euiColorDarkShade;
  }

  &[dir='rtl'] {
    .echLegendItem {
      &__label {
        text-align: right;
      }
    }
  }
}