/*------------------------------------*\
    #PRODUCT-MEDIA
\*------------------------------------*/

$product-media-alt-images-max-width:  120px !default;
$product-media-primary-image-max-width:  472px !default;
$product-media-primary-image-ratio: $product-image-ratio !default;
$product-media-alt-image-selected-outline-color:  $highlight-color !default;


.product-media {
    @include respond-to($medium-breakpoint) {
        display: flex;
    }
}

    .product-media__alt-images {
        @extend %list-reset;

        @include respond-to($medium-breakpoint) {
            display: inline-block;
            margin-right: $spacing-unit * 2;
            padding-top: $spacing-unit * 2;
            max-width: $product-media-alt-images-max-width;
            vertical-align: top;
        }
    }

        .product-media__alt-image {
            text-align: center;

            @include respond-to($medium-breakpoint) {
                margin-bottom: $spacing-unit;
            }
        }

            .product-media__alt-image-link {
                display: inline-block;
            }

            .product-media__alt-image-link--selected {
                cursor: default;
                outline: 1px solid $product-media-alt-image-selected-outline-color;
            }

    /**
     * 1. provides positioning context for loading indicator
     * 2. Styles for pages with multiple product images
     */
    .product-media__primary-image {
        position: relative; /* [1] */
        margin: 0 auto;
        max-width: $product-media-primary-image-max-width;

        @include respond-to($medium-breakpoint) {
            display: inline-block;
        }

        .product-media__alt-images + & { /* [2] */
            display: none;

            @include respond-to($medium-breakpoint) {
                display: inline-block;
                margin: 0;
            }
        }
    }

        .product-media__primary-image-link {
            display: block;
            padding: 0 0 ((1 / $product-media-primary-image-ratio) * 100%);
            height: 0;
            vertical-align: top;
        }

            .product-media__primary-image-link-image {}