.component__tooltip-wrapper {
  display: inline-flex;

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

  &__underline {
    position: relative;
    width: fit-content;
    // compensate for bottom border and padding to maintain centering
    top: 2px;
    border-bottom: 1px dashed $ui-fleet-black-50;
    padding-bottom: 1px;
  }

  &__tip-text {
    width: max-content;
    max-width: 360px;
    padding: 6px;
    color: $core-white;
    background-color: $tooltip-bg;
    font-weight: $regular;
    font-size: $xx-small;
    border-radius: 4px;
    box-sizing: border-box;
    z-index: 99; // not more than the site nav
    line-height: 1.375;
    white-space: initial;
    p {
      margin: 0;
    }
  }
}