@use "sass:map";
@use "./tooltip.config" as config;
@use "../../01-core/external" as *;

@mixin ss-tooltip {
    position: absolute;
    z-index: map.get(config.$ss-tooltip-config, z-index);

    max-width: map.get(config.$ss-tooltip-config, max-width);
    padding: map.get(config.$ss-tooltip-config, padding);

    background: map.get(config.$ss-tooltip-config, bg);
    color: map.get(config.$ss-tooltip-config, fg);
    border-radius: map.get(config.$ss-tooltip-config, radius);

    font-size: map.get(config.$ss-tooltip-config, font-size);
    line-height: 1.4;
    white-space: normal;
    pointer-events: none;
}

// ----------------------------------------------------------------------------
// Legacy wrapper API (ported from dev `body_atoms/display/_tooltip.scss`)
// ----------------------------------------------------------------------------
//
// Old markup contract: the class sits on a *wrapper* around the trigger and
// the tip text lives in a `tooltip-data` attribute —
//   <div class="ss-c-tooltip ss-c-tooltip--right" tooltip-data="Portal Home">
//       <button …>…</button>
//   </div>
// The wrapper itself must stay a transparent inline box; the bubble/arrow are
// pseudo-elements shown on hover. (Without this, the bubble styling of the
// modern `data-placement` API paints the wrapper as a permanent black block.)

$_wrapper-unit: map.get(config.$ss-tooltip-config, wrapper-unit);

@mixin ss-tooltip-wrapper {
    // Neutralize the bubble styling from `ss-tooltip`.
    position: relative;
    display: inline-block;
    overflow: visible;
    z-index: auto;
    max-width: none;
    padding: 0;
    background: transparent;
    color: inherit;
    border-radius: 0;
    font-size: inherit;
    line-height: inherit;
    pointer-events: auto;

    // Bubble
    &::before {
        content: attr(tooltip-data);
        position: absolute;
        z-index: map.get(config.$ss-tooltip-config, z-index);
        display: block;
        width: max-content;
        padding: $_wrapper-unit;
        background-color: map.get(config.$ss-tooltip-config, wrapper-bg);
        border: q(1) solid map.get(config.$ss-tooltip-config, wrapper-border-color);
        border-radius: $_wrapper-unit;
        color: map.get(config.$ss-tooltip-config, wrapper-fg);
        font-size: map.get(config.$ss-tooltip-config, wrapper-font-size);
        line-height: 1;
        text-align: center;
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        transition: map.get(config.$ss-tooltip-config, wrapper-transition);
    }

    // Arrow
    &::after {
        content: "";
        position: absolute;
        z-index: map.get(config.$ss-tooltip-config, z-index);
        border: $_wrapper-unit solid transparent;
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        transition: map.get(config.$ss-tooltip-config, wrapper-transition);
    }

    &:hover::before,
    &:hover::after,
    &:focus-within::before,
    &:focus-within::after {
        opacity: 1;
        visibility: visible;
    }
}

@mixin ss-tooltip-wrapper-right {
    &::before {
        top: 50%;
        transform: translateY(-50%);
        left: calc(100% + #{$_wrapper-unit} * 2 - #{q(1)});
    }
    &::after {
        top: 50%;
        left: 100%;
        margin-top: -$_wrapper-unit;
        border-color: transparent
            map.get(config.$ss-tooltip-config, wrapper-border-color) transparent
            transparent;
    }
}

@mixin ss-tooltip-wrapper-left {
    &::before {
        top: 50%;
        transform: translateY(-50%);
        right: calc(100% + #{$_wrapper-unit} * 2 - #{q(1)});
    }
    &::after {
        top: 50%;
        right: 100%;
        margin-top: -$_wrapper-unit;
        border-color: transparent transparent transparent
            map.get(config.$ss-tooltip-config, wrapper-border-color);
    }
}

@mixin ss-tooltip-wrapper-top {
    // Arrow base sits on the trigger's top edge (100%, not a percentage of
    // the trigger height — tall triggers made 80% float mid-box); the bubble
    // clears the arrow's height (2 × unit).
    &::before {
        left: 50%;
        transform: translateX(-50%);
        bottom: calc(100% + #{$_wrapper-unit} * 2);
    }
    &::after {
        bottom: 100%;
        left: 50%;
        margin-left: -$_wrapper-unit;
        border-color: map.get(config.$ss-tooltip-config, wrapper-border-color)
            transparent transparent transparent;
    }
}

@mixin ss-tooltip-wrapper-bottom {
    &::before {
        left: 50%;
        transform: translateX(-50%);
        top: calc(100% + #{$_wrapper-unit} * 2);
    }
    &::after {
        top: 100%;
        left: 50%;
        margin-left: -$_wrapper-unit;
        border-color: transparent transparent
            map.get(config.$ss-tooltip-config, wrapper-border-color) transparent;
    }
}