div.container {
    background: var(--bg-surface);
    width: 100%;
    height: auto;
    overflow-x: auto;
    overflow-y: hidden;
    white-space: nowrap;
    border-top: 1px solid var(--border);
    padding: 0.5rem 0;
}

div.container section {
    display: inline-block !important;
    margin: 0 2px;
    vertical-align: top;
}

div.container div.item {
    display: inline-block;
    border: 2px solid transparent;
    border-radius: 4px;
    padding: 2px;
    cursor: pointer;
    background: var(--bg-primary);
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    user-select: none;
    touch-action: manipulation;
}

div.container div.item img {
    display: block;
    height: 75px;
    border-radius: 3px;
}

div.container div.item.selected {
    outline: 2px solid var(--accent);
    outline-offset: -2px;
    border-radius: 4px;
}

div.container div.item:hover {
    outline: 2px solid var(--warning);
    outline-offset: -2px;
    border-radius: 4px;
}

div.container div.item.current {
    outline: 2px solid var(--success);
    outline-offset: -2px;
    border-radius: 4px;
}

div.container div.item.current.selected {
    outline: 2px solid var(--accent);
    outline-offset: -2px;
    box-shadow: 0 0 0 4px var(--success);
    border-radius: 4px;
}

/* Custom scrollbar */
div.container::-webkit-scrollbar {
    height: 8px;
}

div.container::-webkit-scrollbar-track {
    background: var(--bg-primary);
}

div.container::-webkit-scrollbar-thumb {
    background: var(--border);
    border-radius: 4px;
}

div.container::-webkit-scrollbar-thumb:hover {
    background: var(--text-secondary);
}