// ============================================================================
// 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%);
}

/// Base tooltip container
/// @group Tooltip
@mixin tooltip {
    display: inline-block;
    overflow: visible;
    position: relative;

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

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

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

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

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

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

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

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

// ============================================================================
// Dynamic Tooltip Element Styles
// ============================================================================
// These styles support tooltip elements dynamically created by the
// JavaScript Tooltip component. The trigger element uses `.tooltip` class
// and the tooltip popup element uses `.tooltip__popup` class.

/// Base styles for dynamically created tooltip popup elements
/// @group Tooltip
@mixin tooltip__popup {
    position: fixed;
    z-index: 10000;
    background-color: var(--color_fill_primary);
    color: var(--color_text_primary);
    border: q(1) solid var(--color_line_primary);
    padding: q(4) q(8);
    border-radius: $tooltip_unit;
    @include font--size("03");
    white-space: nowrap;
    pointer-events: none;
    opacity: 0;
    visibility: hidden;
    transition:
        opacity 0.2s ease,
        visibility 0.2s ease;
    box-shadow: 0 q(2) q(8) rgba(0, 0, 0, 0.15);
}

/// Visible state for tooltip popup
/// @group Tooltip
@mixin tooltip__popup--visible {
    opacity: 1;
    visibility: visible;
}

/// Position variants for tooltip popups
/// @group Tooltip
@mixin tooltip__popup--top {
    transform: translateX(-50%) translateY(-100%);
    margin-top: -q(8);
}

@mixin tooltip__popup--bottom {
    transform: translateX(-50%);
    margin-top: q(8);
}

@mixin tooltip__popup--left {
    transform: translateX(-100%) translateY(-50%);
    margin-left: -q(8);
}

@mixin tooltip__popup--right {
    transform: translateY(-50%);
    margin-left: q(8);
}

// ============================================================================
// Tooltip Theme Variants
// ============================================================================

/// Tooltip with hover background color theme
/// Uses the state hover color for background and matching arrow
/// @group Tooltip
@mixin tooltip--themed-hover {
    &::before {
        background-color: var(--color_state_hover);
        border-color: var(--color_state_hover);
        border-radius: 0;
    }
}

/// Tooltip right arrow with hover theme
/// @group Tooltip
@mixin tooltip__arrow--right-themed {
    border-color: transparent var(--color_state_hover) transparent transparent;
}

/// Tooltip with accent color theme
/// @group Tooltip
@mixin tooltip--themed-accent {
    &::before {
        background-color: var(--color_accent_primary);
        border-color: var(--color_accent_primary);
        color: var(--color_fill_primary);
    }
}

/// Tooltip with dark theme
/// @group Tooltip
@mixin tooltip--themed-dark {
    &::before {
        background-color: var(--color_text_primary);
        border-color: var(--color_text_primary);
        color: var(--color_fill_primary);
    }
}