//
// Tooltips
// --------------------------------------------------


// Base class
.tooltip {
    position: absolute;
    z-index: @zindex-tooltip;
    display: block;
    visibility: visible;
    font-size: @font-size-base;
    line-height: @line-height-100;
    .opacity(0);

    &.in {
        .opacity(1);
    }

    &.top {
        margin-top: -3px;
        padding: 5px 0;
    }

    &.right {
        margin-left: 3px;
        padding: 0 5px;
    }

    &.bottom {
        margin-top: 3px;
        padding: 5px 0;
    }

    &.left {
        margin-left: -3px;
        padding: 0 5px;
    }
}

// Wrapper for the tooltip content
.tooltip-inner {
    max-width: @tooltip-max-width;
    padding: @base-unit * 0.75 @base-unit;
    color: @tooltip-color;
    text-align: left;
    text-decoration: none;
    background-color: @tooltip-bg;
    border-radius: @border-radius-small;

    strong,
    b {
        color: @tooltip-color;
    }
}

// Arrows
.tooltip-arrow {
    position: absolute;
    width: 0;
    height: 0;
    border-color: transparent;
    border-style: solid;
}

.tooltip {
    &.top .tooltip-arrow {
        bottom: 0;
        left: 50%;
        margin-left: -@tooltip-arrow-width;
        border-width: @tooltip-arrow-width @tooltip-arrow-width 0;
        border-top-color: @tooltip-arrow-color;
    }

    &.top-left .tooltip-arrow {
        bottom: 0;
        left: 5px;
        border-width: @tooltip-arrow-width @tooltip-arrow-width 0;
        border-top-color: @tooltip-arrow-color;
    }

    &.top-right .tooltip-arrow {
        bottom: 0;
        right: 5px;
        border-width: @tooltip-arrow-width @tooltip-arrow-width 0;
        border-top-color: @tooltip-arrow-color;
    }

    &.right .tooltip-arrow {
        top: 50%;
        left: 0;
        margin-top: -@tooltip-arrow-width;
        border-width: @tooltip-arrow-width @tooltip-arrow-width @tooltip-arrow-width 0;
        border-right-color: @tooltip-arrow-color;
    }

    &.left .tooltip-arrow {
        top: 50%;
        right: 0;
        margin-top: -@tooltip-arrow-width;
        border-width: @tooltip-arrow-width 0 @tooltip-arrow-width @tooltip-arrow-width;
        border-left-color: @tooltip-arrow-color;
    }

    &.bottom .tooltip-arrow {
        top: 0;
        left: 50%;
        margin-left: -@tooltip-arrow-width;
        border-width: 0 @tooltip-arrow-width @tooltip-arrow-width;
        border-bottom-color: @tooltip-arrow-color;
    }

    &.bottom-left .tooltip-arrow {
        top: 0;
        left: 5px;
        border-width: 0 @tooltip-arrow-width @tooltip-arrow-width;
        border-bottom-color: @tooltip-arrow-color;
    }

    &.bottom-right .tooltip-arrow {
        top: 0;
        right: 5px;
        border-width: 0 @tooltip-arrow-width @tooltip-arrow-width;
        border-bottom-color: @tooltip-arrow-color;
    }
}


// Styles for WZ tooltip
#WzBoDy {
    strong,
    b {
        color: @tooltip-color;
    }

    td{
        overflow: hidden;
        text-overflow: ellipsis;
        max-width: @tooltip-max-width;
    }
}