// ============================================================================
// Element | Tooltip
// ============================================================================
@use "../../dev" as *;
@use "../../variables" as *;

@use "../soul_type" as *;

// Tooltip General
// ----------------------------------------------------------------------------

$tooltip_transition: opacity 0.5s;
$tooltip_unit: q(6);

/// Base mixin for tooltip elements.
/// Sets up the basic properties for a tooltip, including positioning,
/// transition effects, and visibility.
/// @group Tooltip
@mixin tooltip--base {
    position: absolute;
    border-width: $tooltip_unit;
    // border-style: solid;
    transition: $tooltip_transition;
    position: absolute;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

// Tooltip Arrows
// ----------------------------------------------------------------------------

/// Base mixin for tooltip arrows.
/// Used as a base for creating directional arrows for tooltips.
/// @group Tooltip
@mixin tooltip__arrow {
    content: "";
    @include tooltip--base;
    border-style: solid;
}

/// Mixin for a right-pointing tooltip arrow.
/// @group Tooltip
@mixin tooltip__arrow--right {
    @include tooltip__arrow;
    top: 50%;
    left: 100%;
    margin-top: -$tooltip_unit;
    border-color: transparent var(--color_line_primary) transparent transparent;
}

/// Mixin for a left-pointing tooltip arrow.
/// @group Tooltip
@mixin tooltip__arrow--left {
    @include tooltip__arrow;
    top: 50%;
    right: 100%;
    margin-top: -$tooltip_unit;
    border-color: transparent transparent transparent var(--color_line_primary);
}

/// Mixin for a downward-pointing tooltip arrow.
/// @group Tooltip
@mixin tooltip__arrow--top {
    @include tooltip__arrow;
    bottom: 80%;
    left: 50%;
    margin-left: -$tooltip_unit;
    border-color: var(--color_line_primary) transparent transparent transparent;
}

/// Mixin for a upward-pointing tooltip arrow.
/// @group Tooltip
@mixin tooltip__arrow--bottom {
    @include tooltip__arrow;
    top: 80%;
    left: 50%;
    margin-left: -$tooltip_unit;
    border-color: transparent transparent var(--color_line_primary) transparent;
}

// Tooltip Boxes
// ----------------------------------------------------------------------------

/// Base mixin for tooltip boxes.
/// Sets up the basic properties and styles for a tooltip box, including
/// size, color, and text alignment.
/// @group Tooltip
@mixin tooltip--box {
    @include tooltip--base;
    @include font--size("03");
    content: attr(tooltip-data);
    background-color: var(--color_fill_primary);
    border: q(1) solid var(--color_line_primary);
    color: var(--color_text_primary);
    text-align: center;
    border-radius: $tooltip_unit;
    // padding: $tooltip_unit 0;
    padding: $tooltip_unit;
    line-height: 1;
    transition: $tooltip_transition;
    display: block;
    width: max-content;
}

/// Mixin for a horizontal-aligned tooltip box.
/// @group Tooltip
@mixin tooltip__box--right {
    @include tooltip--box;
    top: 50%;
    transform: translateY(-50%);
    left: calc(100% + ($tooltip_unit * 2) - q(1));
}

@mixin tooltip__box--left {
    @include tooltip--box;
    top: 50%;
    transform: translateY(-50%);
    right: calc(100% + ($tooltip_unit * 2) - q(1));
}

/// Mixin for a vertical-aligned tooltip box.
/// @group Tooltip
@mixin tooltip__box--top {
    @include tooltip--box;
    bottom: calc(80% + ($tooltip_unit * 2) - q(1));
    left: 50%;
    transform: translateX(-50%);
}

@mixin tooltip__box--bottom {
    @include tooltip--box;
    top: calc(80% + ($tooltip_unit * 2) - q(1));
    left: 50%;
    transform: translateX(-50%);
}

// .tooltip {
//   position: relative;
//   display: inline-block;
//   // display: unset;
//   // display: block;
//   // border-bottom: q(1) dotted black; /* If you want dots under the hoverable text */
//   // overflow: auto;
//   // position: absolute;
//   // z-index: 9998;
//   // pointer-events: none;
//   position: absolute;
//   overflow: visible;

//   position: relative;
//   // border-bottom: q(1) dotted var(--color_fill_primary);
// }

.tooltip {
    // position: relative;
    display: inline-block;
    // position: absolute;
    overflow: visible;
    position: relative;
}

/// Tooltip content styling before the tooltip appears.
/// @group Tooltip
.tooltip:before {
    // @include tooltip--box--right;
    // z-index: 9999;
    // margin-left: -q(60);
    // font-size: 0.70em;
    // top: -q(4);
    // left: 105%;
}

/// Tooltip arrow styling.
/// @group Tooltip
.tooltip:after {
    // @include tooltip__arrow--left;
}

/// Tooltip with content shown on top
.tooltip--top:before {
    @include tooltip__box--top;
}
.tooltip--top:after {
    @include tooltip__arrow--top;
}

/// Tooltip with content shown on bottom
.tooltip--bottom:before {
    @include tooltip__box--bottom;
}
.tooltip--bottom:after {
    @include tooltip__arrow--bottom;
}

/// Tooltip with content shown on left
.tooltip--left:before {
    @include tooltip__box--left;
}
.tooltip--left:after {
    @include tooltip__arrow--left;
}

/// Tooltip with content shown on right (DEFAULT)
.tooltip--right:before {
    @include tooltip__box--right;
}
.tooltip--right:after {
    @include tooltip__arrow--right;
}

/// Tooltip content and arrow visibility on hover.
/// @group Tooltip
.tooltip:hover:before,
.tooltip:hover:after {
    opacity: 1;
    visibility: visible;
    display: block;
    position: absolute;
    z-index: 9999;
    cursor: help;
}

/// Static tooltip that is always shown
/// @group Tooltip
.tooltip--static:before,
.tooltip--static:after {
    opacity: 1;
    visibility: visible;
    display: block;
    position: absolute;
    z-index: 9999;
    pointer-events: auto;
}