Sindbad~EG File Manager

// -- C O M P O N E N T ------------------------------
// ##
// ## TOOLTIP
// ## ------------------------------------------------
// ## Displays tips on elements using aria-label as
// ## message.
// ## ------------------------------------------------
.pso-tip {
    @include mq($from: desktop) {
        --tip-bg: var(--c-base-700);
        --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(--TRANS), var(--TRANS-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: 30px;
            padding-left: var(--G2);
            padding-right: var(--G2);
            font-family: 'Inter', sans-serif;
            font-size: var(--F-XS);
            font-weight: 400;
            line-height: 1.2;
            text-transform: none;
            white-space: nowrap;
            color: #fff;
            background-color: var(--tip-bg);
            border-radius: var(--R-S);
            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(--TRANS), var(--TRANS-O);
            transition-duration: .5s;
        }
    
        &:hover {
            &:before,
            &:after {
                transform: var(--transform--h);
                opacity: var(--op);
            }
        }
    }
}

.pso-tip--top {}

.pso-tip--left {
    @include mq($from: desktop) {
        --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;
        }
    }
}

.pso-tip--right {
    @include mq($from: desktop) {
        --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;
        }
    }
}

.pso-tip--bottom {
    @include mq($from: desktop) {
        --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;
        }
    }
}

.pso-tip--top-left {
    @include mq($from: desktop) {
        --transform: translateY(10px) translateX(0);
        --transform--h: translateY(-10px) translateX(0);

        &:before{
            --transform: translateY(10px) translateX(-50%);
            --transform--h: translateY(-10px) translateX(-50%);

            left: 50%;
        }

        &:after {
            left: 0;
        }
    }
}

.pso-tip--alt {
    @include mq($from: desktop) {
        &:after {
            content: attr(aria-label-alt);
        }
    }
}
// -- C O M P O N E N T ------------------------------