/**
 * @copyright   2010-2015, The Titon Project
 * @license     http://opensource.org/licenses/BSD-3-Clause
 * @link        http://titon.io
 */

@import "../common";

$tooltip-arrow-width-double: ($tooltip-arrow-width * 2);

#{$tooltip-class} {
    position: absolute;
    top: 0;
    left: 0;
    border: none;
    margin: $margin;
    padding: $small-padding;
    z-index: $tooltip-zindex;
    max-width: 200px;
    visibility: hidden;
    background: #000;
    color: #fff;

    &.center-left #{$tooltip-class-arrow},
    &.center-right #{$tooltip-class-arrow} {
        top: 50%;
        margin-top: -#{$tooltip-arrow-width}px;
    }

    &.center-left #{$tooltip-class-arrow} {
        border-left-color: #000;
        right: -#{$tooltip-arrow-width-double}px;
    }

    &.center-right #{$tooltip-class-arrow} {
        border-right-color: #000;
        left: -#{$tooltip-arrow-width-double}px;
    }

    &.top-center #{$tooltip-class-arrow},
    &.bottom-center #{$tooltip-class-arrow} {
        left: 50%;
        margin-left: -#{$tooltip-arrow-width}px;
    }

    &.top-center #{$tooltip-class-arrow} {
        border-top-color: #000;
        bottom: -#{$tooltip-arrow-width-double}px;
    }

    &.bottom-center #{$tooltip-class-arrow} {
        border-bottom-color: #000;
        top: -#{$tooltip-arrow-width-double}px;
    }
}

#{$tooltip-class-arrow},
#{$popover-class-arrow} {
    width: 0;
    height: 0;
    border: #{$tooltip-arrow-width}px solid transparent;
    position: absolute;

    &::after {
        content: "";
        border: #{($tooltip-arrow-width - 2)}px solid transparent;
        position: absolute;
    }
}

//-------------------- Animations --------------------//

#{$tooltip-class},
#{$popover-class} {
    #{join-classes($popover-tooltip-animation)} {
        transition: opacity $tooltip-transition, visibility $tooltip-transition, transform $tooltip-transition;
    }

    @if index($popover-tooltip-animation, "fade") {
        &.fade {
            opacity: 0;
        }
    }

    @if index($popover-tooltip-animation, "from-above") {
        &.from-above {
            transform: scale(1.2);

            &.show {
                transform: scale(1);
            }
        }
    }

    @if index($popover-tooltip-animation, "from-below") {
        &.from-below {
            transform: scale(0.8);

            &.show {
                transform: scale(1);
            }
        }
    }

    @if index($popover-tooltip-animation, "flip-rotate") {
        &.flip-rotate {
            transform: rotate(-15deg);

            &.show {
                transform: rotate(0deg);
            }
        }
    }
}