//
//  Common
//  _____________________________________________

& when (@media-common = true) {
    .catalog-product-view {
        .media {
            .secondary-title {
                .value {
                    font-weight: 700;
                    margin-bottom: 8px;
                    margin-top: 0;
                }
            }
            .overview {
                .value {
                    .lib-font-size(18);
                }
                .read-more-desc {
                    color: @djo-gray;
                    display: inline-block;
                    font-weight: 700;
                    position: relative;
                    top: -2px;
                    span {
                        display: inline-block;
                        vertical-align: middle;
                    }
                    &::after {
                        content: url('../images/read-more-arrow.svg');
                        display: inline-block;
                        margin-left: 8px;
                        position: relative;
                        top: 2px;
                        vertical-align: middle;
                    }
                    &.is-read-less {
                        &::after {
                            top: -4px;
                            -webkit-transform: rotate(180deg);
                                    transform: rotate(180deg);
                        }
                    }
                }
            }
        }
        .gallery-placeholder .loader img {
            position: absolute !important;
        }
        // fixes the next arrow and close icon's position when the product image is full screen
        .fotorama--fullscreen .fotorama__stage {
            max-width: none !important;
        }
        .fotorama__thumb-border {
            border-color: @djo-blue;
        }
        .fotorama__dot {
            border-radius: 11px;
            height: 11px;
            top: 8px;
            width: 11px;
        }
        .fotorama__active .fotorama__dot {
            background-color: @djo-blue;
            border-color: @djo-blue;
        }
        .fotorama__nav {
            text-align: center;
        }
        // removes the weird asteroid-looking spinner as the product image is loading
        .fotorama__wrap--css3 .fotorama__spinner {
            -webkit-animation: none;
                    animation: none;
        }
    }
}


//
//  Mobile
//  _____________________________________________

.media-width(@extremum, @break) when (@extremum = 'max') and (@break = @screen__s) {
    .catalog-product-view {
        .media {
            .page-title {
                .lib-font-size(28);
                margin-bottom: 8px;
                margin-top: 24px;
            }
            .secondary-title {
                .value {
                    .lib-font-size(18);
                }
            }
            .overview {
                margin-bottom: 12px;
                .read-more {
                    .lib-font-size(14);
                }
            }
            .gallery-placeholder {
                margin-bottom: 12px;
            }
        }
    }
}

.media-width(@extremum, @break) when (@extremum = 'max') and (@break = @screen__m) {
    .catalog-product-view {
        .product.media {
            text-align: center;
        }
        .fotorama__stage {
            max-width: none !important;
        }
    }
}


//
//  Desktop
//  _____________________________________________

.media-width(@extremum, @break) when (@extremum = 'min') and (@break = @screen__s) {
    .catalog-product-view {
        .media {
            .page-title {
                .lib-font-size(36);
                margin-bottom: 5px;
            }
            .secondary-title {
                .value {
                    .lib-font-size(21);
                }
            }
            .overview {
                margin-bottom: 20px;
                .read-more {
                    .lib-font-size(16);
                }
            }
        }
    }
}

.media-width(@extremum, @break) when (@extremum = 'min') and (@break = @screen__m) {
    .catalog-product-view {
        .media {
            margin-bottom: 0;
            .gallery-placeholder{
                    .fotorama__dot {
                    height:18px;
                    width: 18px;
                }
                .fotorama__nav--dots.fotorama__nav__frame {
                    width: 40px;
                }
                .fotorama__nav-wrap.fotorama__nav-wrap--horizontal{
                    margin-bottom: 5%;
                }
            }
        }
    }
}

.media-width(@extremum, @break) when (@extremum = 'min') and (@break = @screen__l) {
    .catalog-product-view {
        .media {
            .page-title {
                .lib-font-size(40);
            }
            .secondary-title {
                .value {
                    .lib-font-size(21);
                }
            }
        }
    }
}