// 1. The arrow must be a standalone HTML element so the Floating UI library can position it correctly.
//    https://floating-ui.com
//
// 2. Reuse already generated custom properties to allow overriding the arrow appearance live in the browser.

@use 'sass:math';
@use '../../tools/dictionaries';
@use '../../tools/placement';
@use '../../tools/reset';
@use '../../tools/svg';
@use '../../tools/typography';
@use 'theme';
@use 'tools';

.TooltipPopover {
    @include placement.child();
    @include placement.child-controlled($prefix: 'tooltip', $offset: theme.$arrow-height);
    @include typography.generate(theme.$typography);

    --tooltip-max-width: #{theme.$max-width};

    width: max-content;
    max-width: var(--tooltip-max-width);
    padding: theme.$padding;
    text-align: left;
    white-space: normal;
    word-break: normal;
    color: theme.$color;
    border-radius: theme.$border-radius;
    background-color: theme.$background-color;
    box-shadow: theme.$box-shadow;
    word-wrap: break-word;

    @media (prefers-reduced-motion: no-preference) {
        transition-property: opacity, visibility, scale;
        transition-duration: theme.$transition-duration;
    }
}

// 1.
.TooltipPopover__arrow {
    @include placement.arrow(
        $prefix: 'tooltip',
        $width: theme.$arrow-width,
        $height: theme.$arrow-height,
        $corner-offset: theme.$arrow-corner-offset
    );

    width: var(--tooltip-arrow-width); // 2.
    height: var(--tooltip-arrow-height); // 2.
    background: no-repeat center/cover svg.escape(theme.$arrow-shape);
}

.TooltipPopover__close {
    @include reset.button();

    width: theme.$close-button-size;
    height: theme.$close-button-size;
    color: theme.$color;
}

.TooltipPopover--dismissible {
    --tooltip-max-width: calc(#{theme.$max-width} + #{theme.$gap} + #{theme.$close-button-size});

    display: grid;
    grid-template-columns: 1fr auto;
    column-gap: theme.$gap;
    align-items: center;
}

@include dictionaries.generate-placements(
    $class-name: 'TooltipPopover',
    $dictionary-values: theme.$placement-dictionary,
    $offset: theme.$arrow-height,
    $is-controlled: true,
    $has-arrow: true
);

// Controlled visibility
.TooltipPopover.is-hidden {
    @extend %hidden;
}

.TooltipPopover.is-visible {
    @extend %visible;
}
