/* /home/siisi/vertex/gallery_app/static/css/story-bar.css */

/* =========================================
   story-bar.css - Core styles for story-bar pages
   ========================================= */

/* Horizontal scrollbar for story rings */
.story-rings-row {
    display: flex;
    flex-wrap: nowrap;
    /* prevent wrapping */
    gap: 1rem;
    /* same as Bootstrap gap-3 */
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: thin;
    scrollbar-color: #43DC80 rgba(0, 0, 0, 0.05);
    padding-bottom: 10px;
    /* space for horizontal scrollbar */
    /* Remove any white-space: nowrap - not needed with flex */
}

/* WebKit scrollbar styling */
.story-rings-row::-webkit-scrollbar {
    height: 6px;
}

.story-rings-row::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.05);
    border-radius: 10px;
}

.story-rings-row::-webkit-scrollbar-thumb {
    background: #43DC80;
    border-radius: 10px;
}

.story-rings-row::-webkit-scrollbar-thumb:hover {
    background: #3ac571;
}