/* Control */

.css-icon-picker-toggle {
    cursor:             pointer;
    background-color:   #464646;
    color:              white;
    transition:         background-color 0.1s;
}

/*
.css-icon-picker-toggle:hover {
    background-color:  #e0e0e0;
    color: #464646;
}
*/

.css-icon-picker-toggle .css-icon-picker-current-icon {
    transition:         0.2s;
}

/* Menú */

.css-icon-picker-menu {
    display:            none;
    z-index:            9999;
    position:           absolute;
    width:              330px;
    max-height:         350px;
    
    overflow:           hidden;

    border-radius:      0px;
    
    background:         rgba(255, 255, 255, 0.97);
    
    box-shadow:         0 8px 25px rgba(0,0,0,0.50);

    /* Efecto de desenfoque moderno */
    backdrop-filter:            blur(6px);
    -webkit-backdrop-filter:    blur(6px);
    animation:                  fadeSlide 0.2s ease-out;
}

/* Animación */
@keyframes fadeSlide {
    from { opacity: 0; transform: translateY(-8px); }
    to   { opacity: 1; transform: translateY(0); }
}

.css-icon-picker-menu .css-icon-picker-iconSearch {
    width:              100%;
    border:             none;
    padding:            12px;
    font-size:          15px;
    outline:            none;
    border-bottom:      1px solid #ddd;
    background-color: #cac9c9;
}

.css-icon-picker-menu .css-icon-picker-list-wrapper {
    height:             290px;
    overflow-y:         scroll;
    padding:            10px;

    /* Opcional: Estilos para la barra de scroll (solo para webkit) */
    scrollbar-width:    thin;
    scrollbar-color:    #ccc transparent;
}

.css-icon-picker-menu .css-icon-picker-list-wrapper .css-icon-picker-item {
    font-size:          22px;
    padding:            10px;
    margin:             5px;
    cursor:             pointer;
    border-radius:      8px;
    transition:         0.15s;
}

.css-icon-picker-menu .css-icon-picker-list-wrapper .css-icon-picker-item:hover {
    background:       #464646;
    color:          white;
}