.o-tooltip {
    @include reset-text();
    @include font-size($tooltip-font-size);

    // Note: Not cross-browser but not such a big deal since it's
    // needed for minor aesthetic adaptations only.
    &:has(.o-tooltip--technical) {
        max-width: $tooltip-max-width * 2;

        .o-tooltip--help {
            background-color: $info;
            color: color-contrast($info);
        }

        .o-tooltip--string, .o-tooltip--help {
            max-width: MIN($tooltip-max-width, 100%);
        }
    }

    .o-tooltip--string, .o-tooltip--technical--title {
        padding:  map-get($spacers, 1) 0;
        color: color-contrast($tooltip-bg);
        font-weight: $font-weight-bold;
    }

    .o-tooltip--help, .o-tooltip--technical {
        margin: map-get($spacers, 1) map-get($spacers, 2) map-get($spacers, 2);
    }

    .o-tooltip--help {
        white-space: pre-line;
        padding: 0 map-get($spacers, 2);
    }

    .o-tooltip--technical {
        padding-left: 1.3em;
        font-family: $o-font-family-monospace;
        font-size: $o-font-size-base-smaller;
        list-style-type: disc;

        .o-tooltip--technical--title {
            margin-right: map-get($spacers, 1);
        }
    }

    + .popover-arrow {
        --popover-arrow-color: #{$tooltip-arrow-color};
    }
}
