.tooltip-truncated-cell {
  display: flex;
  align-items: center; // For badges, etc
  gap: $gap-icon-text;
  max-width: 100%;

  .text-muted {
    color: $ui-fleet-black-50;
  }

  .data-table__tooltip-truncated-text-container {
    display: flex; // Flex container for text and suffix
    align-items: center; // Keep text and suffix aligned
    min-width: 0; // Prevent flex child from growing beyond container
  }

  .data-table__tooltip-truncated-text {
    white-space: nowrap; /* Prevent wrapping */
    overflow: hidden; /* Hide overflowing text */
    text-overflow: ellipsis; /* Add ellipsis for truncated text */

    &--cell {
      display: inline-block;
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
      max-width: 101%;
    }

    .truncated {
      display: inline-block;
      max-width: 100%;
      overflow: hidden;
      text-overflow: ellipsis;
      vertical-align: middle;
    }
  }

  .truncated-tooltip {
    text-wrap: wrap;
    overflow-wrap: break-word;

    .safari-hack {
      height: 0px;
    }
  }

  // allows for the tooltip text to break on a word instead of a character
  &.tooltip-break-on-word {
    .truncated-tooltip {
      word-break: normal;
    }
  }

  .data-table__suffix,
  .data-table__prefix {
    display: flex;
    gap: $gap-icon-text;
    height: 24px;
    align-items: center;
    flex-shrink: 0; /* Prevent suffix from shrinking */
  }

  .__react_component_tooltip {
    font-size: $xx-small;
  }
}