/**
 * @name Better Transparent Gif, Emoji, Sticker Picker
 * @author AcheronX.
 * @description More Compact and clean look
 * @source https://github.com/acheronx0577/Better-Transparent-Gif-Emoji-Sticker-Picker/blob/main/Better-Transparent-Gif-Emoji-Sticker-Picker.css
 * @version 0.0.1
 * @website https://github.com/acheronx0577
 */

/* 🌟 Main emoji picker container */
[class*="-contentWrapper"] {
    border-radius: 12px !important;
    overflow: hidden !important;
    left: -28px;
    top: 17px;
    background-color: transparent !important;
}

/* 🎛️ Collapsible server headers */
div[class*="-header"][class*="-interactive"] {
    background-color: rgba(7, 7, 7, 0.15) !important;
    border-radius: 10px !important;
    margin-right: 13px;
    padding: 2px !important;
    transition: background-color 0.2s ease-in-out !important;
}

/* 🎨 Transparent header wrappers */
div[class*="-wrapper"][class*="-header"] {
    background: transparent !important;
    border-radius: 8px !important;
    overflow: hidden !important;
}

/* ✨ Header hover effect */
div[class*="-header"][class*="-interactive"]:hover {
    background: rgba(255, 255, 255, 0.05) !important;
}

/* 🗂️ Category/pack headers */
div[class*="-wrapper"][class*="-packHeader"] {
    background: transparent !important;
    border-radius: 8px !important;
}


/* ↔️ Sidebar resize handle */
._084343c4f11eaaab-resizeHandle {
    left: -30px !important;
}

/* 🧩 Child container rounding */
._91a9d7f7e5248a56-childContainer {
    border-radius: 10px;
    overflow: hidden;
}

/* 🎯 Clip child container on hover */
._91a9d7f7e5248a56-childContainer:hover {
    clip-path: inset(0 0 0 7.7px round 10px);
    transition: clip-path 0.2s ease;
}

/* 📋 Menu container styling */
div[class*="-menu"][role="menu"] {
    border: 1px solid var(--background-modifier-accent);
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
}

/* 🔽 Search bar header clipping */
._8ef02eea17068b73-header {
    clip-path: inset(0 0 4px 0px);
}