/* ============================================
   RSL Tooltip Component
   Version: 1.0.0
   Description: Accessible tooltip component with smart positioning
   ============================================ */

/* ============================================
   BASE TOOLTIP STYLES
   ============================================ */

.rsl-tooltip {
    position: absolute;
    z-index: 10000;
    max-width: 250px;
    padding: 0.5rem 0.75rem;
    font-size: 0.875rem;
    line-height: 1.4;
    color: #ffffff;
    background-color: #333333;
    border-radius: 6px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.2s ease, transform 0.2s ease;
    word-wrap: break-word;
}

/* Visible state */
.rsl-tooltip.visible {
    opacity: 1;
}

/* ============================================
   TOOLTIP ARROW
   ============================================ */

.rsl-tooltip::before {
    content: '';
    position: absolute;
    width: 0;
    height: 0;
    border: 6px solid transparent;
}

/* ============================================
   POSITIONING VARIANTS
   ============================================ */

/* Top Position */
.rsl-tooltip[data-position="top"] {
    transform: translateY(-8px);
}

.rsl-tooltip[data-position="top"].visible {
    transform: translateY(0);
}

.rsl-tooltip[data-position="top"]::before {
    bottom: -12px;
    left: 50%;
    transform: translateX(-50%);
    border-top-color: #333333;
}

/* Bottom Position */
.rsl-tooltip[data-position="bottom"] {
    transform: translateY(8px);
}

.rsl-tooltip[data-position="bottom"].visible {
    transform: translateY(0);
}

.rsl-tooltip[data-position="bottom"]::before {
    top: -12px;
    left: 50%;
    transform: translateX(-50%);
    border-bottom-color: #333333;
}

/* Left Position */
.rsl-tooltip[data-position="left"] {
    transform: translateX(-8px);
}

.rsl-tooltip[data-position="left"].visible {
    transform: translateX(0);
}

.rsl-tooltip[data-position="left"]::before {
    right: -12px;
    top: 50%;
    transform: translateY(-50%);
    border-left-color: #333333;
}

/* Right Position */
.rsl-tooltip[data-position="right"] {
    transform: translateX(8px);
}

.rsl-tooltip[data-position="right"].visible {
    transform: translateX(0);
}

.rsl-tooltip[data-position="right"]::before {
    left: -12px;
    top: 50%;
    transform: translateY(-50%);
    border-right-color: #333333;
}

/* ============================================
   TOOLTIP VARIANTS
   ============================================ */

/* Light Variant */
.rsl-tooltip-light {
    color: #333333;
    background-color: #ffffff;
    border: 1px solid #e0e0e0;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.rsl-tooltip-light[data-position="top"]::before {
    border-top-color: #ffffff;
    filter: drop-shadow(0 2px 1px rgba(0, 0, 0, 0.05));
}

.rsl-tooltip-light[data-position="bottom"]::before {
    border-bottom-color: #ffffff;
    filter: drop-shadow(0 -2px 1px rgba(0, 0, 0, 0.05));
}

.rsl-tooltip-light[data-position="left"]::before {
    border-left-color: #ffffff;
    filter: drop-shadow(2px 0 1px rgba(0, 0, 0, 0.05));
}

.rsl-tooltip-light[data-position="right"]::before {
    border-right-color: #ffffff;
    filter: drop-shadow(-2px 0 1px rgba(0, 0, 0, 0.05));
}

/* Primary Variant */
.rsl-tooltip-primary {
    background-color: #6E7BFF;
}

.rsl-tooltip-primary[data-position="top"]::before {
    border-top-color: #6E7BFF;
}

.rsl-tooltip-primary[data-position="bottom"]::before {
    border-bottom-color: #6E7BFF;
}

.rsl-tooltip-primary[data-position="left"]::before {
    border-left-color: #6E7BFF;
}

.rsl-tooltip-primary[data-position="right"]::before {
    border-right-color: #6E7BFF;
}

/* Success Variant */
.rsl-tooltip-success {
    background-color: #28a745;
}

.rsl-tooltip-success[data-position="top"]::before {
    border-top-color: #28a745;
}

.rsl-tooltip-success[data-position="bottom"]::before {
    border-bottom-color: #28a745;
}

.rsl-tooltip-success[data-position="left"]::before {
    border-left-color: #28a745;
}

.rsl-tooltip-success[data-position="right"]::before {
    border-right-color: #28a745;
}

/* Warning Variant */
.rsl-tooltip-warning {
    background-color: #ffc107;
    color: #333333;
}

.rsl-tooltip-warning[data-position="top"]::before {
    border-top-color: #ffc107;
}

.rsl-tooltip-warning[data-position="bottom"]::before {
    border-bottom-color: #ffc107;
}

.rsl-tooltip-warning[data-position="left"]::before {
    border-left-color: #ffc107;
}

.rsl-tooltip-warning[data-position="right"]::before {
    border-right-color: #ffc107;
}

/* Danger Variant */
.rsl-tooltip-danger {
    background-color: #dc3545;
}

.rsl-tooltip-danger[data-position="top"]::before {
    border-top-color: #dc3545;
}

.rsl-tooltip-danger[data-position="bottom"]::before {
    border-bottom-color: #dc3545;
}

.rsl-tooltip-danger[data-position="left"]::before {
    border-left-color: #dc3545;
}

.rsl-tooltip-danger[data-position="right"]::before {
    border-right-color: #dc3545;
}

/* ============================================
   SIZE VARIANTS
   ============================================ */

.rsl-tooltip-sm {
    max-width: 180px;
    padding: 0.375rem 0.625rem;
    font-size: 0.75rem;
}

.rsl-tooltip-lg {
    max-width: 350px;
    padding: 0.625rem 1rem;
    font-size: 0.9375rem;
}

/* ============================================
   TOOLTIP TRIGGER STATES
   ============================================ */

/* Add focus-visible styling to elements with tooltips */
[data-tooltip]:focus-visible {
    outline: 2px solid #6E7BFF;
    outline-offset: 2px;
}

/* ============================================
   DARK MODE SUPPORT
   ============================================ */

[data-theme="dark"] .rsl-tooltip:not(.rsl-tooltip-light):not(.rsl-tooltip-primary):not(.rsl-tooltip-success):not(.rsl-tooltip-warning):not(.rsl-tooltip-danger) {
    background-color: #1a1a1a;
    color: #f0f0f0;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
}

[data-theme="dark"] .rsl-tooltip:not(.rsl-tooltip-light):not(.rsl-tooltip-primary):not(.rsl-tooltip-success):not(.rsl-tooltip-warning):not(.rsl-tooltip-danger)[data-position="top"]::before {
    border-top-color: #1a1a1a;
}

[data-theme="dark"] .rsl-tooltip:not(.rsl-tooltip-light):not(.rsl-tooltip-primary):not(.rsl-tooltip-success):not(.rsl-tooltip-warning):not(.rsl-tooltip-danger)[data-position="bottom"]::before {
    border-bottom-color: #1a1a1a;
}

[data-theme="dark"] .rsl-tooltip:not(.rsl-tooltip-light):not(.rsl-tooltip-primary):not(.rsl-tooltip-success):not(.rsl-tooltip-warning):not(.rsl-tooltip-danger)[data-position="left"]::before {
    border-left-color: #1a1a1a;
}

[data-theme="dark"] .rsl-tooltip:not(.rsl-tooltip-light):not(.rsl-tooltip-primary):not(.rsl-tooltip-success):not(.rsl-tooltip-warning):not(.rsl-tooltip-danger)[data-position="right"]::before {
    border-right-color: #1a1a1a;
}

/* Dark mode light variant */
[data-theme="dark"] .rsl-tooltip-light {
    background-color: #2a2a2a;
    color: #f0f0f0;
    border-color: #444444;
}

[data-theme="dark"] .rsl-tooltip-light[data-position="top"]::before {
    border-top-color: #2a2a2a;
}

[data-theme="dark"] .rsl-tooltip-light[data-position="bottom"]::before {
    border-bottom-color: #2a2a2a;
}

[data-theme="dark"] .rsl-tooltip-light[data-position="left"]::before {
    border-left-color: #2a2a2a;
}

[data-theme="dark"] .rsl-tooltip-light[data-position="right"]::before {
    border-right-color: #2a2a2a;
}

/* Dark mode warning variant - ensure readable text */
[data-theme="dark"] .rsl-tooltip-warning {
    color: #000000;
}

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

/* Respect prefers-reduced-motion */
@media (prefers-reduced-motion: reduce) {
    .rsl-tooltip {
        transition: opacity 0.1s ease;
    }

    .rsl-tooltip[data-position="top"],
    .rsl-tooltip[data-position="bottom"],
    .rsl-tooltip[data-position="left"],
    .rsl-tooltip[data-position="right"] {
        transform: none;
    }

    .rsl-tooltip[data-position="top"].visible,
    .rsl-tooltip[data-position="bottom"].visible,
    .rsl-tooltip[data-position="left"].visible,
    .rsl-tooltip[data-position="right"].visible {
        transform: none;
    }
}

/* High contrast mode support */
@media (prefers-contrast: high) {
    .rsl-tooltip {
        border: 2px solid currentColor;
    }

    .rsl-tooltip-light {
        border: 2px solid #333333;
    }
}

/* ============================================
   RESPONSIVE ADJUSTMENTS
   ============================================ */

@media (max-width: 768px) {
    .rsl-tooltip {
        max-width: 200px;
        font-size: 0.8125rem;
    }

    .rsl-tooltip-lg {
        max-width: 280px;
    }
}

@media (max-width: 480px) {
    .rsl-tooltip {
        max-width: 160px;
    }

    .rsl-tooltip-lg {
        max-width: 220px;
    }
}