/**
 * LEX Tooltip System - CSS Only
 * Lightweight, pure CSS tooltip component
 * No JavaScript required!
 * 
 * Usage - Plain Text:
 * <span class="lex-tooltip">
 *     Label Text
 *     <span class="dashicons dashicons-editor-help"></span>
 *     <span class="lex-tooltip__text">Your tooltip text here</span>
 * </span>
 * 
 * Usage - HTML Content:
 * <span class="lex-tooltip">
 *     Label Text
 *     <span class="dashicons dashicons-editor-help"></span>
 *     <span class="lex-tooltip__text">
 *         <strong>Bold text</strong> and more...
 *     </span>
 * </span>
 * 
 * Positioning:
 * Tooltips always appear on top (above the trigger element)
 * 
 * Defaults:
 * - Font size: 12px (small, clean default)
 * - Width: 300px max
 * - Theme: Soft Dark
 */

/* ============================================
   CSS VARIABLES
   ============================================ */
:root {
    --lex-tooltip-bg: var(--wp-color-gray-80);
    --lex-tooltip-color: var(--wp-color-gray-0);
    --lex-tooltip-link-color: var(--wp-color-blue-20);
    --lex-tooltip-link-hover-color: var(--wp-color-blue-30);
    --lex-tooltip-code-bg: color-mix(in srgb, var(--wp-color-white) 10%, transparent);
    --lex-tooltip-shadow: 0 4px 16px color-mix(in srgb, var(--wp-color-black) 20%, transparent);
    --lex-tooltip-shadow-raised: 0 6px 20px color-mix(in srgb, var(--wp-color-black) 20%, transparent);
    --lex-tooltip-shadow-raised-strong: 0 6px 20px color-mix(in srgb, var(--wp-color-black) 25%, transparent);
    --lex-tooltip-shadow-raised-gray: 0 6px 20px color-mix(in srgb, var(--wp-color-black) 24%, transparent);
    --lex-tooltip-max-width: 300px;
    --lex-tooltip-padding: var(--lex-space-3) var(--lex-space-4);
    --lex-tooltip-border-radius: var(--lex-radius-md);
    --lex-tooltip-spacing: var(--lex-space-2);
    --lex-tooltip-arrow-size: calc(var(--lex-space-3) / 2);
    --lex-tooltip-compact-width: 200px;
    --lex-tooltip-wide-width: 400px;
    --lex-tooltip-extra-wide-width: 500px;
}

/* ============================================
   TOOLTIP TRIGGER
   ============================================ */
.lex-tooltip {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: var(--lex-space-1);
    cursor: help;
    z-index: 9999;
    vertical-align: middle;
}

/* Ensure labels containing tooltips can overflow */
label {
    overflow: visible;
}

label .lex-tooltip {
    position: relative;
}

.lex-tooltip > .dashicons {
    font-size: var(--lex-font-size-lg);
    width: var(--lex-space-4);
    height: var(--lex-space-4);
    color: var(--lex-color-text-subtle);
    transition: color var(--lex-transition-base);
    flex-shrink: 0;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
}

.lex-tooltip:hover > .dashicons,
.lex-tooltip:focus > .dashicons {
    color: var(--lex-color-primary);
}

.lex-tooltip:focus {
    outline: 2px solid var(--lex-color-primary-light);
    outline-offset: calc(var(--lex-space-1) / 2);
    border-radius: calc(var(--lex-space-1) / 2);
}

/* ============================================
   TOOLTIP TEXT
   ============================================ */
.lex-tooltip__text {
    visibility: hidden;
    opacity: 0;
    position: absolute;
    z-index: 9999;
    width: var(--lex-tooltip-max-width);
    background-color: var(--lex-tooltip-bg);
    color: var(--lex-tooltip-color);
    text-align: left;
    padding: var(--lex-tooltip-padding);
    border-radius: var(--lex-tooltip-border-radius);
    font-size: var(--lex-font-size-xs);
    line-height: 1.5;
    font-weight: var(--lex-font-weight-normal);
    box-shadow: var(--lex-tooltip-shadow);
    transition: opacity var(--lex-transition-base), visibility var(--lex-transition-base), transform var(--lex-transition-base);
    pointer-events: none;
    white-space: normal;
    word-wrap: break-word;
}

/* Show tooltip on hover */
.lex-tooltip:hover .lex-tooltip__text,
.lex-tooltip:focus .lex-tooltip__text {
    visibility: visible;
    opacity: 1;
}

/* ============================================
   TOOLTIP ARROW
   ============================================ */
.lex-tooltip__text::after {
    content: "";
    position: absolute;
    border-style: solid;
}

/* ============================================
   POSITIONING - TOP (Always)
   ============================================ */
.lex-tooltip .lex-tooltip__text {
    bottom: calc(100% + var(--lex-tooltip-spacing));
    left: 50%;
    transform: translateX(-50%) translateY(var(--lex-space-1));
}

.lex-tooltip:hover .lex-tooltip__text,
.lex-tooltip:focus .lex-tooltip__text {
    transform: translateX(-50%) translateY(0);
}

/* Arrow on bottom (pointing down) */
.lex-tooltip .lex-tooltip__text::after {
    top: 100%;
    left: 50%;
    margin-left: calc(var(--lex-tooltip-arrow-size) * -1);
    border-width: var(--lex-tooltip-arrow-size) var(--lex-tooltip-arrow-size) 0 var(--lex-tooltip-arrow-size);
    border-color: var(--lex-tooltip-bg) transparent transparent transparent;
}

/* ============================================
   THEME VARIATIONS
   ============================================ */

/* Soft Gray - Light & Gentle */
.lex-tooltip--soft-gray .lex-tooltip__text {
    --lex-tooltip-bg: var(--wp-color-gray-70);
    --lex-tooltip-color: var(--wp-color-gray-0);
    box-shadow: var(--lex-tooltip-shadow-raised);
}

/* Soft Gradient - Subtle Two-Tone */
.lex-tooltip--soft-gradient .lex-tooltip__text {
    background: linear-gradient(135deg, var(--wp-color-gray-80) 0%, var(--wp-color-gray-70) 100%);
    --lex-tooltip-color: var(--wp-color-gray-0);
    box-shadow: var(--lex-tooltip-shadow-raised-strong);
}

.lex-tooltip--soft-gradient .lex-tooltip__text::after {
    border-top-color: var(--wp-color-gray-80);
}

/* Charcoal Dark - Professional & Subtle */
.lex-tooltip--charcoal .lex-tooltip__text {
    --lex-tooltip-bg: var(--wp-color-gray-80);
    --lex-tooltip-color: var(--wp-color-gray-0);
    box-shadow: var(--lex-tooltip-shadow-raised);
}

/* Soft Dark Theme - Warm & Gentle */
.lex-tooltip--soft .lex-tooltip__text {
    --lex-tooltip-bg: var(--wp-color-gray-80);
    --lex-tooltip-color: var(--wp-color-gray-0);
    box-shadow: var(--lex-tooltip-shadow-raised-strong);
}

/* Gray - Neutral & Balanced */
.lex-tooltip--gray .lex-tooltip__text {
    --lex-tooltip-bg: var(--wp-color-gray-70);
    --lex-tooltip-color: var(--wp-color-gray-0);
    box-shadow: var(--lex-tooltip-shadow-raised-gray);
}

/* ============================================
   SIZE VARIATIONS
   ============================================ */

/* Compact - For short hints and brief text */
.lex-tooltip--compact .lex-tooltip__text {
    width: var(--lex-tooltip-compact-width);
}

/* Wide - For detailed explanations */
.lex-tooltip--wide .lex-tooltip__text {
    width: var(--lex-tooltip-wide-width);
}

/* Extra Wide - For very detailed content */
.lex-tooltip--xl .lex-tooltip__text {
    width: var(--lex-tooltip-extra-wide-width);
}

/* No Wrap - Single line, no wrapping (naturally sizes) */
.lex-tooltip--nowrap .lex-tooltip__text {
    white-space: nowrap;
    max-width: none;
    width: auto;
}

/* Auto - Removes constraints, content determines size */
.lex-tooltip--auto .lex-tooltip__text {
    max-width: none;
    width: max-content;
}

/* ============================================
   FONT SIZE VARIATIONS
   ============================================ */

/* Small (Default) - Base font size is 12px */

/* Medium - Slightly larger for better readability */
.lex-tooltip--md .lex-tooltip__text {
    font-size: var(--lex-font-size-md);
}

/* ============================================
   HTML CONTENT STYLING
   ============================================ */
.lex-tooltip__text strong {
    font-weight: var(--lex-font-weight-semibold);
    color: inherit;
}

.lex-tooltip__text em {
    font-style: italic;
    color: var(--lex-tooltip-link-color);
}

.lex-tooltip__text a {
    color: var(--lex-tooltip-link-color);
    text-decoration: underline;
}

.lex-tooltip__text a:hover {
    color: var(--lex-tooltip-link-hover-color);
}

.lex-tooltip__text ul,
.lex-tooltip__text ol {
    margin-block: var(--lex-space-2);
    padding-inline-start: var(--lex-space-5);
}

.lex-tooltip__text li {
    margin-block-end: var(--lex-space-1);
}

.lex-tooltip__text code {
    background: var(--lex-tooltip-code-bg);
    padding: calc(var(--lex-space-1) / 2) calc(var(--lex-space-3) / 2);
    border-radius: var(--lex-radius-xs);
    font-family: 'Monaco', 'Courier New', monospace;
    font-size: var(--lex-font-size-xs);
}

.lex-tooltip__text br {
    line-height: 1.8;
}

/* ============================================
   RESPONSIVE
   ============================================ */
@media screen and (max-width: 782px) {
    .lex-tooltip__text {
        max-width: 250px;
        font-size: var(--lex-font-size-xs);
        padding: var(--lex-space-2) var(--lex-space-3);
    }
    
    /* On mobile, position to prevent overflow */
    .lex-tooltip .lex-tooltip__text {
        left: auto;
        right: 0;
        transform: translateX(0) translateY(var(--lex-space-1));
    }
    
    .lex-tooltip:hover .lex-tooltip__text {
        transform: translateX(0) translateY(0);
    }
}

/* ============================================
   ACCESSIBILITY
   ============================================ */

/* Ensure tooltips work with keyboard */
.lex-tooltip {
    -webkit-user-select: none;
    user-select: none;
}

/* Screen reader only text */
.lex-tooltip--sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border-width: 0;
}

/* ============================================
   UTILITY CLASSES
   ============================================ */

/* Center-aligned text */
.lex-tooltip--center .lex-tooltip__text {
    text-align: center;
}

/* Right-aligned text */
.lex-tooltip--align-right .lex-tooltip__text {
    text-align: right;
}

/* Below - opens downward instead of upward */
.lex-tooltip--below .lex-tooltip__text {
    bottom: auto;
    top: calc(100% + var(--lex-tooltip-spacing));
    transform: translateX(-50%) translateY(calc(var(--lex-space-1) * -1));
}

.lex-tooltip--below:hover .lex-tooltip__text,
.lex-tooltip--below:focus .lex-tooltip__text {
    transform: translateX(-50%) translateY(0);
}

.lex-tooltip--below .lex-tooltip__text::after {
    top: auto;
    bottom: 100%;
    border-width: 0 var(--lex-tooltip-arrow-size) var(--lex-tooltip-arrow-size) var(--lex-tooltip-arrow-size);
    border-color: transparent transparent var(--lex-tooltip-bg) transparent;
}
