@use '../../colors';
@use '../../breakpoints';

.bz-scrolling-wrapper {
    overflow-x: auto;
    overflow: -moz-scrollbars-vertical; 
    overflow-y: hidden;
    white-space: nowrap;
    flex-wrap: nowrap;
    padding-bottom: 32px;

    .bz-card-collab {
        min-width: 362px;
        box-sizing: border-box;
    }
}


.bz-scrolling-container {
    .bz-scrolling-wrapper {
        overflow-x: hidden;
    }
}
/* Fake Scrollbar Styling */
.bz-fake-scrollbar {
    position: absolute;
    left: 50%;
    width: 1440px;
    max-width: 88%;
    height: 10px;
    background: colors.$pink-20;
    border-radius: 75px;
    transform: translateX(-50%);
  }
  
.bz-fake-scrollbar-thumb {
    width: 50px; /* Initial width of the thumb */
    height: 100%;

    border-radius: 100px;
    background: colors.$pink-100;
    cursor: pointer;
}

/* Horizontal scroll ----------------- */
::-webkit-scrollbar {
border-radius: 75px;
height: 10px;
width: 15px;
border: 1px solid #d5d5d5;
margin-left: 20px;
margin-right: 20px;
}

::-webkit-scrollbar-track {
border-radius: 100px;
background: colors.$pink-20;
border-radius: 100px;
}

::-webkit-scrollbar-thumb {
border-radius: 100px;
background: colors.$pink-100;
}

@media (max-width: breakpoints.$mobile) {
    .bz-scrolling-wrapper {
        .bz-card-collab {
            min-width: 235px;
        }
    }
}