$carousel-gap: var(--o3-spacing-2xs);
$carousel-gap--wide: var(--o3-spacing-s);
@import '../../CarouselCard/client/main.scss';

.cp-carousel__wrapper {
    padding-bottom: var(--o3-spacing-2xl, 64px);
    .cp-carousel__title {
        margin: 0 0 var(--o3-spacing-4xs);
    }
    .cp-carousel__standfirst {
        margin: 0 0 var(--o3-spacing-xs);
    }
    .cp-carousel__container {
        overflow: hidden;
        // negative margins to balance out the article's margins.
        // this allows cards to be flush with the edge of the viewport
        @include oGridRespondTo($until: M) {
            margin-right: calc(var(--o3-spacing-2xs) * -1);
            margin-left: calc(var(--o3-spacing-2xs) * -1);
        }
        .cp-carousel__cards {
            @include oGridRespondTo($until: M) {
                padding-right: var(--o3-spacing-2xs);
                padding-left: var(--o3-spacing-2xs);
                box-sizing: border-box;
            }
            padding: 0;
            margin: 0 0 var(--o3-spacing-xs);
            display: flex;
            flex-direction: row;
            align-items: stretch;
            gap: $carousel-gap;
            width: 100vw; // pre iOS 16
            width: 100dvw;
            touch-action: pan-y pinch-zoom;
            // larger gap between cards on L upwards
            @include oGridRespondTo($from: L) {
                gap: $carousel-gap--wide;
                width: unset;
            }
            scrollbar-gutter: stable;
            @media (prefers-reduced-motion: no-preference) {
                scroll-behavior: smooth;
            }
        }    
    }
    .cp-carousel__progress{
        display: grid;
        grid-template-columns: repeat(5, 1fr);
        grid-template-rows: repeat(1, 1fr);
        gap: 0px;

        .cp-carousel__progress__buttons {
            display: none;
            grid-column-start: 5;
            @include oGridRespondTo($from: M) {
                display: flex;
                justify-content: flex-end;
                gap: var(--o3-spacing-2xs, 8px);

                .o3-button {
                    color: var(--o3-color-palette-black);
                    border-radius: 2px;
                    border: 1px solid var(--o3-button-primary-standard-border, rgba(255, 255, 255, 0.00));
                    background: var(--o3-color-palette-black-5);
                }
                .o3-button:disabled {
                    opacity: 0.3;
                    cursor: not-allowed;
                }
            }
        }

        .cp-carousel__progress__indicator {
            grid-column-start: 3;
            display: flex;
            gap: 8px;
            height: 8px;
            align-items: center;
            width: 72px;
            overflow: hidden;
            flex-wrap: nowrap;
            margin: 19px auto;
        }

        .cp-carousel__progress__indicator-item {
            width: 6px;
            height: 6px;
            border-radius: 3px;
            background: var(--o3-color-palette-black-40, #999189);
            flex: 0 0 6px;
            transform: scale(1);
            transition: 
                flex-basis 350ms,
                width 350ms,
                height 350ms,
                background-color 350ms,
                transform 350ms;
            &:last-child {
                margin-right: 10px;
            }
        }

        .cp-carousel__progress__indicator-item--selected {
            width: 16px;
            border-radius: 3px;
            background: var(--o3-color-palette-black-60, #66605C);
            flex-basis: 16px;
            opacity: 1;
            transform: scale(1);
        }

        .cp-carousel__progress__indicator-item--small {
            width: 4px;
            height: 4px;
            aspect-ratio: 1/1;
            border-radius: 3px;
            flex-basis: 4px;
            background: var(--o3-color-palette-black-40, #999189);
            transform: scale(0.66);
        }
    }
}