/* @docs */
$tooltip-arrow-margin: 2px !default;
$tooltip-arrow-size: 5px !default;
$tooltip-background-color: $primary !default;
$tooltip-color: $primary-invert !default;
$tooltip-content-box-shadow: 0px 1px 2px 1px rgba(0, 1, 0, 0.2) !default;
$tooltip-content-font-size: 0.85rem !default;
$tooltip-content-max-width: 300px !default;
$tooltip-content-multiline-width: 300px !default;
$tooltip-content-padding: 0.35rem 0.75rem !default;
$tooltip-content-radius-large: 6px !default;
$tooltip-content-weight-normal: 400 !default;
$tooltip-content-zindex: 38 !default;
/* @docs */

$TBLR_CALC_EXPRESSION: "calc(($size + $margin) + 100%)";

@mixin tooltip-arrow($direction, $name, $color) {
    @if ($direction == "top") {
        border-top-style: solid;
        @include avariable('border-top-width', 'tooltip-arrow-size', $tooltip-arrow-size);
        border-right-style: solid;
        border-right-color: transparent;
        border-left-style: solid;
        border-left-color: transparent;
        @include avariable('border-right-width', 'tooltip-arrow-size', $tooltip-arrow-size);
        @include avariable('border-left-width', 'tooltip-arrow-size', $tooltip-arrow-size);
    } @else if ($direction == "bottom") {
        border-bottom-style: solid;
        @include avariable('border-bottom-width', 'tooltip-arrow-size', $tooltip-arrow-size);
        border-right-style: solid;
        border-right-color: transparent;
        border-left-style: solid;
        border-left-color: transparent;
        @include avariable('border-right-width', 'tooltip-arrow-size', $tooltip-arrow-size);
        @include avariable('border-left-width', 'tooltip-arrow-size', $tooltip-arrow-size);
    } @else if ($direction == "right") {
        border-right-style: solid;
        @include avariable('border-right-width', 'tooltip-arrow-size', $tooltip-arrow-size);
        border-top-style: solid;
        border-top-color: transparent;
        border-bottom-style: solid;
        border-bottom-color: transparent;
        @include avariable('border-top-width', 'tooltip-arrow-size', $tooltip-arrow-size);
        @include avariable('border-bottom-width', 'tooltip-arrow-size', $tooltip-arrow-size);
    } @else if ($direction == "left") {
        border-left-style: solid;
        @include avariable('border-left-width', 'tooltip-arrow-size', $tooltip-arrow-size);
        border-top-style: solid;
        border-top-color: transparent;
        border-bottom-style: solid;
        border-bottom-color: transparent;
        @include avariable('border-top-width', 'tooltip-arrow-size', $tooltip-arrow-size);
        @include avariable('border-bottom-width', 'tooltip-arrow-size', $tooltip-arrow-size);
    }
}

@mixin tooltip($direction) {
    &__arrow {
        @if ($direction == "bottom") {
            &--bottom {
                top: auto;
                right: auto;
                bottom: 100%;
                left: 50%;
                transform: translateX(-50%);
                @include tooltip-arrow($direction, null, $tooltip-background-color);
            }
        } @else if ($direction == "top") {
            &--top {
                top: 100%;
                right: auto;
                bottom: auto;
                left: 50%;
                transform: translateX(-50%);
                @include tooltip-arrow($direction, null, $tooltip-background-color);
            }
        } @else if ($direction == "left") {
            &--left {
                top: 50%;
                right: auto;
                bottom: auto;
                left: 100%;
                transform: translateY(-50%);
                @include tooltip-arrow($direction, null, $tooltip-background-color);
            }
        } @else if ($direction == "right") {
            &--right {
                top: 50%;
                right: 100%;
                bottom: auto;
                left: auto;
                transform: translateY(-50%);
                @include tooltip-arrow($direction, null, $tooltip-background-color);
            }
        }
    }
    &__content {
        @if ($direction == "top") {
            &--top {
                top: auto;
                right: auto;
                @include evariable(
                    'bottom', $TBLR_CALC_EXPRESSION,
                    eparam('$size', variable('tooltip-arrow-size', $tooltip-arrow-size)),
                    eparam('$margin', variable('tooltip-arrow-margin', $tooltip-arrow-margin)),
                );
                left: 50%;
                transform: translateX(-50%);
            }
        } @else if ($direction == "bottom") {
            &--bottom {
                @include evariable(
                    'top', $TBLR_CALC_EXPRESSION,
                    eparam('$size', variable('tooltip-arrow-size', $tooltip-arrow-size)),
                    eparam('$margin', variable('tooltip-arrow-margin', $tooltip-arrow-margin)),
                );
                right: auto;
                bottom: auto;
                left: 50%;
                transform: translateX(-50%);
            }
        } @else if ($direction == "right") {
            &--right{
                top: 50%;
                right: auto;
                bottom: auto;
                @include evariable(
                    'left', $TBLR_CALC_EXPRESSION,
                    eparam('$size', variable('tooltip-arrow-size', $tooltip-arrow-size)),
                    eparam('$margin', variable('tooltip-arrow-margin', $tooltip-arrow-margin)),
                );
                transform: translateY(-50%);
            }
        } @else if ($direction == "left") {
            &--left {
                top: 50%;
                @include evariable(
                    'right', $TBLR_CALC_EXPRESSION,
                    eparam('$size', variable('tooltip-arrow-size', $tooltip-arrow-size)),
                    eparam('$margin', variable('tooltip-arrow-margin', $tooltip-arrow-margin)),
                );
                bottom: auto;
                left: auto;
                transform: translateY(-50%);
            }
        }
    }
}

// Base
.o-tip {
    @include tooltip("top");
    @include tooltip("right");
    @include tooltip("bottom");
    @include tooltip("left");
    position: relative;
    display: inline-flex;
    &__arrow {
        position: absolute;
        content: "";
        pointer-events: none;
        @include avariable('z-index', 'tooltip-content-zindex', $tooltip-content-zindex);
        @include avariable('color', 'tooltip-background-color', $tooltip-background-color);
        @each $name, $pair in $colors {
            $color: nth($pair, 1);
            $color-invert: nth($pair, 2);
            &--#{$name} {
                @include avariable('color', ('variant-' + #{$name}), $color);
            }
        }
    }
    &__content {
        position: absolute;
        white-space: nowrap;
        @include avariable('max-width', 'tooltip-content-max-width', $tooltip-content-max-width);
        @include avariable('padding', 'tooltip-content-padding', $tooltip-content-padding);
        @include avariable('border-radius', 'tooltip-content-radius-large', $tooltip-content-radius-large);
        @include avariable('font-size', 'tooltip-content-font-size', $tooltip-content-font-size);
        @include avariable('font-weight', 'tooltip-content-weight-normal', $tooltip-content-weight-normal);
        @include avariable('box-shadow', 'tooltip-content-box-shadow', $tooltip-content-box-shadow);
        @include avariable('z-index', 'tooltip-content-zindex', $tooltip-content-zindex);
        @include avariable('background-color', 'tooltip-background-color', $tooltip-background-color);
        @include avariable('color', 'tooltip-color', $tooltip-color);
        @each $name, $pair in $colors {
            $color: nth($pair, 1);
            $color-invert: nth($pair, 2);
            &--#{$name} {
                @include avariable('background', ('variant-' + #{$name}), $color);
                @include avariable('color', ('variant-invert-' + #{$name}), $color-invert);
            }
        }
        &--always {
            opacity: 1;
            visibility: visible;
        }
        &--multiline {
            text-align: center;
            white-space: normal;
            @include avariable('width', 'tooltip-content-multiline-width', $tooltip-content-multiline-width);
        }
    }
    &__trigger {
        width: 100%;
    }
}