.root {
    composes: lg_gap-sm from global;
    composes: grid from global;
    composes: grid-cols-auto from global;
    composes: grid-rows-auto from global;
    grid-template-areas:
        'main'
        'thumbs';
}

@media screen(lg) {
    .root {
        grid-template-areas: 'thumbs main';
        /* These values are mirrored in JS for image sizes. Keep them in sync. */
        grid-template-columns: 17fr 80fr;
    }
}

.carouselContainer {
    composes: grid from global;
    grid-area: main;
    grid-template-columns: repeat(3, 1fr);
}

.imageContainer {
    grid-area: 1 / 1 / 2 / 4;
}

.currentImage {
    composes: block from global;
    composes: h-full from global;
    composes: object-center from global;
    composes: object-contain from global;
    composes: w-full from global;

    composes: lg_object-top from global;
}

.currentImage_placeholder {
    composes: currentImage;

    composes: bg-subtle from global;
}

.previousButton,
.nextButton {
    composes: flex from global;
    composes: outline-none from global;
    composes: z-foreground from global;

    composes: lg_hidden from global;
}

.previousButton {
    composes: justify-start from global;
    composes: ml-sm from global;
    grid-area: 1 / 1 / 2 / 2;
}

.nextButton {
    composes: justify-end from global;
    composes: mr-sm from global;
    grid-area: 1 / 3 / 2 / 4;
}

.chevron {
    composes: root from '../Icon/icon.module.css';

    composes: border-2 from global;
    composes: border-solid from global;
    composes: border-transparent from global;
    composes: self-center from global;
}

.nextButton:focus > .chevron,
.previousButton:focus > .chevron {
    box-shadow: 0 0 4px 2px rgb(var(--venia-global-color-teal));
    @apply rounded-lg;
}

.thumbnailList {
    composes: content-stretch from global;
    composes: gap-xs from global;
    composes: grid from global;
    composes: grid-cols-carouselThumbnailList from global;
    composes: grid-flow-col from global;
    composes: justify-center from global;
    composes: mt-xs from global;
    composes: z-foreground from global;

    composes: lg_content-start from global;
    composes: lg_gap-sm from global;
    composes: lg_grid-cols-[1fr] from global;
    composes: lg_grid-flow-row from global;
    composes: lg_mt-0 from global;
}