/**
 * Definitions/Glossary Plugin Styles
 * Styles for automatically generated <abbr> tags from glossary terms
 */

abbr.glossary-term {
    --tooltip-back-color:   var(--theme-color-2);
    --tooltip-text-color:   var(--color-mono-9);
    --tooltip-border-color: var(--theme-color-3);

    /* Visual styling */
    text-decoration-line: underline;
    text-decoration-style: dashed;
    text-decoration-thickness: 1px;
    text-decoration-color: color-mix(in srgb, currentColor, transparent 70%);
    text-underline-offset: 4px;
    cursor: help;

    /* Smooth transitions */
    transition: all 0.2s ease;

    /* Hover state */
    &:hover {
        text-decoration-style: solid;
        text-decoration-color: currentColor;
        text-decoration-thickness: 2px;
    }

    /* Required for custom tooltip positioning */
    &[data-tooltip] {
        position: relative;
    }

    /* Custom tooltip - the tooltip box */
    &[data-tooltip]::before {
        content: attr(data-tooltip);
        position: absolute;
        top: 100%;
        left: 50%;
        transform: translateX(-50%);
        margin-top: 1rem;
        padding: 0.5rem 0.7rem 0.5rem 2.2rem;

        background: var(--tooltip-back-color);
        color: var(--tooltip-text-color);
        font-size: 0.9rem;
        font-weight: normal;
        line-height: 1.4;
        border: 1px solid var(--tooltip-border-color);
        border-radius: var(--border-radius);
        box-shadow: var(--box-shadow-small);

        /* Text wrapping */
        max-width: 25ch;
        width: max-content;
        white-space: normal;
        text-align: left;

        /* Hidden by default */
        opacity: 0;
        visibility: hidden;
        transition: opacity 0.2s, visibility 0.2s;

        /* Prevent interaction */
        pointer-events: none;
        z-index: 1000;

        /* Lucide info icon - inline SVG */
        background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="%23e0e0e0" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><path d="M12 16v-4"/><path d="M12 8h.01"/></svg>');
        background-repeat: no-repeat;
        background-position: 0.5rem 0.7rem;
        background-size: 1.2rem 1.2rem;
    }

    /* Show custom tooltip on hover */
    &[data-tooltip]:hover::before,
    &[data-tooltip]:hover::after {
        opacity: 1;
        visibility: visible;
    }

    /* Accessibility - ensure good contrast */
    &:focus {
        outline: 2px solid var(--theme-color);
        outline-offset: 2px;
        border-radius: 2px;
    }
}

/* Print styles - show definition inline */
@media print {
    abbr.glossary-term::after {
        content: " (" attr(data-tooltip) ")";
        font-size: 0.9em;
        font-style: italic;
        color: var(--color-mono-5);
    }
}