$tooltip-arrow-size: 5px !default;
$tooltip-arrow-margin: 2px !default;
$tooltip-multiline-sizes: (
    small: 180px,
    medium: 240px,
    large: 300px
) !default;
$tooltip-colors: $colors !default;

@mixin tooltip-arrow-color($direction, $color) {
    @if ($direction == "is-top") {
        border-top-color: $color;
    } @else if ($direction == "is-bottom") {
        border-bottom-color: $color;
    } @else if ($direction == "is-right") {
        border-right-color: $color;
    } @else if ($direction == "is-left") {
        border-left-color: $color;
    }
}

@mixin tooltip($direction) {
    &.#{$direction} {
        .tooltip-content {
            @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%);
            }
        }
        .tooltip-content::before {
            @if ($direction == "is-bottom") {
                top: auto;
                right: auto;
                bottom: 100%;
                left: 50%;
                transform: translateX(-50%);
                border-right: $tooltip-arrow-size solid transparent;
                border-bottom: $tooltip-arrow-size solid $primary;
                border-left: $tooltip-arrow-size solid transparent;
            } @else if ($direction == "is-top") {
                top: 100%;
                right: auto;
                bottom: auto;
                left: 50%;
                transform: translateX(-50%);
                border-top: $tooltip-arrow-size solid $primary;
                border-right: $tooltip-arrow-size solid transparent;
                border-left: $tooltip-arrow-size solid transparent;
            } @else if ($direction == "is-left") {
                top: 50%;
                right: auto;
                bottom: auto;
                left: 100%;
                transform: translateY(-50%);
                border-top: $tooltip-arrow-size solid transparent;
                border-bottom: $tooltip-arrow-size solid transparent;
                border-left: $tooltip-arrow-size solid $primary;
            } @else if ($direction == "is-right") {
                top: 50%;
                right: 100%;
                bottom: auto;
                left: auto;
                transform: translateY(-50%);
                border-top: $tooltip-arrow-size solid transparent;
                border-right: $tooltip-arrow-size solid $primary;
                border-bottom: $tooltip-arrow-size solid transparent;
            }
        }
        @each $name, $pair in $tooltip-colors {
            $color: nth($pair, 1);
            &.is-#{$name} {
                .tooltip-content::before {
                    @include tooltip-arrow-color($direction, $color)
                }
                // If light and dark colors are provided
                @if length($pair) >= 4 {
                    $color-light: nth($pair, 3);
                    &.is-light {
                        .tooltip-content::before {
                            @include tooltip-arrow-color($direction, $color-light)
                        }
                    }
                }
            }
        }
    }
}

// Base
.b-tooltip {
    @include tooltip("is-top");
    @include tooltip("is-right");
    @include tooltip("is-bottom");
    @include tooltip("is-left");
    position: relative;
    display: inline-flex;
    .tooltip-content {
        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: 38;
        white-space: nowrap;
        position: absolute;
    }
    .tooltip-content::before {
        position: absolute;
        content: "";
        pointer-events: none;
        z-index: 38;
    }
    .tooltip-trigger {
        width: 100%;
    }
    // Modifiers
    @each $name, $pair in $tooltip-colors {
        $color: nth($pair, 1);
        $color-invert: nth($pair, 2);
        &.is-#{$name} {
            .tooltip-content {
                background: $color;
                color: $color-invert;
            }
            // If light and dark colors are provided
            @if length($pair) >= 4 {
                $color-light: nth($pair, 3);
                $color-dark: nth($pair, 4);
                &.is-light {
                    .tooltip-content {
                        background: $color-light;
                        color: $color-dark;
                    }
                }
            }
        }
    }
    &.is-always {
        .tooltip-content::before,
        .tooltip-content {
            opacity: 1;
            visibility: visible;
        }
    }
    &.is-multiline {
        .tooltip-content {
            display: flex-block;
            text-align: center;
            white-space: normal;
        }
        @each $name, $size in $tooltip-multiline-sizes {
            &.is-#{$name} {
                .tooltip-content {
                    width: $size;
                }
            }
        }
    }
    &.is-dashed {
        .tooltip-trigger {
            border-bottom: 1px dashed $grey-light;
            cursor: default;
        }
    }
    &.is-square {
        .tooltip-content {
            border-radius: 0;
        }
    }
}