// stylelint-disable scss/comment-no-empty -- not sure how to write a longer comment that isn't a documentation block or compiled into output

@use "sass:math";
@use "sass:list";
@use "../../core";
@use "../../core/size";
@use "variables" as *;

$tooltip-border-radius: var(--f-border-radius-small);
$tooltip-arrow-width: 20;
$tooltip-arrow-height: 10;
$tooltip-border-width: 2;

// Width and height are the sides of the two right angle triangles:
//
// +---+---+  --+
// |  /|\  |    |
// | / | \ |    h
// |/α |  \|    |
// +---+---+  --+
//
// |       |
// +---w---+
//
// Note that the width is the combined width of both triangles

// First we calculate the angle α as `atan(w / 2h)`
$a: math.atan(math.div($tooltip-arrow-width, 2 * $tooltip-arrow-height));

// Given the angle α we can compute
$b: math.div($tooltip-border-width, math.sin(90deg - $a));
$c: math.div($tooltip-border-width, math.sin($a));

// prettier-ignore
$outer-border:
    math.div($tooltip-arrow-width, 2),
    $tooltip-arrow-height;

// prettier-ignore
$inner-border:
    math.div(math.round((list.nth($outer-border, 1) - $b) * 10), 10),
    math.div(math.round((list.nth($outer-border, 2) - $c) * 10), 10);

.tooltip {
    display: none;
    overflow: hidden;
    width: 100%;
    margin-bottom: core.densify(size.$margin-100);

    &.expanded,
    &.animating {
        display: block;
    }

    &__container {
        text-wrap: pretty;
        margin-bottom: core.densify(size.$margin-025);

        &:has(+ .tooltip.expanded),
        &:has(+ .tooltip.animating) {
            margin-bottom: 0;
        }

        .label {
            display: inline;
            width: max-content;
        }

        h1,
        h2,
        h3,
        h4,
        h5,
        h6 {
            display: inline;
            width: max-content;
        }
    }

    &__button {
        display: inline-flex;
        appearance: none;
        background: none;
        border: 0;
        cursor: pointer;
        min-height: 24px;
        min-width: 24px;
        margin-left: 6px;
        padding: 0;

        // shift it slightly downwards so it aligns better with text
        position: relative;
        transform: translateY(2px);

        // bug in icon?
        .icon {
            top: 0;
            left: 0;
        }

        .icon,
        .icon-stack {
            height: var(--f-icon-size-medium);
            width: var(--f-icon-size-medium);
            padding: 0;
            margin: auto;
        }
    }

    &__body {
        color: $tooltip-color-text-default;
        padding: 0 size.$padding-100;
    }

    &__header {
        color: $tooltip-header-color-text-default;
        font-size: var(--f-font-size-large);
        font-weight: var(--f-font-weight-bold);
        line-height: var(--f-line-height-medium);
        padding: 0 size.$padding-100;
        margin-bottom: size.$margin-050;
    }

    .close-button {
        margin: var(--f-tooltip-close-button-margin);
    }

    &__footer {
        display: flex;
        justify-content: flex-end;
    }

    &__bubble {
        display: flex;
        flex-direction: column;
        position: relative;
        margin-top: $tooltip-arrow-height * 1px;
        margin-bottom: size.$margin-050;
        border: 2px solid $tooltip-color-border;
        border-radius: $tooltip-border-radius;
        background-color: $tooltip-color-background;
        padding-top: size.$padding-100;

        &::before {
            content: "";
            position: absolute;
            top: 0;
            left: clamp(calc(#{$tooltip-arrow-width}px / 2), var(--f-tooltip-offset), calc(100% - #{$tooltip-arrow-width}px / 2));
            border-style: solid;
            border-width: 0 #{list.nth($outer-border, 1)}px #{list.nth($outer-border, 2)}px #{list.nth($outer-border, 1)}px;
            border-color: transparent transparent $tooltip-color-border;
            translate: -50% -100%;

            @media (forced-colors: active) {
                border-color: transparent transparent CanvasText;
                forced-color-adjust: none;
            }
        }

        &::after {
            content: "";
            position: absolute;
            top: 0;
            left: clamp(calc(#{$tooltip-arrow-width}px / 2), var(--f-tooltip-offset), calc(100% - #{$tooltip-arrow-width}px / 2));
            border-style: solid;
            border-width: 0 #{list.nth($inner-border, 1)}px #{list.nth($inner-border, 2)}px #{list.nth($inner-border, 1)}px;
            border-color: transparent transparent $tooltip-color-background;
            translate: -50% -100%;

            @media (forced-colors: active) {
                border-color: transparent transparent Canvas;
                forced-color-adjust: none;
            }
        }
    }
}