/**
 * @name Better Compact Command Menu With Smooth Transition
 * @author AcheronX.
 * @description More Compact and clean look with smooth transition
 * @source https://github.com/acheronx0577/Better-Compact-Command-Menu-With-Smooth-Transition/edit/main/Better%20Compact%20Command%20Menu%20With%20Smooth%20Transition.css
 * @version 0.0.2
 * @website https://github.com/acheronx0577
 */

:root {
    /* Container Settings */
    --menu-max-height: 400px;
    --menu-max-width: 450px;
    --menu-border-radius: 6px;
    --menu-padding: 4px;
    --menu-spacing: 4px;
    
    /* Frosted Glass Background */
    --glass-bg-color: rgba(26, 21, 21, 0.904);
    --glass-blur: 12px;
    --glass-saturation: 160%;
    --glass-border: 1px solid rgba(255, 255, 255, 0.1);
    --glass-shadow: 
        0 8px 32px rgba(0, 0, 0, 0.3),
        0 0 0 1px rgba(255, 255, 255, 0.05);
    
    /* Item States */
    --item-bg: rgba(255, 255, 255, 0.03);
    --item-border-radius: 4px;
    --item-transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    
    /* Hover State */
    --hover-bg: rgba(255, 100, 100, 0.2);
    --hover-border: 1px solid rgba(255, 150, 150, 0.3);
    --hover-shadow: 0 2px 8px rgba(255, 50, 50, 0.15);
    --hover-transform: translateX(2px);
    --hover-brightness: 1.15;
    
    /* Selected/Active State */
    --selected-bg: rgba(255, 80, 80, 0.3);
    --selected-border-left: 3px solid rgba(255, 100, 100, 0.8);
    --selected-shadow: inset 0 0 10px rgba(255, 50, 50, 0.2);
    
    /* Category Headers */
    --category-bg: transparent;
    
    /* Scrollbar/Spacing */
    --scrollbar-padding: 0 6px;
}

/* Make the entire autocomplete/slash command menu more compact with frosted glass */
.autocompleteInner__13533.autocompleteInner__6b0e0, 
.autocomplete__13533.outerWrapper_d1405b {
    max-height: var(--menu-max-height) !important;
    max-width: var(--menu-max-width) !important;
    border-radius: var(--menu-border-radius) !important;
    padding: var(--menu-padding) !important;
    
    /* Frosted glass effect */
    background: var(--glass-bg-color) !important;
    backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturation)) !important;
    -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturation)) !important;
    border: var(--glass-border) !important;
    box-shadow: var(--glass-shadow) !important;
}

/* Just add spacing between items */
.autocompleteRowVertical__13533 {
    margin: var(--menu-spacing) 0 !important;
}

/* Make category headers transparent */
.wrapper__14245.categoryHeader_d1405b {
    background: var(--category-bg) !important;
    border: none !important;
    box-shadow: none !important;
}

/* Make header background transparent */
.header__14245 {
    background: var(--category-bg) !important;
}

/* Smooth hover for items inside your red frosted glass */
.autocompleteRowVertical__13533 {
    background: var(--item-bg) !important;
    transition: var(--item-transition) !important;
    border-radius: var(--item-border-radius) !important;
    border: 1px solid transparent !important;
}

.autocompleteRowVertical__13533:hover {
    background: var(--hover-bg) !important;
    backdrop-filter: brightness(var(--hover-brightness)) !important;
    border: var(--hover-border) !important;
    transform: var(--hover-transform) !important;
    box-shadow: var(--hover-shadow) !important;
}

/* Selected item - brighter red */
.autocompleteRowVertical__13533[aria-selected="true"] {
    background: var(--selected-bg) !important;
    border-left: var(--selected-border-left) !important;
    box-shadow: var(--selected-shadow) !important;
}

.scroller__6b0e0 {
    padding: var(--scrollbar-padding) !important;
}

/* Make the inner container transparent on hover */
.autocompleteRow__13533:hover .base__13533 {
    background-color: transparent !important;
}

.autocomplete__13533.autocomplete__6b0e0.autocompleteAttached__6b0e0 {
    max-height: var(--menu-max-height) !important;
    max-width: var(--menu-max-width) !important;
}