/**
 * WebBiz Toolkit - Spoiler frontend styles
 */

[class*="webbiz-spoiler--"] {
    display: inline;
    cursor: pointer;
    user-select: none;
    transition: all 0.3s ease;
}

.webbiz-spoiler--blur {
    background: #374151;
    color: transparent;
    padding: 1px 6px;
    border-radius: 3px;
    filter: blur(4px);
}

.webbiz-spoiler--blur:hover {
    filter: blur(2px);
}

.webbiz-spoiler--blur.webbiz-spoiler--revealed {
    color: #fff;
    filter: blur(0);
    user-select: auto;
    background: linear-gradient(135deg, #374151 0%, #4b5563 100%);
}

.webbiz-spoiler--blackout {
    background: #1f2937;
    color: #1f2937;
    padding: 2px 6px;
    border-radius: 3px;
}

.webbiz-spoiler--blackout:hover {
    background: #374151;
    color: #374151;
}

.webbiz-spoiler--blackout.webbiz-spoiler--revealed {
    color: #fff;
    user-select: auto;
    background: #1f2937;
}

.webbiz-spoiler--underline {
    color: transparent;
    text-decoration: underline;
    text-decoration-color: #dc2626;
    text-decoration-thickness: 2px;
    text-underline-offset: 2px;
    background: repeating-linear-gradient(
        90deg,
        #dc2626 0px,
        #dc2626 4px,
        transparent 4px,
        transparent 8px
    );
    background-size: 100% 2px;
    background-position: 0 100%;
    background-repeat: no-repeat;
}

.webbiz-spoiler--underline:hover {
    text-decoration-color: #ef4444;
}

.webbiz-spoiler--underline.webbiz-spoiler--revealed {
    color: inherit;
    user-select: auto;
    text-decoration: none;
    background: none;
}

[class*="webbiz-spoiler--"]:focus {
    outline: 2px solid #3b82f6;
    outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
    [class*="webbiz-spoiler--"] {
        transition: none !important;
        animation: none !important;
    }
}

@media print {
    [class*="webbiz-spoiler--"] {
        color: inherit !important;
        background: none !important;
        filter: none !important;
    }
}