.component__tooltip-wrapper {
  &.show-arrow {
    @include tooltip5-arrow-styles;
  }

  display: inline-flex;

  &__element {
    white-space: nowrap;
    line-height: inherit; // Same line height as parent
  }

  // text-decoration dashed cannot be used as it's not firefox compatible so must use border-bottom
  // margin-bottom -1px is to compensate for the 1px height of the underline using border-bottom
  &__underline {
    width: fit-content;
    border-bottom: 1px dashed $ui-fleet-black-50;
    margin-bottom: -1px;
  }

  &__tip-text {
    @include tooltip-text;
  }
}