//
//  Common
//  _____________________________________________

& when (@media-common = true) {
    .cms-block-video-slider {
        .video-slider {
            .video-slide {
                .video-placeholder-container {
                    font-size: 0;
                    position: relative;
                    .video-placeholder-container-inner {
                        display: inline-block;
                        position: relative;
                    }
                    .video-placeholder {
                        cursor: pointer;
                    }
                    .play-video {
                        color: #fff;
                        cursor: pointer;
                        font-style: italic;
                        left: 50%;
                        position: absolute;
                        text-transform: uppercase;
                        top: 50%;
                        -webkit-transform: translate(-50%, -50%);
                                transform: translate(-50%, -50%);
                        &::before {
                            content: url('../images/play-button.svg');
                            display: inline-block;
                            fill: #fff;
                            position: relative;
                            vertical-align: middle;
                        }
                    }
                    &.is-playing-video {
                        .video-placeholder-container-inner {
                            display: block;
                            height: 0;
                            padding-bottom: 56.25%;
                            position: relative;
                            .video-placeholder {
                                height: 100%;
                                left: 0;
                                position: absolute;
                                top: 0;
                                width: 100%;
                            }
                            .play-video {
                                display: none;
                            }
                        }
                    }
                }
                .video-text-container {
                    .video-counter {
                        color: @djo-blue;
                        display: block;
                    }
                    .video-heading {
                        font-weight: 900;
                        margin-top: 0;
                    }
                    .video-cta {
                        .lib-button-primary();
                        .lib-link-as-button();
                    }
                    *:last-child {
                        margin-bottom: 0;
                    }
                }
            }
        }
        .video-thumbnail-slider-heading {
            letter-spacing: .03em;
            margin-bottom: 18px;
            margin-top: 0;
        }
        .video-thumbnail-slider {
            .video-thumbnail-slide {
                .video-thumbnail-placeholder-container {
                    font-size: 0;
                }
                .video-thumbnail-counter {
                    .lib-font-size(18);
                    display: block;
                }
                .video-thumbnail-heading {
                    margin-top: 0;
                }
                .video-thumbnail-description {
                    display: none;
                }
                .video-thumbnail-cta {
                    display: none;
                }
            }
            .slider-arrow {
                top: 33.33%;
                -webkit-transform: translateY(-33.33%);
                        transform: translateY(-33.33%);
                width: 24px;
            }
        }
    }
}


//
//  Mobile
//  _____________________________________________

.media-width(@extremum, @break) when (@extremum = 'max') and (@break = @screen__s) {
    .cms-block-video-slider {
        .video-slider {
            .video-slide {
                display: inline-block;
                .video-placeholder-container {
                    margin-bottom: 10px;
                    margin-left: auto;
                    margin-right: auto;
                    max-width: 90%;
                    .play-video {
                        .lib-font-size(22);
                        &::before {
                            height: 25px;
                            margin-right: 6px;
                            top: -2px;
                            width: 25px;
                        }
                    }
                }
                .video-text-container {
                    background-color: #f8f8f8;
                    margin-top: -50px;
                    padding: 50px 15px 30px;
                    .video-counter {
                        .lib-font-size(18);
                        margin-bottom: 2px;
                    }
                    .video-heading {
                        .lib-font-size(20);
                        margin-bottom: 14px;
                    }
                    .video-description {
                        .lib-font-size(14);
                        margin-bottom: 36px;
                    }
                    .video-cta {
                        width: 226px;
                    }
                }
            }
        }
        .video-thumbnail-slider-heading {
            display: none;
        }
        .video-thumbnail-slider {
            .video-thumbnail-slide {
                margin-left: 3px;
                margin-right: 3px;
                .video-thumbnail-heading {
                    .lib-font-size(14);
                }
                &.slick-current {
                    color: @djo-blue;
                    .video-thumbnail-placeholder-container {
                        position: relative;
                        &::before {
                            background-color: @djo-blue;
                            content: '';
                            display: inline-block;
                            height: 100%;
                            left: 0;
                            position: absolute;
                            top: 0;
                            width: 8px;
                        }
                    }
                }
            }
        }
    }
}


//
//  Desktop
//  _____________________________________________

.media-width(@extremum, @break) when (@extremum = 'min') and (@break = @screen__s) {
    .cms-block-video-slider {
        .video-slider {
            margin-bottom: 20px;
            .video-slide {
                display: inline-block;
                .video-placeholder-container {
                    margin-bottom: 10px;
                    margin-left: auto;
                    margin-right: auto;
                    max-width: 90%;
                    .video-placeholder-container-inner {
                        width: 100%;
                    }
                    .video-placeholder {
                        width: 100%;
                    }
                    .play-video {
                        .lib-font-size(22);
                        &::before {
                            height: 25px;
                            margin-right: 6px;
                            top: -2px;
                            width: 25px;
                        }
                    }
                }
                .video-text-container {
                    background-color: #f8f8f8;
                    margin-top: -50px;
                    padding: 75px 75px 35px;
                    .video-counter {
                        .lib-font-size(18);
                        margin-bottom: 2px;
                    }
                    .video-heading {
                        .lib-font-size(20);
                        margin-bottom: 14px;
                    }
                    .video-description {
                        .lib-font-size(14);
                        margin-bottom: 36px;
                    }
                    .video-cta {
                        width: 226px;
                    }
                }
            }
        }
        .video-thumbnail-slider-heading {
            display: none;
        }
        .video-thumbnail-slider {
            .video-thumbnail-slide {
                margin-left: 3px;
                margin-right: 3px;
                .video-thumbnail-heading {
                    .lib-font-size(14);
                }
                &.slick-current {
                    color: @djo-blue;
                    .video-thumbnail-placeholder-container {
                        position: relative;
                        &::before {
                            background-color: @djo-blue;
                            content: '';
                            display: inline-block;
                            height: 100%;
                            left: 0;
                            position: absolute;
                            top: 0;
                            width: 8px;
                        }
                    }
                }
            }
        }
    }
}

.media-width(@extremum, @break) when (@extremum = 'min') and (@break = @screen__l) {
    .cms-block-video-slider {
        .video-slider {
            .video-slide {
                .lib-clearfix();
                display: block;
                .video-placeholder-container {
                    float: left;
                    margin-bottom: 0;
                    margin-left: 0;
                    margin-right: 0;
                    max-width: none;
                    padding-bottom: 20px;
                    padding-top: 20px;
                    position: relative;
                    width: 50%;
                    z-index: 1;
                    .video-placeholder-container-inner {
                        width: auto;
                    }
                    .video-placeholder {
                        width: auto;
                    }
                    .play-video {
                        .lib-font-size(32);
                        &::before {
                            height: 37px;
                            margin-right: 10px;
                            top: -5px;
                            width: 37px;
                        }
                    }
                }
                .video-text-container {
                    box-sizing: border-box;
                    float: left;
                    margin-top: 0;
                    padding: 42px 0 42px 2.5%;
                    position: relative;
                    width: 42%;
                    &::before {
                        background-color: #f8f8f8;
                        bottom: 0;
                        content: '';
                        display: block;
                        height: 100%;
                        left: -20.96%;
                        position: absolute;
                        top: 0;
                        width: 20.97%;
                    }
                    .video-text-inner {
                        max-width: 365px;
                        position: relative;
                        top: 50%;
                        -webkit-transform: translateY(-50%);
                                transform: translateY(-50%);
                        .video-counter {
                            .lib-font-size(32);
                            margin-bottom: 10px;
                        }
                        .video-heading {
                            .lib-font-size(24);
                            margin-bottom: 12px;
                        }
                        .video-description {
                            .lib-font-size(16);
                            margin-bottom: 34px;
                        }
                        .video-cta {
                            width: auto;
                        }
                    }
                }
            }
        }
        .video-thumbnail-slider-heading {
            display: block;
        }
        .video-thumbnail-slider {
            margin-left: -20px;
            margin-right: -20px;
            .video-thumbnail-slide {
                cursor: pointer;
                margin-left: 20px;
                margin-right: 20px;
                .video-thumbnail-placeholder-container {
                    margin-bottom: 12px;
                }
                .video-thumbnail-counter {
                    color: @djo-blue;
                }
                .video-thumbnail-heading {
                    .lib-font-size(18);
                }
                &.slick-current {
                    .video-thumbnail-placeholder-container {
                        &::before {
                            width: 16px;
                        }
                    }
                }
            }
        }
    }
}