.tooltip when (@componentsJS-tooltips) and (@tooltips-native){
    &:extend([class*="tooltip-native"]);

    a&{
        &:extend(a[class*="tooltip-native"]);
    }
}

[class*="tooltip-native"] when (@tooltips-native){
    position : relative;
    cursor   : help;

    a&{
        cursor : pointer;
    }

    &[class*="--arrow"]:before, &:after{
        content  : '';
        position : absolute;
        margin   : auto;
        display  : none;
    }
    &:hover{
        .opacity(1) !important;

        &[class*="--arrow"]:before, &:after{
            display : block;
        }
    }

    &:after{
        content     : attr(title);
        z-index     : 9999;
        font-size   : @font-size-base * @font-size-small;
        line-height : @line-height;
        padding     : @padding-small-vertical @padding-small-horizontal;
        max-width   : @tooltip-width;
        background  : @tooltip-bg;
        color       : @tooltip-color;
        & when (@tooltip-border-width > 0){
            border : @tooltip-border-width solid @tooltip-border-color;
        }
        .box-shadow(3px 3px 7px fade(#000, 30%));
        overflow      : hidden;
        white-space   : nowrap;
        text-overflow : ellipsis;
    }

//    &[class*="--oneLine"]:after{
//        white-space : nowrap;
//        max-width   : none;
//    }

    &[class*="--autoWidth"]:after{
        max-width : none;
    }

    &[class*="--fulltext"]:after{
        white-space : normal;
        width       : @tooltip-width;
    }

    &[class*="--arrow"]:before{
        width        : 0;
        height       : 0;
        border-width : @tooltip-arrow-width;
        border-style : solid;
        border-color : transparent;
        z-index      : 10000;
    }

    &, &[class*="--bottom"]{

        &[class*="--arrow"]:before, &:after{
            left : 50%;
            .transform(translateX(-50%));
        }
    }

    &[class*="--left"], &[class*="--right"]{

        &[class*="--arrow"]:before, &:after{
            left : auto;
            top  : 50%;
            .transform(translateY(-50%));
        }
    }

    //    &[class*="--top"]{

    &[class*="--arrow"]:before, &:after{
        bottom : 100%;
    }

    &[class*="--arrow"]:before{
        & when (@tooltip-border-width = 0){
            border-top-color : @tooltip-bg;
        }
        & when (@tooltip-border-width > 0){
            border-top-color : @tooltip-border-color;
        }
        border-bottom : none;
    }
    &:after{
        margin-bottom : @tooltip-arrow-width;
    }
    //    }

    &[class*="--bottom"],
    &[class*="--left"],
    &[class*="--right"]{
        &:after{
            border-top-color : transparent;
        }
    }
    &[class*="--bottom"]{

        &[class*="--arrow"]:before, &:after{
            top    : 100%;
            bottom : auto;
        }

        &[class*="--arrow"]:before{
            & when (@tooltip-border-width = 0){
                border-bottom-color : @tooltip-bg;
            }
            & when (@tooltip-border-width > 0){
                border-bottom-color : @tooltip-border-color;
            }
            border-top : none;
        }
        &:after{
            margin-top : @tooltip-arrow-width;
        }
    }

    &[class*="--left"]{

        &[class*="--arrow"]:before, &:after{
            right  : 100%;
            bottom : auto;
        }

        &[class*="--arrow"]:before{
            & when (@tooltip-border-width = 0){
                border-left-color : @tooltip-bg;
            }
            & when (@tooltip-border-width > 0){
                border-left-color : @tooltip-border-color;
            }
            border-right : none;
        }
        &:after{
            margin-right : @tooltip-arrow-width;
        }
    }

    &[class*="--right"]{

        &[class*="--arrow"]:before, &:after{
            left   : 100%;
            bottom : auto;
        }

        &[class*="--arrow"]:before{
            & when (@tooltip-border-width = 0){
                border-right-color : @tooltip-bg;
            }
            & when (@tooltip-border-width > 0){
                border-right-color : @tooltip-border-color;
            }
            border-left : none;
        }
        &:after{
            margin-left : @tooltip-arrow-width;
        }
    }

    &[class*="--success"] when (@tooltip-color-success) and (@tooltip-colors){
        &:after{
            background : @state-success-bg;
            color      : @state-success-color;
            & when (@tooltip-border-width > 0){
                border-color : @state-success-border;
            }
        }
        //        &[class*="--top"]{
        &[class*="--arrow"]:before{
            & when (@tooltip-border-width = 0){
                border-top-color : @state-success-bg;
            }
            & when (@tooltip-border-width > 0){
                border-top-color : @state-success-border;
            }
        }
        //        }
        &[class*="--bottom"]{
            &[class*="--arrow"]:before{
                & when (@tooltip-border-width = 0){
                    border-bottom-color : @state-success-bg;
                }
                & when (@tooltip-border-width > 0){
                    border-bottom-color : @state-success-border;
                }
            }
        }

        &[class*="--left"]{
            &[class*="--arrow"]:before{
                & when (@tooltip-border-width = 0){
                    border-left-color : @state-success-bg;
                }
                & when (@tooltip-border-width > 0){
                    border-left-color : @state-success-border;
                }
            }
        }
        &[class*="--right"]{
            &[class*="--arrow"]:before{
                & when (@tooltip-border-width = 0){
                    border-right-color : @state-success-bg;
                }
                & when (@tooltip-border-width > 0){
                    border-right-color : @state-success-border;
                }
            }
        }
    }

    &[class*="--warning"] when (@tooltip-color-warning) and (@tooltip-colors){
        &:after{
            background : @state-warning-bg;
            color      : @state-warning-color;
            & when (@tooltip-border-width > 0){
                border-color : @state-warning-border;
            }
        }
        //        &[class*="--top"]{
        &[class*="--arrow"]:before{
            & when (@tooltip-border-width = 0){
                border-top-color : @state-warning-bg;
            }
            & when (@tooltip-border-width > 0){
                border-top-color : @state-warning-border;
            }
        }
        //        }
        &[class*="--bottom"]{
            &[class*="--arrow"]:before{
                & when (@tooltip-border-width = 0){
                    border-bottom-color : @state-warning-bg;
                }
                & when (@tooltip-border-width > 0){
                    border-bottom-color : @state-warning-border;
                }
            }
        }

        &[class*="--left"]{
            &[class*="--arrow"]:before{
                & when (@tooltip-border-width = 0){
                    border-left-color : @state-warning-bg;
                }
                & when (@tooltip-border-width > 0){
                    border-left-color : @state-warning-border;
                }
            }
        }
        &[class*="--right"]{
            &[class*="--arrow"]:before{
                & when (@tooltip-border-width = 0){
                    border-right-color : @state-warning-bg;
                }
                & when (@tooltip-border-width > 0){
                    border-right-color : @state-warning-border;
                }
            }
        }
    }

    &[class*="--error"] when (@tooltip-color-error) and (@tooltip-colors){
        &:after{
            background : @state-error-bg;
            color      : @state-error-color;
            & when (@tooltip-border-width > 0){
                border-color : @state-error-border;
            }
        }

        //        &[class*="--top"]{
        &[class*="--arrow"]:before{
            & when (@tooltip-border-width = 0){
                border-top-color : @state-error-bg;
            }
            & when (@tooltip-border-width > 0){
                border-top-color : @state-error-border;
            }
        }
        //        }
        &[class*="--bottom"]{
            &[class*="--arrow"]:before{
                & when (@tooltip-border-width = 0){
                    border-bottom-color : @state-error-bg;
                }
                & when (@tooltip-border-width > 0){
                    border-bottom-color : @state-error-border;
                }
            }
        }
        &[class*="--left"]{
            &[class*="--arrow"]:before{
                & when (@tooltip-border-width = 0){
                    border-left-color : @state-error-bg;
                }
                & when (@tooltip-border-width > 0){
                    border-left-color : @state-error-border;
                }
            }
        }
        &[class*="--right"]{
            &[class*="--arrow"]:before{
                & when (@tooltip-border-width = 0){
                    border-right-color : @state-error-bg;
                }
                & when (@tooltip-border-width > 0){
                    border-right-color : @state-error-border;
                }
            }
        }
    }

    &[class*="--info"] when (@tooltip-color-info) and (@tooltip-colors){
        &:after{
            background : @state-info-bg;
            color      : @state-info-color;
            & when (@tooltip-border-width > 0){
                border-color : @state-info-border;
            }
        }

        //        &[class*="--top"]{
        &[class*="--arrow"]:before{
            & when (@tooltip-border-width = 0){
                border-top-color : @state-info-bg;
            }
            & when (@tooltip-border-width > 0){
                border-top-color : @state-info-border;
            }
        }
        //        }
        &[class*="--bottom"]{
            &[class*="--arrow"]:before{
                & when (@tooltip-border-width = 0){
                    border-bottom-color : @state-info-bg;
                }
                & when (@tooltip-border-width > 0){
                    border-bottom-color : @state-info-border;
                }
            }
        }
        &[class*="--left"]{
            &[class*="--arrow"]:before{
                & when (@tooltip-border-width = 0){
                    border-left-color : @state-info-bg;
                }
                & when (@tooltip-border-width > 0){
                    border-left-color : @state-info-border;
                }
            }
        }
        &[class*="--right"]{
            &[class*="--arrow"]:before{
                & when (@tooltip-border-width = 0){
                    border-right-color : @state-info-bg;
                }
                & when (@tooltip-border-width > 0){
                    border-right-color : @state-info-border;
                }
            }
        }
    }
}