$tooltip-arrow-size: 5px;
$tooltip-arrow-margin: 2px;

$tooltip-multiline-sizes: (
    small: 180px,
    medium: 240px,
    large: 300px
);

@mixin tooltip-arrow($direction, $color) {
    @if ($direction == "is-top") {
        border-top: $tooltip-arrow-size solid $color;
        border-right: $tooltip-arrow-size solid transparent;
        border-left: $tooltip-arrow-size solid transparent;
        bottom: calc(100% + #{$tooltip-arrow-margin});
    } @else if ($direction == "is-bottom") {
        border-right: $tooltip-arrow-size solid transparent;
        border-bottom: $tooltip-arrow-size solid $color;
        border-left: $tooltip-arrow-size solid transparent;
        top: calc(100% + #{$tooltip-arrow-margin});
    } @else if ($direction == "is-right") {
        border-top: $tooltip-arrow-size solid transparent;
        border-right: $tooltip-arrow-size solid $color;
        border-bottom: $tooltip-arrow-size solid transparent;
        left: calc(100% + #{$tooltip-arrow-margin});
    } @else if ($direction == "is-left") {
        border-top: $tooltip-arrow-size solid transparent;
        border-bottom: $tooltip-arrow-size solid transparent;
        border-left: $tooltip-arrow-size solid $color;
        right: calc(100% + #{$tooltip-arrow-margin});
    }
}

@mixin tooltip($direction) {
    &.#{$direction} {
        &:before,
        &:after {
            @if ($direction == "is-top") {
                top: auto;
                right: auto;
                bottom: calc(100% + #{$tooltip-arrow-size} + #{$tooltip-arrow-margin});
                left: 50%;
                transform: translateX(-50%);
            } @else if ($direction == "is-bottom") {
                top: calc(100% + #{$tooltip-arrow-size} + #{$tooltip-arrow-margin});
                right: auto;
                bottom: auto;
                left: 50%;
                transform: translateX(-50%);
            } @else if ($direction == "is-right") {
                top: 50%;
                right: auto;
                bottom: auto;
                left: calc(100% + #{$tooltip-arrow-size} + #{$tooltip-arrow-margin});
                transform: translateY(-50%);
            } @else if ($direction == "is-left") {
                top: 50%;
                right: calc(100% + #{$tooltip-arrow-size} + #{$tooltip-arrow-margin});
                bottom: auto;
                left: auto;
                transform: translateY(-50%);
            }
        }
        @each $name, $pair in $colors {
            $color: nth($pair, 1);
            &.is-#{$name}:before {
                @include tooltip-arrow($direction, $color)
            }
        }
        &.is-multiline {
            @each $name, $size in $tooltip-multiline-sizes {
                &.is-#{$name}:after {
                    width: $size;
                }
            }
        }
    }
}

// Base
.b-tooltip {
    @include tooltip("is-top");
    @include tooltip("is-right");
    @include tooltip("is-bottom");
    @include tooltip("is-left");
    position: relative;
    display: inline-flex;
    &:before,
    &:after {
        position: absolute;
        content: "";
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
    }
    &:before {
        z-index: 889;
    }
    &:after {
        content: attr(data-label);
        width: auto;
        padding: 0.35rem 0.75rem;
        border-radius: $radius-large;
        font-size: 0.85rem;
        font-weight: $weight-normal;
        box-shadow: 0px 1px 2px 1px rgba(0, 1, 0, 0.2);
        z-index: 888;
        white-space: nowrap;
    }
    &:not([data-label=""]):hover:before,
    &:not([data-label=""]):hover:after {
        opacity: 1;
        visibility: visible;
    }
    // Modifiers
    @each $name, $pair in $colors {
        $color: nth($pair, 1);
        $color-invert: nth($pair, 2);
        &.is-#{$name}:after {
            background: $color;
            color: $color-invert;
        }
    }
    &:not([data-label=""]).is-always {
        &:before,
        &:after {
            opacity: 1;
            visibility: visible;
        }
    }
    &.is-multiline {
        &:after {
            display: flex-block;
            text-align: center;
            white-space: normal;
        }
    }
    &.is-dashed {
        border-bottom: 1px dashed $grey-light;
        cursor: default;
    }
    &.is-square {
        &:after {
            border-radius: 0;
        }
    }
    &.is-animated {
        &:before,
        &:after {
            transition: opacity $speed $easing, visibility $speed $easing;
        }
    }
}