/**
 * @copyright   2010-2013, The Titon Project
 * @license     http://opensource.org/licenses/bsd-license.php
 * @link        http://titon.io
 */

@import "../common";

.#{$vendor-prefix}tooltip {
    position: absolute;
    top: 0;
    left: 0;
    border: none;
    margin: $margin;
    padding: $small-padding;
    z-index: 500;
    max-width: 200px;
    visibility: hidden;
    background: #000;
    color: #fff;
    @include box-sizing(content-box); // Required or else MooTools position() is off

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

    &.center-left .#{$vendor-prefix}tooltip-arrow {
        border-left-color: #000;
        right: -12px;
    }

    &.center-right .#{$vendor-prefix}tooltip-arrow {
        border-right-color: #000;
        left: -12px;
    }

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

    &.top-center .#{$vendor-prefix}tooltip-arrow {
        border-top-color: #000;
        bottom: -12px;
    }

    &.bottom-center .#{$vendor-prefix}tooltip-arrow {
        border-bottom-color: #000;
        top: -12px;
    }
}

.#{$vendor-prefix}tooltip-arrow {
    width: 0;
    height: 0;
    border: 6px solid transparent;
    position: absolute;

    &:after {
        content: "";
        border: 4px solid transparent;
        position: absolute;
    }
}

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

.#{$vendor-prefix}tooltip,
.#{$vendor-prefix}popover {
    &.fade {
        opacity: 0;
        @include transition(opacity 0.5s);
    }

    &.from-above {
        @include transition(transform $tooltip-transition);
        @include transform(scale(1.2));

        &.show {
            @include transform(scale(1));
        }
    }

    &.from-below {
        @include transition(transform $tooltip-transition);
        @include transform(scale(0.8));

        &.show {
            @include transform(scale(1));
        }
    }

    &.flip-rotate {
        @include transition(transform $tooltip-transition);
        @include transform(rotate(-15deg));

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

    &.slide-in {
        @include transition(transform $tooltip-transition);

        &.top-left { @include transform(translate(-25%, -25%)); }
        &.top-center { @include transform(translateY(-50%)); }
        &.top-right { @include transform(translate(25%, -25%)); }
        &.center-left { @include transform(translateX(-25%)); }
        &.center-right { @include transform(translateX(25%)); }
        &.bottom-left { @include transform(translate(-25%, 25%)); }
        &.bottom-center { @include transform(translateY(50%)); }
        &.bottom-right { @include transform(translate(25%, 25%)); }

        &.show { @include transform(translate(0)); }
    }
}