/*
Image gallery element
====================================================
Defines the styles for the image gallery element that shows thumbnails of the product pictures in a slim slider element.

It is displayed on the product detail page.
*/

.image--gallery {
    .image-slider--container {
        .unitize(bottom, 90);
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: auto;
        margin: 0;
    }

    &.no--thumbnails .image-slider--container {
        bottom: 0;
    }

    .image-slider--item {
        display: inline-block;
        height: 100%;
        width: 100%;
        position: relative;
        text-align: center;
        cursor: default;

        .image--element {
            display: block;
            max-width: 100%;
            height: auto;
            width: auto;
        }

        .image--media, img {
            position: absolute;
            top: 0;
            bottom: 0;
            left: 0;
            right: 0;
            margin: auto;
        }
    }

    .image-slider--thumbnails {
        .unitize-padding(10, 0);
        .unitize(height, 90);
        background: #fff;
        top: auto;
        bottom: 0;
        width: 100%;
        margin: 0;
        position: absolute;
        display: block;

        .thumbnails--arrow {
            .unitize(top, 10);

            &.is--left {
                border-left: 0 none;
            }

            &.is--right {
                border-right: 0 none;
            }
        }
    }

    .image-slider--thumbnails-slide {
        .unitize-margin(0, 10);
        left: auto;
        top: auto;
    }

    .thumbnail--link {
        .unitize-margin(0, 10, 0, 0);
        display: inline-block;
    }

    .button--zoom-in,
    .button--zoom-out,
    .button--zoom-reset {
        .unitize(top, 10);
        .unitize(left, 10);
        .unitize(font-size, 20);
        .unitize-padding(2, 6);
        position: absolute;

        &:hover {
            z-index: @zindex-image-gallery-button;
        }
    }

    .button--zoom-out {
        .border-radius-multi(3px, 0, 0, 3px);
    }

    .button--zoom-reset {
        .unitize(left, 43);
        border-radius: 0;
    }

    .button--zoom-in {
        .border-radius-multi(0, 3px, 3px, 0);
        .unitize(left, 76);
    }
}

.image-gallery--modal {
    .modal--close {
        .unitize(top, 10);
        .unitize(width, 34);
        .unitize(height, 34);
        .unitize(line-height, 32);
    }
}

@media screen and(min-width: @desktopViewportWidth) {
    .js--image-gallery {
        width: 80%;
        height: 80%;
    }
}