// styled tooltips rendered for elements that have class lp_tooltip and a data-laterpay-tooltip attribute

.lp_tooltip {
    display: inline-block;
    position: relative;

    &:before,
    &:after {
        @include opacity(0);
        pointer-events: none;
        position: absolute;
        transform: translate3d(0, 0, 0);
        transition-delay: 0s;
        transition: transform 0.25s ease, visibility 0.25s ease, bottom 0.25s ease;
        visibility: hidden;
        z-index: $zindex--overlayed-1;
    }

    // downward-pointing arrow
    &:before {
        background: transparent;
        border: $fs--05 solid transparent;
        border-top-color: $text;
        content: '';
        margin-bottom: -12px;
        position: absolute;
        z-index: $zindex--overlayed-2;
    }

    // text content of the tooltip
    &:after {
        background: $text;
        border-radius: $border-radius;
        color: $text--inverse;
        content: attr(data-tooltip);
        font-size: $fs--08;
        font-weight: normal;
        line-height: 1.3em;
        margin-left: -18px;
        padding: $fs--05;
        text-align: left;
        text-transform: none;
        width: 10em;
    }

    &:hover:before,
    &:hover:after,
    &:focus:before,
    &:focus:after {
        @include opacity(1);
        visibility: visible;
        transform: translateY(-8px);
    }

    &:hover:before,
    &:hover:after {
        bottom: 100%;
        left: 50%;
        transition-delay: 100ms;
    }
}