/* SCROLLER */

.scrollRow {
    position: relative;

    --container-width-xs: 100%;
    --container-width-sm: var(--container-width-xs);
    --container-width-md: var(--container-width-sm);
    --container-width-lg: var(--container-width-md);
    --container-width-xl: var(--container-width-lg);
    --container-width-xxl: var(--container-width-xl);
    --container-width: var(--container-width-xs);

    --container-width-bootstrap-xs: calc(100% - 1.5rem);
    --container-width-bootstrap-sm: 516px;
    --container-width-bootstrap-md: 696px;
    --container-width-bootstrap-lg: 936px;
    --container-width-bootstrap-xl: 1116px;
    --container-width-bootstrap-xxl: 1296px;
    --container-width-bootstrap: var(--container-width-bootstrap-xs);

    --container-padding-xs: calc((100% - var(--container-width)) /2);
    --container-padding-sm: var(--container-padding-xs);
    --container-padding-md: var(--container-padding-sm);
    --container-padding-lg: var(--container-padding-md);
    --container-padding-xl: var(--container-padding-lg);
    --container-padding-xxl: var(--container-padding-xl);
    --container-padding: var(--container-padding-xs);

    --gap-xs: 0.5em;
    --gap-sm: var(--gap-xs);
    --gap-md: var(--gap-sm);
    --gap-lg: var(--gap-md);
    --gap-xl: var(--gap-lg);
    --gap-xxl: var(--gap-xl);
    --gap: var(--gap-xs);

    --peak-colour: #141414;
    --peak-opacity: 0.66;
    --peak-opacity-hover: 0.5;

    --peak-disabled-opacity: 0;

    --arrow-width-xs: 2rem;
    --arrow-width-sm: var(--arrow-width-xs);
    --arrow-width-md: var(--arrow-width-sm);
    --arrow-width-lg: var(--arrow-width-md);
    --arrow-width-xl: var(--arrow-width-lg);
    --arrow-width-xxl: var(--arrow-width-xl);
    --arrow-width: var(--arrow-width-xs);

    --button-colour: #444;
    --button-colour-hover: #444;
    --arrow-colour: #fff;
    --arrow-colour-hover: #f2cc01;
    --arrow-border: #666;
    --arrow-border-hover: #666;
    --button-disabled-opacity: 0.5;
    --buttons-sticky-offset: 110px;

    --align-xs: center;
    --align-sm: start;
    --align-md: var(--align-sm);
    --align-lg: var(--align-md);
    --align-xl: var(--align-lg);
    --align-xxl: var(--align-xl);
    --align: var(--align-xs);

    --items-xs: 1.2;
    --items-sm: var(--items-xs);
    --items-md: var(--items-sm);
    --items-lg: var(--items-md);
    --items-xl: var(--items-lg);
    --items-xxl: var(--items-xl);
    --items: var(--items-xs);

    --sum-gap: calc(((var(--items) - 1)) * var(--gap));
    --sum-padding: calc((2 * var(--container-padding)));
    --item-width: calc((var(--container-width) - var(--sum-gap)) / var(--items));
}

/* Hide scrollbars */
.scrollRow_inner { 
    scrollbar-width: none;
    -ms-overflow-style: none; 
}
.scrollRow_inner::-webkit-scrollbar { display: none; }
.scrollRow_inner::-webkit-scrollbar-button { display: none; }

/* Styles */

.scrollRow {
    display: grid;
}

.scrollRow.scrollRow-bootstrap {
    --container-width: var(--container-width-bootstrap);
}

@media (min-width: 576px) {
    .scrollRow {
        --container-width-bootstrap: var(--container-width-bootstrap-sm);
        --container-width: var(--container-width-sm);
        --container-padding: var(--container-padding-sm);
        --items: var(--items-sm);
        --align: var(--align-sm);
    }
    .scrollRow.scrollRow-bootstrap-sm {
        --container-width: var(--container-width-bootstrap);
    }
}

@media (min-width: 768px) {
    .scrollRow {
        --container-width: var(--container-width-md);
        --container-width-bootstrap: var(--container-width-bootstrap-md);
        --container-padding: var(--container-padding-md);
        --items: var(--items-md);
        --align: var(--align-md);
    }
    .scrollRow.scrollRow-bootstrap-md {
        --container-width: var(--container-width-bootstrap);
    }
}

@media (min-width: 992px) {
    .scrollRow {
        --container-width: var(--container-width-lg);
        --container-width-bootstrap: var(--container-width-bootstrap-lg);
        --container-padding: var(--container-padding-lg);
        --items: var(--items-lg);
        --align: var(--align-lg);
    }
    .scrollRow.scrollRow-bootstrap-lg {
        --container-width: var(--container-width-bootstrap);
    }
}

@media (min-width: 1200px) {
    .scrollRow {
        --container-width: var(--container-width-xl);
        --container-width-bootstrap: var(--container-width-bootstrap-xl);
        --container-padding: var(--container-padding-xl);
        --items: var(--items-xl);
        --align: var(--align-xl);
    }
    .scrollRow.scrollRow-bootstrap-xl {
        --container-width: var(--container-width-bootstrap);
    }
}

@media (min-width: 1400px) {
    .scrollRow {
        --container-width: var(--container-width-xxl);
        --container-width-bootstrap: var(--container-width-bootstrap-xxl);
        --container-padding: var(--container-padding-xxl);
        --items: var(--items-xxl);
        --align: var(--align-xxl);
    }
    .scrollRow.scrollRow-bootstrap-xxl {
        --container-width: var(--container-width-bootstrap);
    }
}

/* Styles */

.scrollRow_inner {
    width: 100%;
    margin: 0;
    padding: 0 var(--container-padding);

    display: flex;
    flex-wrap: nowrap;
    gap: var(--gap);

    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    scroll-snap-align: var(--align);
    scroll-padding-left: var(--container-padding);
}

.scrollRow_col {
    width: var(--item-width);
    max-width: var(--item-width);
    min-width: var(--item-width);
    flex: var(--item-width);
    scroll-snap-align: var(--align);
    z-index: 1;
}

.scrollRow_peak {
    position: absolute;
    top: 0;
    bottom: 0;
    width: var(--container-padding);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2;
    transition: all 0.2s ease-in-out;
    opacity: 1;
    cursor: pointer;
}

.scrollRow_peak-right {
    right: 0;
    left: auto;
}

.scrollRow_peak_background {
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    background: var(--peak-colour);
    opacity: var(--peak-opacity);
    z-index: 3;
    transition: opacity 0.2s ease-in-out;
}

.scrollRow_peak:hover .scrollRow_peak_background {
    opacity: var(--peak-opacity-hover);
}

.scrollRow_controller_button {
    width: var(--arrow-width);
    aspect-ratio: 1 / 1;
    border-radius: 50%;
    border: none;
    z-index: 4;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--button-colour);
    color: var(--arrow-colour);
    border: 1px solid var(--arrow-border);
}

scrollRow_peak .scrollRow_controller_button {
    width: 80%;
}

.scrollRow_controller_button:hover {
    background: var(--button-colour-hover);
    color: var(--arrow-colour-hover);
    border-color: var(--arrow-border-hover);
}

button.scrollRow_controller_button > svg {
    width: 75%;
    height: 100%;
}

.scrollRow_peak-left svg.bi-chevron-left {
    padding-right: 10%;
}

.scrollRow_peak-left svg.bi-chevron-right {
    padding-left: 10%;
}

.scrollRow_peak_background {
    background: var(--peak-colour);
}

.scrollRow_peak-left .scrollRow_peak_backgroundGradient {
    background: linear-gradient(90deg, var(--peak-colour), transparent);
}

.scrollRow_peak-right .scrollRow_peak_backgroundGradient {
    background: linear-gradient(90deg, transparent, var(--peak-colour));
}

/* Peak disabled styles */

.scrollRow .scrollRow_peak[data-scrollrow-controller-state="disabled"] {
    opacity: var(--peak-disabled-opacity);
    cursor: default;
}

.scrollRow_peak[data-scrollrow-controller-state="disabled"] .scrollRow_controller_button {
    opacity: 0;
}


/* Hide peak on mobile */

@media (max-width: 769px) {
    .scrollRow_peak {
        display: none;
    }
}


/* Header */

.scrollRow_inner {
    order: 1;
}

.scrollRow_buttons {
    order: 2;
}

.scrollRow_header,
.scrollRow_buttons
{
    display: flex;
    gap: 0.5rem;
    padding: 0 var(--container-padding);
    justify-content: end;
    align-items: center;
}

.scrollRow_stickyButtons .scrollRow_buttons {
    position: sticky;
    bottom: 0.75rem;
    z-index: 2;
}

.scrollRow_buttons.scrollRow_buttons_hideIfNoScroll
{
    display: none;
}

.scrollRow_buttons.scrollRow_buttons_hideIfNoScroll:has([data-scrollrow-controller-state="enabled"])
{
    display: flex;
}

.scrollRow_header [data-scrollrow-controller-state="disabled"] .scrollRow_controller_button,
.scrollRow_buttons [data-scrollrow-controller-state="disabled"] .scrollRow_controller_button
{
    opacity: var(--button-disabled-opacity);
}