@layer components {

    product-images-container {

        & .product-image-button {
            display: contents;
            border: none;
            padding: 0;
            margin: 0;
            background: transparent;
            cursor: pointer;
        }

        :is(footer) {
            display: flex;
            justify-content: center;
            gap: var(--border-size-1);
        }

        & pikle-compare {
            margin: 0;
            padding: var(--size-3) 0 0 0;

            .pikle-toggle-compare-button {
                height: 100%;
                display: flex;
                flex-direction: column;
                justify-content: center;
                align-items: center;
                gap: var(--size-1);
                padding: 0 var(--size-1) !important;
                outline: var(--border-size-1) solid var(--color-border-grey);
                min-height: 55px;

                & .check {
                    margin: 0;
                }
            }
        }

        :is(dialog) {
            padding: 0;

            width: 90dvw;
            height: 800px;
            max-width: min(1200px, 90%);

            @media screen and (max-width: 768px) {
                margin-top: var(--size-8);
            }

            & .product-images-list {
                padding: 0;
                margin: 0;
                width: 100%;
                height: 100%;

                overflow-x: scroll;
                scroll-snap-type: inline mandatory;
                overscroll-behavior-inline: contain;

                display: flex;
                align-items: center;

                :is(picture, img, missing-image) {
                    width: 100%;
                    max-width: 100%;
                    height: 100%;
                    max-height: min(800px, 100%);
                    object-fit: contain;
                }
            }

            .image-wrapper {
                flex: 1 0 100%;
                display: grid;
                height: 100%;
                place-content: center;
                place-items: center;
                overflow: hidden;

                scroll-snap-align: center;
            }
        }
    }
}