//
// TOOLTIP
// ----------------------------------------------------------------
// Shows a tip description above, under or next to element,
// contains description about action, item etc.
// ----------------------------------------------------------------
.lo-tip {
    --tip-bg: var(--C-G600);
    --op: .95;
    --arrow-size: 8px;
    --arrow-gap: calc(100% - (var(--arrow-size) - 1px));
    --transform: translateY(10px) translateX(-50%);
    --transform--h: translateY(-10px) translateX(-50%);

    position: relative;

    &:before {
        content: " ";

        position: absolute;
        z-index: 9995;
        left: 50%;
        bottom: var(--arrow-gap);
        transform: var(--transform);
        width: 0;
        height: 0;
        border-left: var(--arrow-size) solid transparent;
        border-right: var(--arrow-size) solid transparent;
        border-top: var(--arrow-size) solid var(--tip-bg);
        opacity: 0;
        pointer-events: none;
        transition: var(--T), var(--T-O);
        transition-duration: .5s;
    }

    &:after {
        content: attr(aria-label);

        position: absolute;
        z-index: 9999;
        left: 50%;
        bottom: 100%;
        transform: var(--transform);
        display: inline-flex;
        align-items: center;
        height: 1.8rem;
        padding-left: var(--PXS);
        padding-right: var(--PXS);
        font-family: 'Inter', sans-serif;
        font-size: .8rem;
        font-weight: 400;
        line-height: 1.2;
        text-transform: none;
        white-space: nowrap;
        color: #fff;
        background-color: var(--tip-bg);
        border-radius: var(--R);
        box-shadow: rgba(50, 50, 93, 0.25) 0px 2px 5px -1px, rgba(0, 0, 0, 0.3) 0px 1px 3px -1px;
        opacity: 0;
        pointer-events: none;
        transition: var(--T), var(--T-O);
        transition-duration: .5s;
    }

    &:hover {
        &:before,
        &:after {
            transform: var(--transform--h);
            opacity: var(--op);
        }
    }

    @include mq($until: desktop) {
        &:before,
        &:after {
            display: none;
        }
    }
}

.lo-tip--top {
    // Default tooltip position is TOP
}

.lo-tip--left {
    --arrow-gap: calc(100% - (var(--arrow-size) + 6px));
    --transform: translateY(-50%) translateX(10px);
    --transform--h: translateY(-50%) translateX(-10px);

    &:before {
        top: 50%;
        left: auto;
        right: var(--arrow-gap);
        bottom: auto;
        border-top: var(--arrow-size) solid transparent;
        border-left: var(--arrow-size) solid var(--tip-bg);
        border-bottom: var(--arrow-size) solid transparent;
    }

    &:after {
        top: 50%;
        left: auto;
        right: 100%;
        bottom: auto;
    }
}

.lo-tip--right {
    --arrow-gap: calc(100% - (var(--arrow-size) + 6px));
    --transform: translateY(-50%) translateX(-10px);
    --transform--h: translateY(-50%) translateX(10px);

    &:before {
        top: 50%;
        left: var(--arrow-gap);
        bottom: auto;
        border-top: var(--arrow-size) solid transparent;
        border-right: var(--arrow-size) solid var(--tip-bg);
        border-bottom: var(--arrow-size) solid transparent;
    }

    &:after {
        top: 50%;
        left: 100%;
        bottom: auto;
    }
}

.lo-tip--bottom {
    --transform: translateY(-10px) translateX(-50%);
    --transform--h: translateY(10px) translateX(-50%);

    &:before {
        top: var(--arrow-gap);
        bottom: auto;
        border-top: none;
        border-left: var(--arrow-size) solid transparent;
        border-right: var(--arrow-size) solid transparent;
        border-bottom: var(--arrow-size) solid var(--tip-bg);
    }

    &:after {
        top: 100%;
        bottom: auto;
    }
}

.lo-tip--alt {
    &:after {
        content: attr(aria-label-alt);
    }
}