@mixin tooltips-variant($background, $border, $color){  
    label{
        small{
            color: rgba($color, 0.7);
        }
        span{
            color: $color;
        }
        background: $background;
        @if $background == #FFF {
            box-shadow: 1px 2px 15px rgba(#555,0.3); 
        } @else {
            box-shadow: 1px 2px 15px rgba($background,0.5); 
        }        
    }
    &.tooltips-left{
        &:after{
            border-color: $border;                
        }          
        label{
            &:after{
                border-right-color: $border;
            }
        }          
    }          
    &.tooltips-right{
        label{
            &:after{
                border-left-color: $border;
            }
        }
    }
    &.tooltips-bottom{
        label{
            &:after{
                border-top-color: $border;
            }
        }
    }
    &.tooltips-top{
        label{
            &:after{
                border-bottom-color: $border;
            }
        }
    }    
}
.tooltips{
    label{
        position: absolute;
        border-radius: 3px;
        font-size: .85em;
        white-space: nowrap;
        left: 0;
        top: 0;
        padding: 3px 10px;
        font-size: 12px;
        font-weight: bold;
        font-style: normal;
        font-stretch: condensed;
        line-height: 1.5;
        letter-spacing: normal;
        @include transitions(ease-in-out,.4s);
        display: none;
        text-align: center;
        max-width: 250px;
        small{
            white-space: pre-line;
            padding: 5px 10px;                           
        }
        span{
            display: block;
            padding: 5px 10px;
            text-transform: initial !important;
        }
        &:after {
            border: solid transparent;
            content: " ";
            height: 0;
            width: 0;
            position: absolute;
            pointer-events: none;
            border-width: 6px;
            margin-top: -6px;
        }
    }
    &.tooltips-left{
        label{
            &:after {
                right: 100%;
	            top: 50%;               
            }            
        }
    }
    &.tooltips-right{
        label{
            &:after {
                left: 100%;
	            top: 50%;             
            }
        }
    }
    &.tooltips-bottom{
        label{
            &:after {
                top: 110%;
	            left: 45%;               
            }
        }
    }
    &.tooltips-top{
        label{
            &:after {
                bottom: 100%;
	            left: 45%;              
            }
        }
    }

    @each $color, $value in $theme-colors {
        &.tooltips-#{$color} {
            @if $color == light {
                @include tooltips-variant(#FFF,#FFF, #333);
            } @else {
                @include tooltips-variant($value,$value, #FFF)
            }
        }
    }
           
}
.small{
    font-size: inherit;
    label{
        width: 100px;
        left: -40px !important;  
    }
}
.medium{
    label{
        width: 140px;
        left: -60px !important; 
    }
}
.large{
    label{
        width: 200px;
        left: -87px !important; 
    }
}