@use "bulma/sass/utilities/css-variables" as cv;
@use "bulma/sass/utilities/initial-variables" as iv;
@use "bulma/sass/utilities/derived-variables" as dv;


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

.#{iv.$class-prefix}b-tooltip {
    @include cv.register-vars((
        "tooltip-arrow-size": #{$tooltip-arrow-size},
        "tooltip-arrow-margin": #{$tooltip-arrow-margin}
    ));

    @each $name, $pair in $tooltip-colors {
        &.is-#{$name} {
            @include cv.register-vars((
                "tooltip-background-color": cv.getVar($name),
                "tooltip-color": cv.getVar($name, "", "-invert")
            ));
        }
    }

};

@mixin tooltip($direction) {
    &.#{$direction} {
        .tooltip-content {
            @if ($direction == "is-top") {
                top: auto;
                right: auto;
                bottom: calc(100% + #{cv.getVar('tooltip-arrow-size')} + #{cv.getVar('tooltip-arrow-margin')});
                left: 50%;
                transform: translateX(-50%);
            } @else if ($direction == "is-bottom") {
                top: calc(100% + #{cv.getVar('tooltip-arrow-size')} + #{cv.getVar('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% + #{cv.getVar('tooltip-arrow-size')} + #{cv.getVar('tooltip-arrow-margin')});
                transform: translateY(-50%);
            } @else if ($direction == "is-left") {
                top: 50%;
                right: calc(100% + #{cv.getVar('tooltip-arrow-size')} + #{cv.getVar('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: cv.getVar('tooltip-arrow-size') solid transparent;
                border-bottom: cv.getVar('tooltip-arrow-size') solid cv.getVar('tooltip-background-color');
                border-left: cv.getVar('tooltip-arrow-size') solid transparent;
                border-bottom-color: cv.getVar('tooltip-background-color');
            } @else if ($direction == "is-top") {
                top: 100%;
                right: auto;
                bottom: auto;
                left: 50%;
                transform: translateX(-50%);
                border-top: cv.getVar('tooltip-arrow-size') solid cv.getVar('tooltip-background-color');
                border-right: cv.getVar('tooltip-arrow-size') solid transparent;
                border-left: cv.getVar('tooltip-arrow-size') solid transparent;
                border-top-color: cv.getVar('tooltip-background-color');
            } @else if ($direction == "is-left") {
                top: 50%;
                right: auto;
                bottom: auto;
                left: 100%;
                transform: translateY(-50%);
                border-top: cv.getVar('tooltip-arrow-size') solid transparent;
                border-bottom: cv.getVar('tooltip-arrow-size') solid transparent;
                border-left: cv.getVar('tooltip-arrow-size') solid cv.getVar('tooltip-background-color');
                border-left-color: cv.getVar('tooltip-background-color');
            } @else if ($direction == "is-right") {
                top: 50%;
                right: 100%;
                bottom: auto;
                left: auto;
                transform: translateY(-50%);
                border-top: cv.getVar('tooltip-arrow-size') solid transparent;
                border-right: cv.getVar('tooltip-arrow-size') solid cv.getVar('tooltip-background-color');
                border-bottom: cv.getVar('tooltip-arrow-size') solid transparent;
                border-right-color: cv.getVar('tooltip-background-color');
            }
        }
    }
}

// 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: cv.getVar('radius');
        font-size: 0.85rem;
        font-weight: cv.getVar('weight-normal');
        box-shadow: cv.getVar('shadow');
        z-index: 38;
        white-space: nowrap;
        position: absolute;
        background: cv.getVar('tooltip-background-color');
        color: cv.getVar('tooltip-color');
    }
    .tooltip-content::before {
        position: absolute;
        content: "";
        pointer-events: none;
        z-index: 38;
    }
    .tooltip-trigger {
        width: 100%;
    }
    &.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 cv.getVar('grey-light');
            cursor: default;
        }
    }
    &.is-square {
        .tooltip-content {
            border-radius: 0;
        }
    }
}