//
//  Common
//  _____________________________________________

& when (@media-common = true) {
    .tab-slider-heading,
    .tab-slider-subheading {
        margin-top: 0;
        text-align: center;
    }
    .tab-slider-subheading {
        color: @djo-gray-light;
        font-weight: 400;
    }
    .tab-slider {
        font-size: 0;
        text-align: center;
        .slick-track {
            .lib-vendor-prefix-display(flex);
            margin: 0 auto;
        }
        .tab {
            cursor: pointer;
            font-weight: 400;
            line-height: 1.2;
            margin-bottom: 40px;
            padding: 10px 15px;
            text-align: center;

            .lib-vendor-prefix-display(flex);
            .lib-vendor-box-align(center);
            height: auto !important;
            span {
                margin: 0 auto;
            }
        }
        .active-tab {
            background: @djo-blue;
            cursor: default;
            color: @color-white;
            font-weight: 700;
            position: relative;
            // the arrow at the bottom of the active tab
            &::after {
                border-color: @djo-blue transparent transparent transparent;
                border-style: solid;
                border-width: 14px 14px 0 14px;
                bottom: -14px;
                content: "";
                height: 0;
                left: 0;
                margin: auto;
                position: absolute;
                right: 0;
                width: 0;
            }
        }
    }
    // This moves tab content up to hit up against tabs. The negative margin
    // value should match the bottom margin of the ".tab" class.
    .tab-slider.tabs-no-bottom-spacing {
        margin-bottom: -40px;
        z-index: 2;
    }
    // Tab content
    .tab-content-container {
        .lib-list-reset-styles();
        .tab-content {
            margin: 0;
            // initially, only show the first tab
            &:not(:first-child) {
                display: none;
            }
        }
    }

    .block-content {
        .products-grid {
            margin: 0;
            padding: 0;
            position: relative;
            .product-item {
                margin: 0;
                padding: 0;
            }
            .slick-slider {
                margin-top: 0;

                // need this to allow for item hover absolute position overlay
                margin-bottom: -200px;
                padding-bottom: 200px;
                overflow: hidden;
                .slick-list {
                    overflow: visible;
                    &:hover {
                        z-index: 1;
                    }
                }
            }
        }
    }

    .product-slider {
        font-size: 0;
        margin: 0 0 40px;
        .slide {
            display: inline-block;
        }
    }
    .product-slider + footer {
        position: relative;
        text-align: center;
    }
    .slider-arrow {
        cursor: pointer;
        fill: #bbbab6;
        height: auto;
        margin: auto;
        position: absolute;
        top: 28%;
        -ms-transform: translateY(-28%);
            transform: translateY(-28%);
        z-index: 1;
    }
    .button-outline,
    .button-outline:visited {
        .lib-link-as-button();
        .lib-button-primary();
        .lib-button-revert-secondary-color();
        background-color: transparent;
        color: @djo-gray;
        font-weight: 700;
        padding: 8px 16px;
        &:hover {
            background-color: @button__background;
            border: @button__border;
        }
    }
}


//
//  Mobile
//  _____________________________________________


.media-width(@extremum, @break) when (@extremum = 'max') and (@break = @screen__568) {
    .tab {
        background: lighten(@djo-blue, 55%);
        margin-left: 10px;
        margin-right: 10px;
    }
}

.media-width(@extremum, @break) when (@extremum = 'max') and (@break = @screen__s) {
    .tab-slider-heading {
        .lib-font-size(24);
        margin-bottom: 30px;
    }
    .tab-slider-subheading {
        .lib-font-size(14);
        margin-bottom: 30px;
    }
    .tab {
        .lib-font-size(18);
    }
}

.media-width(@extremum, @break) when (@extremum = 'max') and (@break = @screen__m + 1) {
    .tab-slider {
        margin-left: -@layout__width-xs-indent;
        margin-right: -@layout__width-xs-indent;
    }
    .slider-arrow {
        width: 24px;
    }
    .slider-arrow-prev {
        left: -15px;
    }
    .slider-arrow-next {
        right: -15px;
    }
}


//
//  Desktop
//  _____________________________________________

.media-width(@extremum, @break) when (@extremum = 'min') and (@break = @screen__568) {
    .tab {
        border-bottom: 1px solid #ebebeb;
    }
}

.media-width(@extremum, @break) when (@extremum = 'min') and (@break = @screen__s) {
    .tab-slider-heading {
        .lib-font-size(36);
        margin-bottom: 60px;
    }
    .tab-slider-subheading {
        .lib-font-size(20);
        margin-bottom: 60px;
    }
    .tab {
        .lib-font-size(22);
    }
}

.media-width(@extremum, @break) when (@extremum = 'min') and (@break = @screen__m) {
    .slider-arrow {
        width: 36px;
    }
}

.media-width(@extremum, @break) when (@extremum = 'min') and (@break = @screen__m + 1) {
    .slider-arrow-prev {
        left: -2.1%;
    }
    .slider-arrow-next {
        right: -2.1%;
    }
}

.media-width(@extremum, @break) when (@extremum = 'min') and (@break = @screen__l) {
    .tab-slider-heading {
        margin-bottom: 40px;
    }
    .tab-slider-heading {
        &.with-subheading {
            margin-bottom: 20px;
        }
    }
    .tab-slider-subheading {
        margin-bottom: 40px;
    }
    .tab {
        .lib-font-size(18);
    }
    .product-slider {
        margin-bottom: 28px;
    }
    .slider-arrow-prev {
        left: -1.6%;
    }
    .slider-arrow-next {
        right: -1.6%;
    }
}

.media-width(@extremum, @break) when (@extremum = 'min') and (@break = @screen__xl) {
    .slider-arrow-prev {
        left: -28px;
    }
    .slider-arrow-next {
        right: -28px;
    }
}