/* Customization of the scrollbar for WebKit browsers (Chrome, Safari) */
.history-list-container::-webkit-scrollbar {
    width: 8px;
    /* Scrollbar width */
}

.history-list-container::-webkit-scrollbar-track {
    background: transparent;
    /* Scrollbar track background */
}

.history-list-container::-webkit-scrollbar-thumb {
    background-color: rgba(255, 255, 255, 0.2);
    /* Scrollbar thumb color */
    border-radius: 4px;
    /* Thumb border radius */
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.history-list-container::-webkit-scrollbar-thumb:hover {
    background-color: rgba(255, 255, 255, 0.3);
    /* Scrollbar thumb color on hover */
}

/* Customization of the scrollbar for Firefox-based browsers */
.history-list-container {
    scrollbar-width: thin;
    /* Set scrollbar width to "thin" */
    scrollbar-color: rgba(255, 255, 255, 0.2) transparent;
    /* Thumb and track color */
}

/* Hiding the default smooth-scrollbar scrollbar */
.history-list-container .scrollbar-track {
    display: none !important;
}

/* Styles and animations for history list items */
#history-list li {
    background: rgba(255, 255, 255, 0.1);
    border-radius: 10px;
    padding: 10px 15px;
    margin-bottom: 10px;
    transition: all 0.35s ease-in-out;
    opacity: 0;
    transform: scale(0.7);
}

#history-list li.item-focus,
#history-list li.item-next {
    opacity: 1;
    transform: scale(1);
}

#history-list li.item-hide {
    opacity: 0;
    transform: scale(0.7);
}