// @import "../core/core";

//
// dc--has-tooltip enhanced version
// based on hint.css (https://github.com/chinchang/hint.css)
//
// * Defines the basic styling for the tooltip.
// * Each tooltip is made of 2 parts:
//  1) body (:after)
//  2) arrow (:before)
//

//
// HAS TOOLTIP VARIABLES
//

$dc--has-tooltip-zindex: 1000000 !default;
$dc--has-tooltip-hide-delay: 0ms !default;
$dc--has-tooltip-show-delay: 100ms !default;
$dc--has-tooltip-arrow-border-width: 6px !default;
$dc--has-tooltip-arrow-offset-x: 2rem !default;
$dc--has-tooltip-default-background-color: hsl(0, 0%, 22%) !default;
$dc--has-tooltip-default-color: $dc-white !default;
$dc--has-tooltip-vertical-padding: .8rem !default;
$dc--has-tooltip-horizontal-padding: 1rem !default;
$dc--has-tooltip-font-size: 1.4rem !default;
$dc--has-tooltip-height: $dc-space150 !default;
$dc--has-tooltip-transition-distance: .8rem !default;
// Size options
$dc--has-tooltip--small: 8rem !default;
$dc--has-tooltip--medium: 15rem !default;
$dc--has-tooltip--large: 30rem !default;

//
// HAS TOOLTIP "PRIVATE" MIXINS
//

// mixin to set margin on tooltip using translate transform
// $property
@mixin _dc--has-tooltip-set-margin ($property, $transition-direction, $translate-x: 0) {
    $value: unquote("#{$property}(#{$dc--has-tooltip-transition-distance * $transition-direction})");

    &:before {
        transform: $value;
    }

    &:after {
        @if $translate-x != 0 {
            // For vertical tooltips, we need to animate in y-direction
            // retaining its x-transform.
            transform: translateX($translate-x) $value;
        } @else {
            transform: $value;
        }
    }
}

@mixin _dc--has-tooltip-vertical-positioned-tooltip($property-y, $transition-direction, $x-direction:0) {
    &:before {
        // bring arrow inside so that it animates to normal position when shown.
        // HACK: +1px to avoid the 1 px white space between arrow and body during transition.
        margin-#{$property-y}: -2 * $dc--has-tooltip-arrow-border-width + 1px;
    }

    &:before,
    &:after {
        #{$property-y}: 100%;
        left: 50%; // get top-left corner in center
    }

    &:before {
        left: calc(50% - #{$dc--has-tooltip-arrow-border-width}); // get arrow center aligned with content
    }

    $translate-x: -50%;
    @if $x-direction == -1 {
        $translate-x: -100%;
    } @elseif $x-direction == 1 {
        $translate-x: 0;
    }

    &:after {
        transform: translateX($translate-x);
    }

    &:after {
        @if $x-direction != 0 {
            // bring back the tooltip by some offset so that arrow doesn't stick at end
            margin-left: -$x-direction * $dc--has-tooltip-arrow-offset-x;
        }
    }

    &:hover,
    &:focus {
        @include _dc--has-tooltip-set-margin("translateY", $transition-direction, $translate-x);
    }
}

@mixin _dc--has-tooltip-horizontal-positioned-tooltip($property-x, $transition-direction) {
    &:before {
        // bring arrow inside so that it animates to normal position when shown
        // HACK: +1px to avoid the 1 px white space between arrow and body during transition.
        // sass-lint:disable-block property-sort-order
        margin-#{$property-x}: -2 * $dc--has-tooltip-arrow-border-width + 1px;
        // bring back to center vertically
        margin-bottom: -1 * $dc--has-tooltip-arrow-border-width;
    }

    &:after {
        // bring back to center
        margin-bottom: -1 * (($dc--has-tooltip-height + $dc--has-tooltip-vertical-padding) / 2);
    }

    &:before,
    &:after {
        #{$property-x}: 100%;
        bottom: 50%;
    }

    &:hover,
    &:focus {
        @include _dc--has-tooltip-set-margin("translateX", $transition-direction);
    }
}

@mixin _dc--has-tooltip-arrow-color($position, $color: $dc--has-tooltip-default-background-color) {
    &:before {
        border-#{$position}-color: $color;
    }
}

@mixin _dc--has-tooltip-size($width) {
    &:after {
        width: $width;
        line-height: 1.4em;
        white-space: normal;
    }
}

//
// HAS TOOLTIP PUBLIC MIXINS
//

// base dc--has-tooltip mixin should be applied with a positioning mixin
@mixin dc--has-tooltip($content-attribute : data-dc-has-tooltip) {
    display: inline-block;
    position: relative;

    &:before,
    &:after {
        position: absolute;
        // HACK: Trigger hardware accelerated rendering, otherwise transform was not
        // working on a hidden element
        transform: translate3d(0, 0, 0);

        transition: .3s ease;
        transition-delay: $dc--has-tooltip-hide-delay;
        opacity: 0;

        // HACK: visibility is set to hidden because IE & Opera don't support
        // pointer-events on HTML content yet because of which hovering a hidden tooltip
        // shows the tooltip.
        visibility: hidden;

        z-index: $dc--has-tooltip-zindex;


        // shouldn't receive pointer events, otherwise even hovering tooltip will make it appear
        pointer-events: none;
    }

    &:hover:before,
    &:hover:after {
        opacity: 1;
        visibility: visible;
    }

    &:hover:before,
    &:hover:after {
        // $hintShowDelay will apply as soon as element is hovered.
        transition-delay: $dc--has-tooltip-show-delay;
    }

    // tooltip arrow
    &:before {
        position: absolute;
        border: $dc--has-tooltip-arrow-border-width solid transparent;
        background: transparent;
        content: "";

        // move z-index 1 up than :after so that it shows over box-shadow
        z-index: $dc--has-tooltip-zindex + 1;
    }

    // tooltip body
    &:after {
        padding: $dc--has-tooltip-vertical-padding $dc--has-tooltip-horizontal-padding;
        background: $dc--has-tooltip-default-background-color;
        color: $dc--has-tooltip-default-color;
        font-size: $dc--has-tooltip-font-size;
        line-height: $dc--has-tooltip-font-size; // Vertical centering.
        white-space: nowrap; // Prevent breaking to new line.
        content: attr(#{$content-attribute}); // The magic!
    }
}

// positioning mixins
@mixin dc--has-tooltip--top {
    @include _dc--has-tooltip-vertical-positioned-tooltip("bottom", -1);
    @include _dc--has-tooltip-arrow-color("top");
}

@mixin dc--has-tooltip--top-right {
    @include _dc--has-tooltip-vertical-positioned-tooltip("bottom", -1, 1);
    @include _dc--has-tooltip-arrow-color("top");
}

@mixin dc--has-tooltip--top-left {
    @include _dc--has-tooltip-vertical-positioned-tooltip("bottom", -1, -1);
    @include _dc--has-tooltip-arrow-color("top");
}

@mixin dc--has-tooltip--bottom {
    @include _dc--has-tooltip-vertical-positioned-tooltip("top", 1);
    @include _dc--has-tooltip-arrow-color("bottom");
}

@mixin dc--has-tooltip--bottom-right {
    @include _dc--has-tooltip-vertical-positioned-tooltip("top", 1, 1);
    @include _dc--has-tooltip-arrow-color("bottom");
}

@mixin dc--has-tooltip--bottom-left {
    @include _dc--has-tooltip-vertical-positioned-tooltip("top", 1, -1);
    @include _dc--has-tooltip-arrow-color("bottom");
}

@mixin dc--has-tooltip--right {
    @include _dc--has-tooltip-horizontal-positioned-tooltip("left", 1);;
    @include _dc--has-tooltip-arrow-color("right");
}

@mixin dc--has-tooltip--left {
    @include _dc--has-tooltip-horizontal-positioned-tooltip("right", -1);
    @include _dc--has-tooltip-arrow-color("left");
}

// sizing mixins
@mixin dc--has-tooltip--small {
    @include _dc--has-tooltip-size($dc--has-tooltip--small);
}

@mixin dc--has-tooltip--medium {
    @include _dc--has-tooltip-size($dc--has-tooltip--medium);
}

@mixin dc--has-tooltip--large {
    @include _dc--has-tooltip-size($dc--has-tooltip--large);
}


//
// = TOOLTIP SELECTORS
// ------------------------------------------------------------
@mixin dc-tooltip-selectors {

    .dc--has-tooltip {
        @include dc--has-tooltip;
    }

    .dc--has-tooltip--top {
        @include dc--has-tooltip--top;
    }

    .dc--has-tooltip--top-right {
        @include dc--has-tooltip--top-right;
    }

    .dc--has-tooltip--top-left {
        @include dc--has-tooltip--top-left;
    }

    .dc--has-tooltip--bottom {
        @include dc--has-tooltip--bottom;
    }

    .dc--has-tooltip--bottom-right {
        @include dc--has-tooltip--bottom-right;
    }

    .dc--has-tooltip--bottom-left {
        @include dc--has-tooltip--bottom-left;
    }

    .dc--has-tooltip--right {
        @include dc--has-tooltip--right;
    }

    .dc--has-tooltip--left {
        @include dc--has-tooltip--left;
    }

    .dc--has-tooltip--small {
        @include dc--has-tooltip--small;
    }

    .dc--has-tooltip--medium {
        @include dc--has-tooltip--medium;
    }

    .dc--has-tooltip--large {
        @include dc--has-tooltip--large;
    }
}