@import "../global"; .tooltip { position: relative; } .tooltip__link { @include text-link(); } .tooltip__body { position: absolute; z-index: 1; left: 50%; margin-left: calc(var(--tooltip-width) * -1 / 2); white-space: normal; box-sizing: border-box; padding: $spacing-vertical / 2; width: var(--tooltip-width); border: 1px solid #aaa; color: var(--tooltip-color); background-color: var(--tooltip-bg); font-size: calc(var(--font-size) * 7/8); line-height: var(--font-line-height); box-shadow: var(--tooltip-shadow); } .tooltip--header .tooltip__link { @include text-link(#aaa); font-size: calc( var(--font-size) * 3/4 ); margin-left: var(--button-padding); vertical-align: middle; }