@use "sass:list";
@use "sass:map";
@use "../utils/helpers" as h;
@use "../utils/variables" as vars;

/* @docs */
$tooltip-zindex: map.get(vars.$zindex, "tooltip") !default;

$tooltip-content-font-size: 0.85rem !default;
$tooltip-content-color: h.useVar("white") !default;
$tooltip-content-font-weight: h.useVar("font-weight") !default;
$tooltip-content-line-height: h.useVar("line-height") !default;

$tooltip-content-padding: 0.35em 0.75em !default;
$tooltip-content-multiline-width: 300px !default;

$tooltip-content-box-shadow: h.useVar("overlay-box-shadow") !default;
$tooltip-content-background-color: h.useVar("grey-darkest") !default;
$tooltip-content-border-radius: h.useVar("border-radius") !default;

$tooltip-arrow-margin: 2px !default;
$tooltip-arrow-size: 5px !default;
/* @docs */

.o-tooltip {
    @include h.defineVar("tooltip-zindex", $tooltip-zindex);
    @include h.defineVar("tooltip-arrow-size", $tooltip-arrow-size);
    @include h.defineVar("tooltip-arrow-margin", $tooltip-arrow-margin);

    @include h.defineVar("tooltip-content-color", $tooltip-content-color);
    @include h.defineVar(
        "tooltip-content-font-size",
        $tooltip-content-font-size
    );
    @include h.defineVar(
        "tooltip-content-font-weight",
        $tooltip-content-font-weight
    );
    @include h.defineVar(
        "tooltip-content-line-height",
        $tooltip-content-line-height
    );

    @include h.defineVar(
        "tooltip-content-box-shadow",
        $tooltip-content-box-shadow
    );
    @include h.defineVar(
        "tooltip-content-background-color",
        $tooltip-content-background-color
    );
    @include h.defineVar(
        "tooltip-content-border-radius",
        $tooltip-content-border-radius
    );
    @include h.defineVar("tooltip-content-padding", $tooltip-content-padding);
    @include h.defineVar(
        "tooltip-content-multiline-width",
        $tooltip-content-multiline-width
    );

    position: relative;
    display: inline-flex;

    &__arrow {
        position: absolute;
        content: "";
        pointer-events: none;

        z-index: h.useVar("tooltip-zindex");
        color: h.useVar("tooltip-content-background-color");

        // position variants
        &--bottom {
            top: auto;
            right: auto;
            bottom: 100%;
            left: 50%;
            transform: translateX(-50%);

            // arrow
            border-bottom-style: solid;
            border-right-style: solid;
            border-right-color: transparent;
            border-left-style: solid;
            border-left-color: transparent;

            border-bottom-width: h.useVar("tooltip-arrow-size");
            border-right-width: h.useVar("tooltip-arrow-size");
            border-left-width: h.useVar("tooltip-arrow-size");
        }

        &--top {
            top: 100%;
            right: auto;
            bottom: auto;
            left: 50%;
            transform: translateX(-50%);

            // arrow
            border-top-style: solid;
            border-right-style: solid;
            border-right-color: transparent;
            border-left-style: solid;
            border-left-color: transparent;

            border-top-width: h.useVar("tooltip-arrow-size");
            border-right-width: h.useVar("tooltip-arrow-size");
            border-left-width: h.useVar("tooltip-arrow-size");
        }

        &--left {
            top: 50%;
            right: auto;
            bottom: auto;
            left: 100%;
            transform: translateY(-50%);

            border-left-style: solid;
            border-top-style: solid;
            border-top-color: transparent;
            border-bottom-style: solid;
            border-bottom-color: transparent;

            border-left-width: h.useVar("tooltip-arrow-size");
            border-top-width: h.useVar("tooltip-arrow-size");
            border-bottom-width: h.useVar("tooltip-arrow-size");
        }

        &--right {
            top: 50%;
            right: 100%;
            bottom: auto;
            left: auto;
            transform: translateY(-50%);

            border-right-style: solid;
            border-top-style: solid;
            border-top-color: transparent;
            border-bottom-style: solid;
            border-bottom-color: transparent;

            border-right-width: h.useVar("tooltip-arrow-size");
            border-top-width: h.useVar("tooltip-arrow-size");
            border-bottom-width: h.useVar("tooltip-arrow-size");
        }

        &--top-right {
            top: 100%;
            right: auto;
            bottom: auto;
            left: 50%;
            transform: translateX(-50%);

            // arrow
            border-top-style: solid;
            border-right-style: solid;
            border-right-color: transparent;
            border-left-style: solid;
            border-left-color: transparent;

            border-top-width: h.useVar("tooltip-arrow-size");
            border-right-width: calc(h.useVar("tooltip-arrow-size") * 2);
            border-left-width: 0;
        }

        &--top-left {
            top: 100%;
            right: auto;
            bottom: auto;
            left: 50%;
            transform: translateX(-50%);

            // arrow
            border-top-style: solid;
            border-right-style: solid;
            border-right-color: transparent;
            border-left-style: solid;
            border-left-color: transparent;

            border-top-width: h.useVar("tooltip-arrow-size");
            border-left-width: calc(h.useVar("tooltip-arrow-size") * 2);
            border-right-width: 0;
        }

        &--bottom-left {
            top: auto;
            right: auto;
            bottom: 100%;
            left: 50%;
            transform: translateX(-50%);

            // arrow
            border-bottom-style: solid;
            border-right-style: solid;
            border-right-color: transparent;
            border-left-style: solid;
            border-left-color: transparent;

            border-bottom-width: h.useVar("tooltip-arrow-size");
            border-left-width: calc(h.useVar("tooltip-arrow-size") * 2);
            border-right-width: 0;
        }

        &--bottom-right {
            top: auto;
            right: auto;
            bottom: 100%;
            left: 50%;
            transform: translateX(-50%);

            // arrow
            border-bottom-style: solid;
            border-right-style: solid;
            border-right-color: transparent;
            border-left-style: solid;
            border-left-color: transparent;

            border-bottom-width: h.useVar("tooltip-arrow-size");
            border-right-width: calc(h.useVar("tooltip-arrow-size") * 2);
            border-left-width: 0;
        }
    }

    &__content {
        position: absolute;
        white-space: nowrap;

        z-index: h.useVar("tooltip-zindex");
        padding: h.useVar("tooltip-content-padding");

        color: h.useVar("tooltip-content-color");
        font-size: h.useVar("tooltip-content-font-size");
        font-weight: h.useVar("tooltip-content-font-weight");
        line-height: h.useVar("tooltip-content-line-height");

        box-shadow: h.useVar("tooltip-content-box-shadow");
        background-color: h.useVar("tooltip-content-background-color");
        border-radius: h.useVar("tooltip-content-border-radius");

        // color variants
        @each $name, $pair in vars.$colors {
            &--#{$name} {
                @include h.defineVar(
                    "tooltip-content-color",
                    h.useVar("#{$name}-invert")
                );
                @include h.defineVar(
                    "tooltip-content-background-color",
                    h.useVar($name)
                );
            }
        }

        // position variants
        &--top {
            top: auto;
            right: auto;
            bottom: calc(
                (
                        h.useVar("tooltip-arrow-size") +
                            h.useVar("tooltip-arrow-margin")
                    ) +
                    100%
            );
            left: 50%;
            transform: translateX(-50%);
        }

        &--bottom {
            top: calc(
                (
                        h.useVar("tooltip-arrow-size") +
                            h.useVar("tooltip-arrow-margin")
                    ) +
                    100%
            );
            right: auto;
            bottom: auto;
            left: 50%;
            transform: translateX(-50%);
        }

        &--right {
            top: 50%;
            right: auto;
            bottom: auto;
            left: calc(
                (
                        h.useVar("tooltip-arrow-size") +
                            h.useVar("tooltip-arrow-margin")
                    ) +
                    100%
            );
            transform: translateY(-50%);
        }

        &--left {
            top: 50%;
            right: calc(
                (
                        h.useVar("tooltip-arrow-size") +
                            h.useVar("tooltip-arrow-margin")
                    ) +
                    100%
            );
            bottom: auto;
            left: auto;
            transform: translateY(-50%);
        }

        &--top-right {
            left: auto;
            top: auto;
            bottom: calc(
                (
                        h.useVar("tooltip-arrow-size") +
                            h.useVar("tooltip-arrow-margin")
                    ) +
                    100%
            );
            transform: translateX(50%);
        }

        &--top-left {
            right: auto;
            top: auto;
            bottom: calc(
                (
                        h.useVar("tooltip-arrow-size") +
                            h.useVar("tooltip-arrow-margin")
                    ) +
                    100%
            );
            transform: translateX(-50%);
        }

        &--bottom-right {
            left: auto;
            bottom: auto;
            top: calc(
                (
                        h.useVar("tooltip-arrow-size") +
                            h.useVar("tooltip-arrow-margin")
                    ) +
                    100%
            );
            transform: translateX(50%);
        }

        &--bottom-left {
            left: auto;
            bottom: auto;
            top: calc(
                (
                        h.useVar("tooltip-arrow-size") +
                            h.useVar("tooltip-arrow-margin")
                    ) +
                    100%
            );
            transform: translateX(-50%);
        }

        &--always {
            opacity: 1;
            visibility: visible;
        }

        &--multiline {
            text-align: center;
            white-space: normal;
            width: h.useVar("tooltip-content-multiline-width");
        }
    }

    &__trigger {
        width: 100%;
    }

    &--teleport {
        .o-tooltip__content {
            // position variants
            &--top,
            &--top-left,
            &--top-right {
                margin-top: calc(
                    -1 *
                        (
                            h.useVar("tooltip-arrow-size") +
                                h.useVar("tooltip-arrow-margin")
                        )
                );
            }

            &--bottom,
            &--bottom-left,
            &--bottom-right {
                margin-top: calc(
                    (
                        h.useVar("tooltip-arrow-size") +
                            h.useVar("tooltip-arrow-margin")
                    )
                );
            }

            &--right {
                margin-left: calc(
                    (
                        h.useVar("tooltip-arrow-size") +
                            h.useVar("tooltip-arrow-margin")
                    )
                );
            }

            &--left {
                margin-left: calc(
                    -1 *
                        (
                            h.useVar("tooltip-arrow-size") +
                                h.useVar("tooltip-arrow-margin")
                        )
                );
            }
        }
    }
}