@a2-tooltip__width: 110px;
@a2-tooltip__color: white;
@a2-tooltip__bg: black;
@a2-tooltip__padding: 5px 10px;
@a2-hotspot-tooltip__shadow:0px 4px 20px 0px rgba(0, 0, 0, 0.12);
//
//  Common
//  _____________________________________________
& when (@media-common = true) {
    .a2-tooltip-btn{
        cursor: pointer;
        position: relative;
        &:hover{
            .a2-tooltip{
                transition: all 0.3s;
                opacity:1;
                visibility:visible;
                top: -10px;
            }
        }
    }
    .action.towishlist{
        .a2-tooltip{
            left: 27px;
        }
    }
    .action.tocompare{
        .a2-tooltip{
            left: 22px;
        }
    }
    .a2-tooltip{
        display:block!important;
        position: absolute;
        top:-20px;
        opacity:0;
        visibility:hidden;
        outline: 0;        
        pointer-events: none;
        transform: translateY(-100%) translateX(-50%);
        transition: all 0.15s;
        transition-timing-function: cubic-bezier(.165,.84,.44,1);
        padding:@a2-tooltip__padding;
        color:@a2-tooltip__color;
        background: @a2-tooltip__bg;
        line-height:1.4;
        text-align:center;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
        font-weight: @font-weight__bold;
        border-radius: 0;
        font-size: 13px;
        text-transform: uppercase;
        width: @a2-tooltip__width;
        &:before{
            content: '';
            background: inherit;
            width: 12px;
            height: 12px;
            transform: rotate(45deg);
            display: block;
            position: absolute;
            bottom: -6px;
            left: ~"calc(50% - 6px)";
            z-index: -1;
        }
        &.a2-tooltip-white{
            background:white;
            color:inherit;
            box-shadow: 0 10px 20px rgba(0, 0, 0, 0.15);            
        }
        &.a2-tooltip-normal{
            text-transform: initial;
            font-weight: normal;
            font-size: inherit;
        }
        &.a2-tooltip-hc{
            left: 50%;
        }
    }
    .a2-info-circle{
        height: 20px;
        color: white;
        width: 20px;
        position: relative;
        margin: 0 5px;
        svg{
            fill: currentColor;
            position: relative;
            flex: 0 0 2px;
        }
        &:before{
            content: '';
            background: #333;
            height: 100%;
            width: 100%;
            flex: 0 0 100%;
            border-radius: 10px;
            display: block;
            transform: scale(1);
            position: absolute;
            left: 0;
            top: 0;
        }
        &:hover{
            &:before{
                transform: scale(1.15);
            }
        }
    }
}