// Variables


$tooltipsPrefix ?= 'tooltips-' ;
$tooltipsFontSize = 12px ;
$tooltipsFontFamily = 'Helvetica Neue', Helvetica, Arial, sans-serif ;
$tooltipsVerticalPadding = 8px ;
$tooltipsHorizontalPadding = 10px ;

$tooltipsTooltipHeight = $tooltipsFontSize + 2 * $tooltipsVerticalPadding ;
$tooltipsArrowBorderWidth = 6px ;
$tooltipsArrowOffsetX = 2 * $tooltipsArrowBorderWidth ;

$tooltipsTextShadowDarkenAmount = 25% ;
$tooltipsTransitionDistance = 8px ;
$tooltipsShowDelay = 100ms ;
$tooltipsHideDelay = 0ms 
$tooltipsZIndex = 1000000 ;

// size
$tooltipsSizeSmall = 80px ;
$tooltipsSizeMedium = 150px ;
$tooltipsSizeLarge = 300px ;



// color
$tooltipsDefaultColor = hsl(0, 0%, 22%) ;
$tooltipsErrorColor = hsl(1, 40%, 50%) ;
$tooltipsWarningColor = hsl(38, 46%, 54%) ;
$tooltipsInfoColor = hsl(200, 50%, 45%) ;
$tooltipsSuccessColor = hsl(121, 32%, 40%) ;



// mixins



vendor(property, value)
    {property}  value
    -moz-{property}  value
    -webkit-{property}  value
    
arrow-border-color(color)
     for position in top  bottom  left  right 
        if position == top or position == bottom 
            for xDir in left  right 
                &.{$tooltipsPrefix}{position}-{xDir}:before 
                    border-{position}-color: color;

        &.{$tooltipsPrefix}{position}:before 
            border-{position}-color: color;



set-margin(property, transitionDirection, $translateX=0) 
    $value = unquote((property) + '('+ $tooltipsTransitionDistance * transitionDirection +')')
    &:before 
        vendor('transform', $value);
    &:after 
        if $translateX != 0 
            vendor('transform', translateX($translateX) $value);
       
        else 
            vendor('transform', $value);

vertical-positioned-tooltip(propertyY, transitionDirection, $xDirection=0)
    &:before 
        margin-{propertyY}: -2 * $tooltipsArrowBorderWidth + 1;
 

    &:before, &:after
        {propertyY}: 100%;
        left: 50%; 
    

    &:before 
        left  unquote(calc(50% - 6px))
    $translateX = -50%;
    if $xDirection == -1
        $translateX = -100%;
   
    else if $xDirection == 1
        $translateX = 0;

    &:after 
        vendor('transform', translateX($translateX));
   

    &:after
        if $xDirection != 0 
            margin-left: - ($xDirection * $tooltipsArrowOffsetX);

    &:hover, &:focus
        set-margin('translateY', transitionDirection, $translateX);
 

horizontal-positioned-tooltip(propertyX, transitionDirection) 
    &:before
        margin-{propertyX}: -2 * $tooltipsArrowBorderWidth + 1;
        margin-bottom: -1 * $tooltipsArrowBorderWidth;

    &:after 
        margin-bottom: -1 * floor($tooltipsTooltipHeight / 2);

    &:before, &:after 
        {propertyX}: 100%;
        bottom: 50%;

    &:hover, &:focus 
        set-margin('translateX', transitionDirection);


// color

tooltips-type($color)
    &:after
        background-color: $color;
        text-shadow: 0 -1px 0px darken($color, $tooltipsTextShadowDarkenAmount);
    arrow-border-color($color);

///====== style


[data-tooltips]
    position: relative;
    display: inline-block;

    &:before, 
    &:after 
        border-radius 4px;
        position absolute
        vendor('transform', translate3d(0, 0, 0))

        visibility hidden
        opacity 0
        z-index $tooltipsZIndex
        pointer-events: none

        vendor('transition', 0.3s ease)
        vendor('transition-delay', $tooltipsHideDelay)
     
    &:hover:before, 
    &:hover:after
        visibility  visible
        opacity 1

    &:hover:before, 
    &:hover:after
        vendor('transition-delay', $tooltipsShowDelay);
    &:before 
        content: '';
        position: absolute;
        background: transparent;
        border: $tooltipsArrowBorderWidth solid transparent;
        z-index: $tooltipsZIndex + 1;
    &:after 
        content: attr(data-tooltips); 
        background: $tooltipsDefaultColor;
        color: white;
        padding: $tooltipsVerticalPadding $tooltipsHorizontalPadding;
        font-size: $tooltipsFontSize;
        font-family: $tooltipsFontFamily;
        line-height: $tooltipsFontSize;
        white-space: nowrap;

[data-tooltips=''] 
    &:before, 
    &:after
        display: none !important;

[data-tooltips] 
    &:after 
        text-shadow: 0 -1px 0px darken($tooltipsDefaultColor, $tooltipsTextShadowDarkenAmount);
        box-shadow: 4px 4px 8px rgba(0, 0, 0, 0.3);

arrow-border-color($tooltipsDefaultColor);


.{$tooltipsPrefix}top 
    vertical-positioned-tooltip('bottom', -1);


.{$tooltipsPrefix}bottom 
    vertical-positioned-tooltip('top', 1);


.{$tooltipsPrefix}right
    horizontal-positioned-tooltip('left', 1);

.{$tooltipsPrefix}left
    horizontal-positioned-tooltip('right', -1);

.{$tooltipsPrefix}top-left
    vertical-positioned-tooltip('bottom', -1, -1);
    
.{$tooltipsPrefix}top-right 
    vertical-positioned-tooltip('bottom', -1, 1);

.{$tooltipsPrefix}bottom-left 
    vertical-positioned-tooltip('top', 1, -1);

.{$tooltipsPrefix}bottom-right
    vertical-positioned-tooltip('top', 1, 1);


// size


.{$tooltipsPrefix}small,
.{$tooltipsPrefix}medium,
.{$tooltipsPrefix}large 
    &:after
        white-space: normal;
        line-height: 1.4em;


.{$tooltipsPrefix}small 
    &:after 
        width: $tooltipsSizeSmall;

.{$tooltipsPrefix}medium
    &:after
        width: $tooltipsSizeMedium;

.{$tooltipsPrefix}large
    &:after
        width: $tooltipsSizeLarge;

.{$tooltipsPrefix}always
    &:after, 
    &:before 
        opacity: 1;
        visibility: visible;

    &.{$tooltipsPrefix}top
        set-margin('translateY', -1, -50%);
        &-left
            set-margin('translateY', -1, -100%);
        &-right 
            set-margin('translateY', -1, 0);

    &.{$tooltipsPrefix}bottom 
        set-margin('translateY', 1, -50%);
        &-left 
            set-margin('translateY', 1, -100%);
        
        &-right
            set-margin('translateY', 1, 0);

    &.{$tooltipsPrefix}left 
        set-margin('translateX', -1);
    &.{$tooltipsPrefix}right 
        set-margin('translateX', 1);


// color

.{$tooltipsPrefix}error
    tooltips-type($tooltipsErrorColor);
    
.{$tooltipsPrefix}warning 
    tooltips-type($tooltipsWarningColor)

.{$tooltipsPrefix}info
    tooltips-type($tooltipsInfoColor)

.{$tooltipsPrefix}success 
    tooltips-type($tooltipsSuccessColor)