---
const { tip = '' } = Astro.props
---
<span class="spoiler" title={tip}>
    <slot/>
</span>
<style>
    :global(.spoiler p) {
        background-color: #252525;
        color: #252525;
        transition: color 0.5s;
        width: fit-content;
    }

    :global(.spoiler:hover p) {
        color: #ffffff;
    }

    .spoiler {
        background-color: #252525;
        color: #252525;
        transition: color 0.5s;
        width: fit-content;
    }

    .spoiler:hover {
        color: #ffffff;
    }
    /* fix blockquotes */
    .spoiler blockquote {
        color: #252525;
        transition: color 0.5s;
    }

    .spoiler blockquote:hover {
        color: #ffffff;
    }
    /* fix code */
    .spoiler code pre {
        color: #252525;
        transition: color 0.5s;
    }

    .spoiler code pre:hover {
        color: #ffffff;
    }

    /* fix list bullet*/
    .spoiler li::marker {
        color: #252525;
        transition: color 0.5s;
    }

    .spoiler:hover li::marker {
        color: #ffffff;
    }
</style>