/**
 * Tooltip Component
 * Info tooltips for method help
 */

@use '../variables' as *;

// =============================================================================
// Info Wrapper (tooltip trigger)
// =============================================================================

.mpr-info-wrapper {
    display: inline-flex;
    align-items: center;
    position: relative;
    cursor: help;
    vertical-align: middle;
    margin-left: 0.25rem;

    .material-icons {
        font-size: 16px !important;
        color: $es-text-muted;
        transition: color 0.15s ease;
    }

    &:hover .material-icons {
        color: $es-primary;
    }
}

// =============================================================================
// Fixed Tooltip (appended to body on hover)
// =============================================================================

.mpr-tooltip-fixed {
    position: fixed;
    background: $es-white;
    color: $es-slate-800;
    padding: $es-spacing-md $es-spacing-lg;
    border-radius: $es-radius-md;
    font-size: 13px;
    line-height: 1.5;
    white-space: normal;
    z-index: 10500;
    max-width: 320px;
    min-width: 180px;
    text-align: left;
    box-shadow: rgba(0, 0, 0, 0.12) 0px 1px 1px 0px,
                rgba(64, 68, 82, 0.16) 0px 0px 0px 1px,
                rgba(64, 68, 82, 0.08) 0px 2px 5px 0px;
    pointer-events: none;

    // Pinned tooltip allows interaction
    &.pinned {
        pointer-events: auto;
        padding-right: $es-spacing-xl + 1rem;
    }

    strong {
        display: block;
        margin-bottom: 0.375rem;
        font-weight: $es-font-weight-semibold;
        color: $es-primary;
    }

    p {
        margin: 0;
        color: $es-text-secondary;
    }

    ul {
        margin: 0.5rem 0 0;
        padding-left: 1.25rem;

        li {
            margin: 0.25rem 0;
            color: $es-text-secondary;
        }
    }
}

// Close button for pinned tooltips
.mpr-tooltip-close {
    position: absolute;
    top: 0.375rem;
    right: 0.375rem;
    padding: 0.125rem;
    border: none;
    background: transparent;
    cursor: pointer;
    border-radius: $es-radius-sm;
    line-height: 1;
    transition: background-color 0.15s ease;

    .material-icons {
        font-size: 16px !important;
        color: $es-text-muted;
    }

    &:hover {
        background: $es-slate-100;

        .material-icons {
            color: $es-slate-700;
        }
    }
}
