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

  display: inline-flex;

  &__element {
    white-space: nowrap;
    line-height: initial;
  }

  &__underline {
    width: fit-content;
    border-bottom: 1px dashed $ui-fleet-black-50;
  }

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

// for firefox we need to slightly shift the tooltip text to fit in line with the
// other text next to the tooltip. This is because firefox renders the layout
// slightly differently than webkit and edge, which makes it appear higher
// than text next to it.
// TODO: investigate more to see if there is a solution that will work
// cross browser.
@-moz-document url-prefix() {
  .component__tooltip-wrapper {
    &__underline {
      position: relative;
      top: 2px;
      padding-bottom: 1px;
    }
  }
}