/**
 * CSS para o componente DataListComponent
 * @version 3.0
 */

/* A lista de opções suspensa, com estilo refinado */
.data-list-options {
    display: none;
    position: absolute;
    z-index: 1001; /* Z-index alto para ficar sobre outros elementos */
    background: white;
    border: 1px solid #ced4da;
    border-radius: 0.25rem;
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
    max-height: 250px;
    overflow-y: auto;
}

/* Cada item individual na lista */
.data-list-option {
    cursor: pointer;
    padding: 10px 12px;
    display: flex;
    align-items: center;
    gap: 10px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    /* border-bottom: 1px solid #f0f0f0; */
}

/* Ícones dentro das opções */
.data-list-option i {
    flex-shrink: 0; /* Impede que o ícone seja esmagado */
    color: #adb5bd; /* Cor cinza sutil */
    transition: color 0.2s ease-in-out;
}

/* Texto dentro das opções */
.data-list-option div,
.data-list-option span {
    flex-grow: 1;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Efeito ao passar o mouse sobre uma opção */
.data-list-option:hover {
    background-color: #f8f9fa;
}

/* Efeito de cor no ícone ao passar o mouse */
.data-list-option:hover i {
    color: #e63946; /* Vermelho para destaque */
}

/* Último item sem borda inferior */
.data-list-option:last-child {
    border-bottom: none;
}

/* Classe para esconder opções durante a pesquisa */
.data-list-option.is-hidden {
    display: none;
}